const MyHomePage({super.key, required this.title}); ←super.key はどこで使うのでしょうか？

Question

前提

Flutterの初学者です。

class MyHomePage の中にある
const MyHomePage({super.key, required this.title});
についてです。

この引数keyは、一体どこで使われているのでしょうか？

super.keyは親要素のプロパティkeyを参照しているのは分かるのですが、
home: const MyHomePage(title: 'Flutter Demo Home Page'),の際に、
引数を渡していないですよね？

実現したいこと

super.keyが必要な理由の理解

該当のソースコード

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {

// ↓このコードです。
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Answer 1

「親要素のプロパティ」という表現が少し気になるのですが、親クラスのプロパティですよね。

MyHomePageクラスはStatefulWidgetクラスを継承しています。
そして定義箇所に遷移すれば分かりますが、StatefulWidgetクラスはWidgetクラスを継承しています。
ということでWidgetクラスはMyHomePageクラスの祖先クラスということになります。

子孫クラスは自分の祖先クラスのプロパティを全て引き継ぐ(持つ)ことになります。

そしてWidgetクラスのkeyプロパティは下記のようにオプショナル型として宣言されています。

final Key? key;

つまり値がnullの場合もあり得る、ということになります。

そしてMyHomePageクラスのコンストラクタの引数は全部名前付き引数(named argument)なので、つまり省略可能な引数、つまり渡さなくてもよい引数、ということになります。

home: const MyHomePage(title: 'Flutter Demo Home Page'),

ですので、上記のようにMyHomePageインスタンス生成時にkeyプロパティに値を渡さなければ、
MyHomePageインスタンスのkeyプロパティはnull、ということになります。
keyプロパティにも値を渡せば、その値がkeyプロパティにセットされる、ということになります。

keyプロパティは主にwidgetが同じものか、別のものか、の識別に使われます。よく見る使い道としては、ListViewなどの各アイテムがリビルド前後で同じものか違うものかを判定して、リビルド時に適切に(プログラマーの意図通りに)各アイテムを扱うために使われます。
なので、そういうコードを書く必要がある場合、keyがnullだと困るので、keyを設定する必要があります。

具体的な使用例はFlutterを使い続けていれば嫌でもKeyを使うコードに出くわすでしょうから、その時に意識すれば良いかと思います。

詳しい情報は下記の動画などご参照ください。
https://www.youtube.com/watch?v=kn0EOS-ZiIc&t=4s

Comments

[hurozuki]

なるほど！
ご丁寧にありがとうございます。
記載のYouTube動画でより理解が進みました！