【Flutter】ValueKeyとGlobalKeyの活用方法

image

はじめに

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 {
  
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FruitsFormPage(),
    );
  }
}

class FruitsFormPage extends StatefulWidget {
  
  _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 = ''; // フォームをクリア
      });
    }
  }

  
  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にはさまざまな状態管理の方法がありますが、これからも色々と試して使い分けられるようになりたいと思います。

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

タグ

Flutter (105)初心者向け (26)イベント (17)Google Apps Script (15)Nextjs (11)可茂IT塾 (8)Firebase (7)riverpod (6)React (6)ChatGPT (5)新卒 (4)就活 (4)vscode (4)デザイン (4)Dart (4)JavaScript (4)FlutterWeb (3)Prisma (3)NestJS (3)Figma (3)Slack (3)TypeScript (3)ワーケーション (3)インターン (3)お知らせ (3)設計 (2)線型計画法 (2)事例 (2)Image (2)File (2)Material Design (2)画像 (2)iOS (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)社会人 (2)大学生 (2)RSS (1)CodeRunner (1)個人開発 (1)Android (1)Unity (1)WebView (1)Twitter (1)フルリモート (1)TextScaler (1)textScaleFactor (1)学生向け (1)supabase (1)Java (1)Spring Boot (1)shell script (1)正規表現 (1)パワーポイント (1)趣味 (1)モンスターボール (1)CSS (1)SCSS (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)iPad (1)シェアハウス (1)スクレイピング (1)PageView (1)画面遷移 (1)flutter_hooks (1)Gmail (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)GCPコンソール (1)Google_ML_Kit (1)Vercel (1)Google Domains (1)Git (1)オンラインオフィス (1)オブジェクト指向 (1)クラスの継承 (1)ポリモーフィズム (1)LINE (1)Bitcoin (1)bitFlyer (1)コミュニティー (1)文系エンジニア (1)Freezed (1)markdown (1)GlobalKey (1)ValueKey (1)Key (1)アイコン (1)go_router (1)debug (1)datetime_picker (1)Apple Store Connect (1)FlutterGen (1)デバッグ (1)Widget Inspector (1)検索機能 (1)Shader (1)Navigator (1)メール送信 (1)Firebase App Distribution (1)Fastlane (1)Dio (1)CustomClipper (1)ClipPath (1)カスタム認証 (1)アニメーション (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)mac (1)csv (1)docker (1)GithubActions (1)Dialog (1)BI (1)LifeHack (1)ショートカット (1)Chrome (1)高校生 (1)キャリア教育 (1)非同期処理 (1)生体認証 (1)BackdropFilter (1)レビュー (1)getAuth (1)Algolia (1)コンサルティング (1)Symbol (1)

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More