InheritedWidgeを使って、カウンターアプリを作ってみた

Version

Flutter 2.6.0
Dart 2.14.4

InheritedWidgetとは

InheritedWidgetは、祖先のWidgetが管理するデータを複数の子孫が効率的に参照するために使われるWidgetで、providerパッケージのもとになっているらしい、、、です。
Flutterの状態管理を学ぶためにInheritedWidgetを使って、カウンターアプリを作ってみました。

InheritedWidgetの特徴

Widgetツリーの下層のBuildContextから、プロパティにO(1)でアクセスする。
プロパティが変化した時に下層のBuildContextに更新を伝えてリビルドさせる。

InheritedWidgetの実装例

MyInheritedWidget()

MyInheritedWidget of(BuildContext context)で、child:で指定したChildWidget()以下の子Widgetに直接変数を渡す。
context.dependOnInheritedWidgetOfExactTypeで、変数に変化があった時リビルドする。
bool updateShouldNotify(MyInheritedWidget oldWidget)で、リビルドをコントロールできる。(今回の実装では偶数のみリビルドさせています)

class MyInheritedWidget extends InheritedWidget {
  final int plusCount;

  MyInheritedWidget({required this.plusCount, required Widget child})
      : super(child: child);

  // O(1)でInheritedWidgetを返す
  // Widgetに変更があった時に下位ツリーのリビルドを発生させられる
  static MyInheritedWidget of(BuildContext context) =>
      context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>()
          as MyInheritedWidget;
  

  //更新確認(条件により更新するかしないかをコントロールできる)
  // updateShouldNotifyがtrueを返した時だけ更新が伝播される
  @override
  bool updateShouldNotify(MyInheritedWidget old) {
    // return plusCount != old.plusCount; // 通常のカウント
    return plusCount % 2 == 0; // 偶数のときだけリビルドする
  } 
}

InheritedWidgetPage()

StatefulWidgetでStateを持つ。
InheritedWidgetで囲まれた、FloatingActionButtonがonPressedされると,setStateにより変数が変化し、ChildWidget()以下の子Widgetに伝播する。

class InheritedWidgetPage extends StatefulWidget {
  InheritedWidgetPage({Key? key}) : super(key: key);

  final Widget child = _ChildWidget();

  @override
  _InheritedWidgetPageState createState() => _InheritedWidgetPageState();
}

class _InheritedWidgetPageState extends State<InheritedWidgetPage> {
  int _plusCount = 0;

  void _change() {
    setState(() {
      _plusCount++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("InheritedWidget"),
      ),
      body: Stack(
        children: [
          MyInheritedWidget(
              plusCount: _plusCount, child: Center(child: widget.child)),
          Positioned(
            top: 100,
            right: 50,
            child: FloatingActionButton(
              child: Icon(Icons.add),
              onPressed: _change,
            ),
          ),
        ],
      ),
    );
  }
}

ChildWidget()

MyInheritedWidget.of(context)により、上位のInheritedWidgetから直接変数を受け取ることができる。
変数が変化した場合、InheritedWidgetにより再描画される。

class _ChildWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 変更があった時にリビルドをする
    final plusCount = context
        .dependOnInheritedWidgetOfExactType<MyInheritedWidget>()
        ?.plusCount;

    return Column(
      children: [
        Text(
          plusCount.toString(),
          style: TextStyle(fontSize: 36),
        ),
      ],
    );
  }
}