【Flutter】ValueKeyとGlobalKeyの活用方法

はじめに

Keyは、ウィジェットを一意に識別するために使用されます。 これにより、ウィジェットを効率的に更新、管理することができます。 特にValueKeyとGlobalKeyは、リスト表示やフォームの管理でよく利用されます。 この記事では、ValueKeyとGlobalKeyの使い方をサンプルコードを交えて解説します。

開発環境

• Flutter version 3.14.0
• Dart 3.2.0

作成したサンプルアプリ

この記事では、以下のサンプルアプリを解説します。

ValueKeyについて

ValueKeyは、値に基づいてウィジェットを一意に識別するために使用されます。 このKeyはリストなどのコレクションウィジェットで多く用いられ、アイテムの追加・削除されたときにウィジェットが正しく更新されます。 以下の部分では、ValueKeyを使用してリスト内のフルーツが一意に識別され、効率的にUIを更新できるようにしています。

child: ListView.builder(
              itemCount: _fruits.length,
              itemBuilder: (context, index) {
                return ListTile(
                  key: ValueKey('${_fruits[index]}_$index'), // ValueKeyを使用
                  title: Text(_fruits[index]),
                );
              },
            ),

GlobalKeyについて

GlobalKeyは名前の通り、アプリ全体でウィジェットを一意に識別するために使用されます。つまり、ウィジェットツリーの異なる場所にあるウィジェットにもアクセスできるようになります。 このKeyはフォームの保存や検証など状態を管理するためによく使用されます。 以下の部分では、GlobalKeyを介してフォームの状態にアクセスすることでfruitsリストに新しいフルーツを追加しています。

void _addFruit() {
    if (_formKey.currentState?.validate() ?? false) {
      _formKey.currentState?.save(); //GlobalKeyを使用
      setState(() {
        _fruits.add(_newFruit);
        _newFruit = ''; 
      });
    }
  }

final GlobalKey<FormState> _formKey = GlobalKey<FormState>(); //GlobalKeyを定義

          Form(
            key: _formKey, //GlobalKeyを使用
            child: TextFormField(
              decoration: InputDecoration(labelText: 'Add a fruit'),
              onSaved: (value) {
                _newFruit = value ?? '';
              },
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return 'Please enter a fruit';
                }
                return null;
              },
            ),
          ),
          SizedBox(height: 16),
          ElevatedButton(
            onPressed: _addFruit,
            child: Text('Add Fruit'),
          ),

コード全文

サンプルアプリのコード全文です。こちらのアプリではGlobalKeyを用いたFormでフルーツリストに新しいフルーツを追加し、ValueKeyを用いて更新されたリストを表示しています。

import 'package:flutter/material.dart';

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

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

class FruitsFormPage extends StatefulWidget {
  @override
  _FruitsFormPageState createState() => _FruitsFormPageState();
}

class _FruitsFormPageState extends State<FruitsFormPage> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  final List<String> _fruits = [];
  String _newFruit = '';

  void _addFruit() {
    if (_formKey.currentState?.validate() ?? false) {
      _formKey.currentState?.save();
      setState(() {
        _fruits.add(_newFruit);
        _newFruit = ''; // フォームをクリア
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fruits List Form'),
      ),
      body: Column(
        children: [
          Form(
            key: _formKey,
            child: TextFormField(
              decoration: InputDecoration(labelText: 'Add a fruit'),
              onSaved: (value) {
                _newFruit = value ?? '';
              },
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return 'Please enter a fruit';
                }
                return null;
              },
            ),
          ),
          SizedBox(height: 16),
          ElevatedButton(
            onPressed: _addFruit,
            child: Text('Add Fruit'),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: _fruits.length,
              itemBuilder: (context, index) {
                return ListTile(
                  key: ValueKey('${_fruits[index]}_$index'), // ValueKeyを使用
                  title: Text(_fruits[index]),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

さいごに

Keyを理解し使用することで、ウィジェットを効率的に識別し管理することができるようになります。 Flutterにはさまざまな状態管理の方法がありますが、これからも色々と試して使い分けられるようになりたいと思います。