【日本語版】【Flutter】Widget of the Week – #36 InheritedWidget【要約】

動画

要約

  • 子widgetから親widgetのデータを参照したい場合、InheritedWidgetを使おう
  • わざわざ子widgetにデータを渡さなくても、子widgetから直接親widgetのデータにアクセスできるようになる。

内容

あるwidgetから別のwidgetにデータを渡すのはときに面倒です。
 

目的のwidgetまで延々とデータを渡すのは大変だし面倒
上の例はOneからTwoを経由して、Threeにcolorsというデータを渡している

InheritedWidgetがその悩みを解消します。

InheritedWidgetを使えば、子widgetはどこからでもInheritedWidgetのデータを参照できるようになります。

使い方はまず、InheritedWidgetをextendsしたclassを作成してください。このclassのデータがchildから参照できるようになります。
 

InheritedWidgetをextendsしたclassを作る

次に、いま作ったclassにフィールド変数を宣言してください。この変数は子widgetから参照できるようになります。
 

子widgetから参照できるcolorsという変数を作成

次に、関数を2つ実装する必要があります。

1つ目はof関数です。

of関数を実装しておくことで、子widgetからInheritedWidgetのデータにアクセスする際、コードがとてもシンプルになります。
 

of関数を用意しておけば、
子widgetから簡単にアクセスできるようになる。
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の基本テクニックの1つとして覚えておくと良さそうです。

■ 次の記事はこちら
#37 – AnimatedIcon

■Widget of the Week まとめ
Widget of the Week 一覧