Flutterでコンストラクタのconstに赤線のエラーが出る

Question

前提・実現したいこと

Flutter初心者です。
BottomNavigationBarを使ってページを変えるプログラムを書きました。(Riverpodも使っております。)
一応動かせるようにはなったのですが、エラー(解決したけどなぜ解決できたのか理由がわからない)や疑問点があるため質問させていただきたいです。

質問させていただきたいこと

①以下の画像の部分のconstに赤線が出ます。
constを消せば問題なく動くのですが、なぜconstを消せば動くか分かっておらず、今後のためにもなぜこのようなエラーが出るのかご教示いただきたいです。(_pageListの定義があるせいでconstに赤線が出ているみたいです。)

②_pageListはどこで定義するべきなのでしょうか？
buildメソッドの上(上記画像の通りの場所)??
buildメソッドの中??

  ......
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final pageType = ref.watch(pageTypeProvider);

    final List<Widget> _pageList = <Widget>[
        const FirstPage(),
        const SecondPage(),
        const ThirdPage(),
    ];

    return Scaffold(......

RootPageクラスの外??

final List<Widget> _pageList = <Widget>[
    const FirstPage(),
    const SecondPage(),
    const ThirdPage(),
];

class RootPage extends ConsumerWidget {......

RootPageの外でRiverpodのProviderで定義??

final pageListProvider = Provider<List<Widget>>(
  (ref) => [
    const FirstPage(),
    const SecondPage(),
    const ThirdPage(),
  ],
);

class RootPage extends ConsumerWidget {......

それともその他の場所でしょうか？？
可能でしたらその場所に定義する理由も教えていただきたいです。

環境

flutter 2.10.5
riverpod 1.0.3
Dart 2.16.2
DevTools 2.9.2
vscode
windows10

該当ソースコード

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'bottom_tab_icons.dart';

final pageTypeProvider = StateProvider<PageType>((ref) => PageType.home);

enum PageType {
  home,
  ranking,
  setting,
}

class RootPage extends ConsumerWidget {
  const RootPage({Key? key}) : super(key: key);

  final List<Widget> _pageList = <Widget>[
    const FirstPage(),  // ホームアイコンのページ
    const SecondPage(), // ランキングのページ
    const ThirdPage(),  // 設定のページ
  ];

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final pageType = ref.watch(pageTypeProvider);

    return Scaffold(
      body: _pageList[pageType.index],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: pageType.index,
        onTap: (index) =>
            ref.read(pageTypeProvider.notifier).state = PageType.values[index],
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'ホーム',
          ),
          BottomNavigationBarItem(
            icon: Icon(BottomTabIcons.chart_bar),
            label: 'ランキング',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: '設定',
          ),
        ],
      ),
    );
  }
}

class FirstPage extends StatelessWidget {
  const FirstPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: const Center(
        child: const Icon(
          Icons.home,
          size: 200,
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  const SecondPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: const Center(
        child: const Icon(
          BottomTabIcons.chart_bar,
          size: 200,
        ),
      ),
    );
  }
}

class ThirdPage extends StatelessWidget {
  const ThirdPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: const Center(
        child: const Icon(
          Icons.settings,
          size: 200,
        ),
      ),
    );
  }
}

Answer 1

①
多分、以下の様に修正すればいいはずです。

  final List<Widget> _pageList = const <Widget>[
     FirstPage(),  // ホームアイコンのページ
     SecondPage(), // ランキングのページ
     ThirdPage(),  // 設定のページ
  ];

元の実装だと_pageListの中身が変更できるという理由でconstなコンストラクタとして定義できないものだと思います。

②
該当するウィジェット(オブジェクト)をどのタイミングで生成させたいかで変わります。
それは本人しかわからないので、自分が好きな場所でというしかないです。

builderの中であれば、該当メソッドが呼ばれたときに生成される。
クラス内のメンバ変数として定義しているのであれば、そのクラスのオブジェクトを生成した時に一緒に生成される。
Providerは使ったことが分からないですが、riverpodのプロバイダの説明を見る限り、今回のケースではそぐわないのでは？と思います。ほかの所でも共有利用するというのであれば、ありなのか？

この部分だけでいうのであれば、私ならビルダーの中かな。
builderないが複雑化して、タブの項目を見やすく管理というのであれば、メソッド化して配列をリターンで返すようにするかな。ただその場合は構造を見直し、いくつかのウィジェットをまとめてクラス化するかもしれないけど。

Comments

[ponsuke88]

ご回答いただきありがとうございました。
いただいた①の修正でエラーが解消いたしました。
②のどのタイミングで生成させたいかはいろいろ試してみようと思います。