Q&A
前提・実現したいこと
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件
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2022/05/06 03:25