実現したいこと
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: '統計', ), ], ), ), ), ); }
回答2件
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/02/07 13:12