Flutter クラスの使い方について

Question

実現したいこと

flutterの文法の理解（タブによる画面の切り替え時の文法理解）

前提

オブジェクト指向を勉強しつつflutterで簡単なアプリを作ろうとしていますが入門書を読んでもいまいち分からなかったため質問させていただきます。
今、bottomNavigationBarを使って3つのタブ(Home,Shopping,analysis)を作りタブを押下時にそれぞれHome,Shopping,Analysisクラスを呼び出して画面を描画しました。
以下のコードは_MyHomePageStateクラスに存在しており

TabBarView(
          children: <Widget>[
            Home(
              title: 'aaa',
            ),
            shopping(
              title: 'bbb',
            ),
            analysis(
              title: 'ccc',
            ),
          ],
        ),

この中で以下に示すHomeクラス

class Home extends StatefulWidget {
  const Home({super.key, required this.title});

  final String title;

  @override
  State<Home> createState() => _MyHome();
}

class _MyHome extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        leading: IconButton(
          icon: Icon(Icons.add),
          onPressed: () => setState(() {}),
        ),
        leadingWidth: 20,
        title: const Text("料理を選ぶ"),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.add),
            onPressed: () => setState(() {}),
          ),
          const Center(
              child: Padding(
            padding: EdgeInsets.all(5.0),
            child: Text(
              '料理を登録',
              style: TextStyle(fontSize: 20),
            ),
          ))
        ],
      ),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(8),
          child: GridView.builder(
            itemCount: images.length,
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3, crossAxisSpacing: 8.0, mainAxisSpacing: 8.0),
            itemBuilder: (context, index) {
              return Image.asset(images[index], fit: BoxFit.cover);
            },
          ),
        ),
      ),
    );
  }
}

を呼び出して画面を描画しようとしているのですがこの時、Homeクラスはインスタンス化されていないのでしょうか？
入門書ではクラスはインスタンス化して使用すると書いてあったのですが、該当の箇所はどう解釈したらよいのでしょうか？よろしくお願いします。

MyHomePageStateクラス

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return const DefaultTabController(
      length: 3,
      child: Scaffold(
        //TabBarViewはtabsのTabに1対1に対応する。
        body: TabBarView(
          children: <Widget>[
            Home(
              title: 'aaa',
            ),
            shopping(
              title: 'bbb',
            ),
            analysis(
              title: 'ccc',
            ),
          ],
        ),
        bottomNavigationBar: Material(
          color: Colors.black,
          child: TabBar(
            labelColor: Colors.pink,
            unselectedLabelColor: Colors.white,
            indicatorSize: TabBarIndicatorSize.label,
            indicatorColor: Colors.yellow,
            tabs: <Widget>[
              Tab(
                icon: Icon(Icons.home, size: 28),
                text: 'ホーム',
              ),
              Tab(
                icon: Icon(Icons.shopping_cart_outlined, size: 28),
                text: '買い物',
              ),
              Tab(
                icon: Icon(Icons.calculate_outlined, size: 28),
                text: '統計',
              ),
            ],
          ),
        ),
      ),
    );
  }

Answer 1

_MyHomePageStateのbuildが呼び出されたときにDefaultTabControllerのインスタンスがreturnされます。
なのでこの段階でHome(title: 'aaa',)のインスタンスも含め上位側のインスタンスに認知されるということになるのかな。

ちなみにDefaultTabControllerのウィジェットの構成を、build内の実装を元にHomeまで書くと以下の様な管理階層としてとらえることができます。
DefaultTabController-Scaffold-TabBarView-List<Widget>-Home。

またDefaultTabControllerはconst(定数)なのでその下のHome(title: 'aaa',)のインスタンスもconstになり、プログラム実行時には生成されているものと思われます。

---

現状書けるのはこんな感じなのかな。
flutterのWidgetとその使用する仕組みとかが複雑なので、何時生成されるのか、使用しているクラスはどこなのかは、実装を追っていかないと分からないことが多いです。
flutterでオブジェクト指向や言語理解するには難があり、UIを含まないDartの方で学習及び基礎を習得したほうが良いです。

Comments

[t_flutter]

ta.fuさんご回答ありがとうございます。とりあえず動かすことはできるのですが動きを理解をしようとすると難しい部分があり腑に落ちないでました。オブジェクト指向自体はJavaの入門書で学んでいるところなので違いを意識しつつ理解していこうかと思っています。

Answer 2

Home(
              title: 'aaa',
            )

この箇所でコンストラクタが呼び出された時にHomeクラスのインスタンスが生成されます。
Shopping、Analysisインスタンスについても同様。

https://dart.dev/guides/language/language-tour#constructors
とりあえずここらへんでDartの文法の基本事項を確認するとflutterの学習もはかどると思います。

Comments

[t_flutter]

morimanさん、ご回答ありがとうございます。インスタンス化されていたということが分かりかなりすっきりしました。困ったときはまずは公式のドキュメントを読むようにしたいと思います。