動画
要約
- 子widgetから親widgetのデータを参照したい場合、InheritedWidgetを使おう
- わざわざ子widgetにデータを渡さなくても、子widgetから直接親widgetのデータにアクセスできるようになる。
内容
あるwidgetから別のwidgetにデータを渡すのはときに面倒です。
上の例はOneからTwoを経由して、Threeにcolorsというデータを渡している
InheritedWidgetがその悩みを解消します。
InheritedWidgetを使えば、子widgetはどこからでもInheritedWidgetのデータを参照できるようになります。
使い方はまず、InheritedWidgetをextendsしたclassを作成してください。このclassのデータがchildから参照できるようになります。
次に、いま作ったclassにフィールド変数を宣言してください。この変数は子widgetから参照できるようになります。
次に、関数を2つ実装する必要があります。
1つ目はof関数です。
of関数を実装しておくことで、子widgetからInheritedWidgetのデータにアクセスする際、コードがとてもシンプルになります。
ColorInfo.of(context).colorsで親widgetのcolorsを取得できる。
2つ目の関数はupdateShouldNotifyです。
これはInheritedWidgetのデータが変更された場合、そのデータを参照しているwidgetを再ビルドする必要があるかどうかを判定してFlutterに伝えます。
この関数はパラメータとして、oldwidget（データ変更前のwidget）を受け取るので、oldwidgetのデータと変更後のデータを比較することで、再ビルドが必要かどうか判断できます。
また、データの変更や再描画がwidgetツリーの下の方で行われる場合は、valueNotifierやchangeNotifierなどと組み合わせて使うのが良いでしょう。
（参考：ValueListenableBuilder/ValueNotifierの使い方）
ただし、valueNotifierを使うとコードが複雑になりがちなので、複雑になるようであれば、そもそものロジック構成を再検討するのがいいでしょう。
providerやscopといったモデルを利用するのがいいかもしれません。
InheritedWidgetに関する詳細な解説が別動画で提供されているので、こちらも是非参考にしてください（英語です）。
まとめ
Widget of the Weekの#36 InheritedWidgetの日本語翻訳版でした。
Flutterはその仕組み上、widgetツリーのネストが深くなりがちです。
そのため、親widgetのデータを子孫のwidgetから参照したいケースは珍しくありません。
InheritedWidgetを利用することで、コードをシンプルに保ったままで、子widgetから親widgetのデータにアクセスすることができるようになります。
Flutterの基本テクニックの１つとして覚えておくと良さそうです。
■ 次の記事はこちら
#37 – AnimatedIcon
■Widget of the Week まとめ
Widget of the Week 一覧