Flutterのsuper.keyについて解説

Flutterでは、Widgetが作成される際に、オプションでkeyを指定することができます。この記事では、super.keyの概念と、それがどのように役立つかについて解説します。

Keyとは？
super.keyとは？
Keyの使用例
1. ウィジェットの状態を保持
2. ウィジェットを一意に識別
まとめ

Keyとは？

Keyは、FlutterのWidgetに関連付けられる一意の識別子です。通常、Widgetが作成される際にkeyを指定することはありません。しかし、特定のシナリオでは、keyを指定することで、Flutterフレームワークがより効率的にウィジェットツリーの再構築を行うことができます。具体的には、keyを指定することで、フレームワークが同じ種類のウィジェット間で状態を保持できるようになります。

super.keyとは？

super.keyは、カスタムウィジェットのコンストラクタで、親クラス（StatelessWidgetまたはStatefulWidget）のコンストラクタにkeyを渡す際に使用されます。以下は、super.keyを使用する例です。

class MyCustomWidget extends StatelessWidget {
  final String title;

  MyCustomWidget({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(title);
  }
}

上記の例では、MyCustomWidgetはStatelessWidgetを継承しています。このコンストラクタでは、オプションでkeyを受け取り、super(key: key)を使って親クラスのコンストラクタに渡しています。これにより、MyCustomWidgetにもkeyを指定することができます。

Keyの使用例

keyは、以下のようなシナリオで役立ちます。

ウィジェットの状態を保持

ListView.builderやGridView.builderなどのビルダーを使って動的にウィジェットを生成する場合、ウィジェットがスクロールアウトされた後に再利用されることがあります。この際に、特定のウィジェットの状態を保持したい場合にkeyを指定することが役立ちます。

ListView.builder(
  itemCount: items.length,
  itemBuilder: (BuildContext context, int index) {
    return MyCustomWidget(
      key: ValueKey(items[index].id),
      title: items[index].title,
    );
  },
)

ウィジェットを一意に識別

同じ種類のウィジェットが複数存在し、それらを一意に識別したい場合にも`key`を使用することができます。例えば、複数のDraggableウィジェットがあり、ドラッグアンドドロップを正確に制御したい場合、各ウィジェットに一意のkey`を割り当てることで、その識別と制御が容易になります。

Draggable(
  key: ValueKey(items[index].id),
  child: MyCustomWidget(title: items[index].title),
  feedback: MyCustomWidget(title: items[index].title),
  data: items[index],
)