1 of 15

StatefulWidget を救いたい

Flutter Meetup Osaka #6

2021.2.10 Wed.

@chooyan-eng

2 of 15

自己紹介

中條剛（ちゅうじょうつよし）

　 @chooyan_i18n

フリーランスでアプリ開発やっています。ここ 1, 2 年は Flutter が多いです。
講師もやってます（iOS 入門、 Android 入門など）。
Zenn や Qiita で Flutter 関連の記事を書いてます。

@chooyan

@chooyan_eng

3 of 15

こんな記事書いてます

@chooyan

@chooyan_eng

“ how it works” を勉強する記事が中心

“ how to use” の紹介記事が中心

4 of 15

こんなところで働いています

株式会社はんぽさき

漁船やそれに関わる仕事を支援、管理するためのシステムを Flutter アプリと Web アプリ（Angular）で開発しています。

興味のある方は ↑ の bosyu リンクから。

https://bosyu.me/b/M_lGLQ57eT8

5 of 15

StatefulWidget 使ってますか？

6 of 15

StatefulWidget にしかできないことを見つけて

StatefulWidget を救いたい

StatefulWidget とは

主に UI を作るための State を保持できる Widget
Provider などの状態管理パッケージを導入すると使われなくなりがち

「StatefulWidget は使用禁止」なプロジェクトもあるとかないとか

7 of 15

StatefulWidget のドキュメントを読む

If a subtree does not change, cache the widget that represents that subtree and re-use it each time it can be used. It is massively more efficient for a widget to be re-used than for a new (but identically-configured) widget to be created.

（意訳）サブツリーに変更が無い場合、サブツリーを構築する Widget をキャッシュして使い回すと良いでしょう。変更のない Widget を新しく生成し直すよりも使い回す方が圧倒的に効率的です。

https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html

8 of 15

コストが高いリビルドランキング（ざっくり版）

ツリーの構造が変わる（ツリーの同じ場所にあった Widget の型もしくは key が変わる）

サブツリーも含めて State や Element を全て生成し直される。�

ツリーの構造は変わらないけど Widget のインスタンスが変わる

State や Element は使い回される。
サブツリーも順番にリビルドされていく。（リビルドの伝播）�

同じインスタンスを使い回し

サブツリーがリビルドされない！（リビルドの伝播を堰き止める）
Widget の生成に const をつけるのが推奨される理由もコレ。

9 of 15

リビルド

する

リビルド

しない

キャッシュを

使い回し！

リビルドの伝播を堰き止めるイメージ

10 of 15

Element.updateChild で処理している ( framework.dart の 3307 行目あたり )

インスタンスが

同一かを判定

11 of 15

State に Widget をキャッシュしよう

パターン1

キャッシュがあれば使い回す

パターン2

状態が変わっていなければ使い回す

12 of 15

なぜ StatefulWidget を使うのか

ココだけ！

Widget 単体で対応できる！

周辺の設計や状態管理ライブラリに依存しない�

Provider でやる場合

ValueNotifier クラスで Widget や前回の状態をキャッシュしなければならない。
でも ValueNotifier にはその役割と直接関係のない Widget や「前回の状態」を置きたくない。

13 of 15

注意

とは言え、この工夫を使う場面は無さそう、、

そもそもこんな工夫を入れなくても Flutter は十分速い。
それよりも const をつける方が圧倒的に大事。
下手に取り入れるとバグの原因にもなるので、「本当にそれ以外に方法がない」状況でようやく検討対象に入るかどうか。

参考：https://twitter.com/_mono/status/1359140052484247553�

StatefulWidget の特性を把握して活用方法を考えるきっかけにしたい

単独で任意のオブジェクトを保持できる。
他の Widget やクラスを変更せずに工夫を入れられる。

14 of 15

In the end, it's your job to decide if you need a StatefulWidget or not.

You may need it when writing animations for example.

（意訳）結局のところ、StatefulWidget を使うかどうかは開発者1人ひとりが決めることです。アニメーションなんかでも使うしね。

https://stackoverflow.com/questions/59445371/using-flutter-provider-means-no-statefulwidgets/59445408#59445408