質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Q&A

解決済

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

ponsuke88
ponsuke88

総合スコア12

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

1回答

0グッド

0クリップ

713閲覧

投稿2022/05/05 16:08

編集2022/05/05 16:14

前提・実現したいこと

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

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

①以下の画像の部分のconstに赤線が出ます。
constを消せば問題なく動くのですが、なぜconstを消せば動くか分かっておらず、今後のためにもなぜこのようなエラーが出るのかご教示いただきたいです。(_pageListの定義があるせいでconstに赤線が出ているみたいです。)
イメージ説明
②_pageListはどこで定義するべきなのでしょうか?
buildメソッドの上(上記画像の通りの場所)??
buildメソッドの中??

Dart

1 ...... 2 3 Widget build(BuildContext context, WidgetRef ref) { 4 final pageType = ref.watch(pageTypeProvider); 5 6 final List<Widget> _pageList = <Widget>[ 7 const FirstPage(), 8 const SecondPage(), 9 const ThirdPage(), 10 ]; 11 12 return Scaffold(......

RootPageクラスの外??

Dart

1final List<Widget> _pageList = <Widget>[ 2 const FirstPage(), 3 const SecondPage(), 4 const ThirdPage(), 5]; 6 7class RootPage extends ConsumerWidget {......

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

Dart

1final pageListProvider = Provider<List<Widget>>( 2 (ref) => [ 3 const FirstPage(), 4 const SecondPage(), 5 const ThirdPage(), 6 ], 7); 8 9class RootPage extends ConsumerWidget {......

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

環境

flutter 2.10.5
riverpod 1.0.3
Dart 2.16.2
DevTools 2.9.2
vscode
windows10

該当ソースコード

Dart

1import 'package:flutter/material.dart'; 2import 'package:flutter_riverpod/flutter_riverpod.dart'; 3import 'bottom_tab_icons.dart'; 4 5final pageTypeProvider = StateProvider<PageType>((ref) => PageType.home); 6 7enum PageType { 8 home, 9 ranking, 10 setting, 11} 12 13class RootPage extends ConsumerWidget { 14 const RootPage({Key? key}) : super(key: key); 15 16 final List<Widget> _pageList = <Widget>[ 17 const FirstPage(), // ホームアイコンのページ 18 const SecondPage(), // ランキングのページ 19 const ThirdPage(), // 設定のページ 20 ]; 21 22 23 Widget build(BuildContext context, WidgetRef ref) { 24 final pageType = ref.watch(pageTypeProvider); 25 26 return Scaffold( 27 body: _pageList[pageType.index], 28 bottomNavigationBar: BottomNavigationBar( 29 currentIndex: pageType.index, 30 onTap: (index) => 31 ref.read(pageTypeProvider.notifier).state = PageType.values[index], 32 items: const [ 33 BottomNavigationBarItem( 34 icon: Icon(Icons.home), 35 label: 'ホーム', 36 ), 37 BottomNavigationBarItem( 38 icon: Icon(BottomTabIcons.chart_bar), 39 label: 'ランキング', 40 ), 41 BottomNavigationBarItem( 42 icon: Icon(Icons.settings), 43 label: '設定', 44 ), 45 ], 46 ), 47 ); 48 } 49} 50 51class FirstPage extends StatelessWidget { 52 const FirstPage({Key? key}) : super(key: key); 53 54 55 Widget build(BuildContext context) { 56 return const Scaffold( 57 body: const Center( 58 child: const Icon( 59 Icons.home, 60 size: 200, 61 ), 62 ), 63 ); 64 } 65} 66 67class SecondPage extends StatelessWidget { 68 const SecondPage({Key? key}) : super(key: key); 69 70 71 Widget build(BuildContext context) { 72 return const Scaffold( 73 body: const Center( 74 child: const Icon( 75 BottomTabIcons.chart_bar, 76 size: 200, 77 ), 78 ), 79 ); 80 } 81} 82 83class ThirdPage extends StatelessWidget { 84 const ThirdPage({Key? key}) : super(key: key); 85 86 87 Widget build(BuildContext context) { 88 return const Scaffold( 89 body: const Center( 90 child: const Icon( 91 Icons.settings, 92 size: 200, 93 ), 94 ), 95 ); 96 } 97} 98

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

1

ベストアンサー


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

dart

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

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


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

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

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

投稿2022/05/06 00:48

ta.fu

総合スコア1347

ponsuke88👍を押しています

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

ponsuke88

2022/05/06 03:25

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

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。