Flutter/Dart

階層の異なるWidget間の状態変更を通知する

階層が異なるWidget間で、片方のWidgetの状態を変更しても、もう片方は再ビルドされない。 そこで、Widget間で通知を行う処理を実装する。

Providerパッケージの追加

  1. dependencies:
  2.   provider: ^4.0.2

実装

ChangeNorifier

  1. class HogeChangeNotifier extends ChangeNotifier {
  2.   void hogeChanged() => notifyListeners();
  3. }

WidgetA

後述のWidgetBとWidgetCの共通の親

  1. class WidgetA extends StatefulWidget {
  2.   const WidgetA({Key key}) : super(key: key);
  4.   @override
  5.   _WidgetAState createState() => _WidgetAState();
  6. }
  8. class _WidgetAState extends State<WidgetA> {
  9.   @override
  10.   Widget build(BuildContext context) {
  11.     return ChangeNotifierProvider<HogeChangeNotifier>(
  12.       create: (context) => HogeChangeNotifier(),
  13.       child: Container(),
  14.     );
  15.   }
  16. }

WidgetB

通知を送るWidget

  1. class WidgetB extends StatelessWidget {
  2.   @override
  3.   Widget build(BuildContext context) {
  4.     return RaisedButton.icon(
  5.       // Provider経由でincrement関数を呼ぶ
  6.       onPressed: () =>
  7.         Provider.of<HogeChangeNotifier>(
  8.           context,
  9.           listen: false,  // listen:falseにより、こちらはリビルドされない
  10.         ).hogeChanged();
  11.     );
  12.   }
  13. }

WidgetC

通知を受けるWidget

  1. class WidgetC extends StatefulWidget {
  2.   const WidgetC({Key key}) : super(key: key);
  4.   @override
  5.   _WidgetCState createState() => _WidgetCState();
  6. }
  8. class _WidgetCState extends State<WidgetC> {
  9.   @override
  10.   Widget build(BuildContext context) {
  11.     return Consumer<TagSelectionChangeNotifier>(
  12.       builder: (_, __, ___) {
  13.         return Container();
  14.       }
  15.     );
  16.   }
  17. }