[Flutter] Key

🗝️ Key란?

📍 Widget, Element, SemanticsNode의 식별자이다
📍 동일한 상태의 동일한 위젯으로 구성된 위셋을 재구성하거나 추가/삭제하는 경우 사용된다

🌱 Stateless Widget Code

...

class KeyTest extends StatefulWidget {
  const KeyTest({super.key});

  @override
  State<KeyTest> createState() => _KeyTestState();
}

class _KeyTestState extends State<KeyTest> {
  List<Widget> tiles = [
    StatelessColorfulTile(),
    StatelessColorfulTile(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Key Test'),
      ),
      body: Row(children: tiles),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            tiles.insert(1, tiles.removeAt(0));
          });
        },
        child: const Icon(Icons.sentiment_very_satisfied),
      ),
    );
  }
}

class StatelessColorfulTile extends StatelessWidget {
  final Color myColor = UniqueColorGenerator.getColor();
  StatelessColorfulTile({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: myColor,
      child: const Padding(padding: EdgeInsets.all(70.0)),
    );
  }
}

...

🌱 실행 결과

🌱 Stateful Widget Code

...

class KeyTest extends StatefulWidget {
  const KeyTest({super.key});

  @override
  State<KeyTest> createState() => _KeyTestState();
}

class _KeyTestState extends State<KeyTest> {
  List<Widget> tiles = [
    const StatefulColorfulTile(),
    const StatefulColorfulTile(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Key Test'),
      ),
      body: Row(children: tiles),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            tiles.insert(1, tiles.removeAt(0));
          });
        },
        child: const Icon(Icons.sentiment_very_satisfied),
      ),
    );
  }
}

class StatefulColorfulTile extends StatefulWidget {
  const StatefulColorfulTile({super.key});

  @override
  State<StatefulColorfulTile> createState() => _StatefulColorfulTileState();
}

class _StatefulColorfulTileState extends State<StatefulColorfulTile> {
  final Color myColor = UniqueColorGenerator.getColor();

  @override
  Widget build(BuildContext context) {
    return Container(
      color: myColor,
      child: const Padding(padding: EdgeInsets.all(70.0)),
    );
  }
}

...

🌱 실행 결과

Stateful Class로 바꾸는 경우 색상 변환이 제대로 이루어지지 않음을 알 수 있다
(widget tree 참조)

🌱 Stateful Widget Code 수정

...

class KeyTest extends StatefulWidget {
  const KeyTest({super.key});

  @override
  State<KeyTest> createState() => _KeyTestState();
}

class _KeyTestState extends State<KeyTest> {
  List<Widget> tiles = [
	// Key 삽입
    StatefulColorfulTile(key: UniqueKey()),
    StatefulColorfulTile(key: UniqueKey()),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Key Test'),
      ),
      body: Row(children: tiles),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            tiles.insert(1, tiles.removeAt(0));
          });
        },
        child: const Icon(Icons.sentiment_very_satisfied),
      ),
    );
  }
}

class StatefulColorfulTile extends StatefulWidget {
  // 생성자 매개변수로 key 받기
  const StatefulColorfulTile({required Key key}) : super(key: key);

  @override
  State<StatefulColorfulTile> createState() => _StatefulColorfulTileState();
}

class _StatefulColorfulTileState extends State<StatefulColorfulTile> {
  final Color myColor = UniqueColorGenerator.getColor();

  @override
  Widget build(BuildContext context) {
    return Container(
      color: myColor,
      child: const Padding(padding: EdgeInsets.all(70.0)),
    );
  }
}

...

🌱 실행 결과

---

📑 Reference

[Flutter] Key Class