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

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

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

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

オブジェクト指向

オブジェクト指向プログラミング(Object-oriented programming;OOP)は「オブジェクト」を使用するプログラミングの概念です。オブジェクト指向プログラムは、カプセル化(情報隠蔽)とポリモーフィズム(多態性)で構成されています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

Q&A

解決済

2回答

436閲覧

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

t_flutter

総合スコア7

Flutter

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

オブジェクト指向

オブジェクト指向プログラミング(Object-oriented programming;OOP)は「オブジェクト」を使用するプログラミングの概念です。オブジェクト指向プログラムは、カプセル化(情報隠蔽)とポリモーフィズム(多態性)で構成されています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

0グッド

0クリップ

投稿2023/02/07 06:37

実現したいこと

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: '統計', ), ], ), ), ), ); }

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

_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の方で学習及び基礎を習得したほうが良いです。

投稿2023/02/07 11:29

ta.fu

総合スコア1664

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

t_flutter

2023/02/07 13:12

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

0

ベストアンサー

Home( title: 'aaa', )

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

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

投稿2023/02/07 10:37

moriman

総合スコア615

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

t_flutter

2023/02/07 13:07

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問