【 Flutter 】Flutter を 基礎 から 学習 ( アーキテクチャ ) part232 「setState()メソッド」だけを使ったサンプル
「 基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は アーキテクチャ ( part232 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( アーキテクチャ ) part231 「setState()メソッド」だけを使ったサンプル
引き続き、アーキテクチャについて学びます。
「setState()メソッド」だけを使ったサンプル
「setState()メソッド」だけを使ったサンプルの続きとなります。
前回はせっせとサンプルを入力しただけで終わりました。
以下のような結果になりました。
このサンプルを起動してみましょう！
なんてことはないカウンターのアプリケーションの完成です。
ここで「+」ボタンをタップしたときに故意にインジケーターを出しスリープ処理を導入してみます。
動作を確認しておきましょう。
「+」ボタンをタップするとかっこよくローディングが行われるようになりました😉
ただ、setStateメソッドをあちこちに記述しなくてはいけなくなるので可読性が低下してしまっています。
加えて本書で問題視しているのはsetStateを呼び出すたびにbuildが呼ばれてしまうことです。
ログを確認して驚きました。
I/flutter ( 2353): called _WidgetA#build()
I/flutter ( 2353): called _WidgetB#build()
I/flutter ( 2353): called _WidgetC#build()
I/flutter ( 2353): called _WidgetA#build()
I/flutter ( 2353): called _WidgetB#build()
I/flutter ( 2353): called _WidgetC#build()
I/flutter ( 2353): called _WidgetA#build()
I/flutter ( 2353): called _WidgetB#build()
I/flutter ( 2353): called _WidgetC#build()
I/flutter ( 2353): called _WidgetA#build()
I/flutter ( 2353): called _WidgetB#build()
I/flutter ( 2353): called _WidgetC#build()
I/flutter ( 2353): called _WidgetA#build()
I/flutter ( 2353): called _WidgetB#build()
I/flutter ( 2353): called _WidgetC#build()
I/flutter ( 2353): called _WidgetA#build()
I/flutter ( 2353): called _WidgetB#build()
I/flutter ( 2353): called _WidgetC#build()
I/flutter ( 2353): called _WidgetA#build()
I/flutter ( 2353): called _WidgetB#build()
I/flutter ( 2353): called _WidgetC#build()
各Widgetクラスのbuildがたくさん実行されています。
ウィジェットツリーが込み入ってくると相当のbuildメソッドがbuildの必要有無関係なく都度実行されてしまいます。
最後に
これを解決することが次回以降の説明ということです。
今日はここまで！