Value Key

타입이 같은 위젯들의 식별을 위함.

- Flutter는 기본적으로 위젯의 타입으로 식별
- Stateful 위젯의 식별을 위해서는 key 필요
- value key는 value값을 가지는 stateful 위젯을 식별하는데 사용한다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHome(),
    );
  }
}

class MyHome extends StatefulWidget {
  @override
  State<MyHome> createState() => _MyHomeState();
}


class _MyHomeState extends State<MyHome> {
  bool use = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (use) TextField(decoration: InputDecoration(labelText: "이름")),
            TextField(decoration: InputDecoration(labelText: "아이디")),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  use = false;
                });
              },
              child: Text("press"),
            )
          ],
        ),
      ),
    );
  }
}

이렇게 해서 실행해서 press 눌러보면, "이름"과 "아이디'를 넣고 press를 눌러 이름 필드를 없애면 "이름"필드의 원래 값이 "아이디"필드에 남음 ㅜ

Textfield 생성자의 key 인자로 ValueKey넣어주면 식별이 되어서 작동 잘됨.

.....

children: [
  if (use) TextField(key: ValueKey(1), decoration: InputDecoration(labelText: "이름")),
  TextField(key: ValueKey(2), decoration: InputDecoration(labelText: "아이디")),
  ElevatedButton(
    onPressed: () {
      setState(() {
        use = false;
      });
    },
    child: Text("press"),
  )
],

....

 

---

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHome(),
    );
  }
}

class MyHome extends StatefulWidget {
  @override
  State<MyHome> createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  bool use = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (use) TextField(key: ValueKey(1), decoration: InputDecoration(labelText: "이름")),
            TextField(key: ValueKey(2), decoration: InputDecoration(labelText: "아이디")),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  use = false;
                });
              },
              child: Text("press"),
            )
          ],
        ),
      ),
    );
  }
}