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

image

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を返した時だけ更新が伝播される
  
  bool updateShouldNotify(MyInheritedWidget old) {
    // return plusCount != old.plusCount; // 通常のカウント
    return plusCount % 2 == 0; // 偶数のときだけリビルドする
  } 
}

InheritedWidgetPage()

  • StatefulWidgetでStateを持つ。
  • InheritedWidgetで囲まれた、FloatingActionButtononPressedされると,setStateにより変数が変化し、ChildWidget()以下の子Widgetに伝播する。
class InheritedWidgetPage extends StatefulWidget {
  InheritedWidgetPage({Key? key}) : super(key: key);

  final Widget child = _ChildWidget();

  
  _InheritedWidgetPageState createState() => _InheritedWidgetPageState();
}

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

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

  
  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 {
  
  Widget build(BuildContext context) {
    // 変更があった時にリビルドをする
    final plusCount = context
        .dependOnInheritedWidgetOfExactType<MyInheritedWidget>()
        ?.plusCount;

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

まとめ

これで、カウンターアプリをInhereitedWidgetで書き換えることができました。 デバックで変数の変化などを見ながら動かすともっとよくわかるかもしれません。

参考

https://medium.com/flutter-jp/inherited-widget-37495200d965 https://qiita.com/agajo/items/375d5415cb79689a925c

お知らせ

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

タグ

Flutter (70)初心者向け (22)イベント (15)Nextjs (8)Google Apps Script (7)可茂IT塾 (6)Firebase (6)React (5)新卒 (3)就活 (3)給与支払報告書 (3)riverpod (3)Dart (3)JavaScript (3)TypeScript (3)インターン (3)FlutterWeb (2)画像 (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)ワーケーション (2)社会人 (2)大学生 (2)お知らせ (2)webfeed (1)RSS (1)CodeRunner (1)VSCode (1)個人開発 (1)設計 (1)フルリモート (1)学生向け (1)Java (1)Spring Boot (1)エンジニア (1)DeviceOrientation (1)正規表現 (1)神楽 (1)趣味紹介 (1)プログラミングだけではない可茂IT塾のメンバー (1)線型計画法 (1)事例 (1)PreferredSize (1)マテリアルデザイン (1)Material (1)クパチーノデザイン (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)シェアハウス (1)スクレイピング (1)Gmail (1)Googleグループ (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)Vercel (1)Google Domains (1)branch (1)Git (1)オンラインオフィス (1)Freezed (1)アイコン (1)Apple Store Connect (1)FlutterGen (1)検索機能 (1)Navigator (1)メール送信 (1)カスタム認証 (1)アニメーション (1)FloatingActionButton (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)Dialog (1)Figma (1)デザイン (1)Slack (1)BI (1)非同期処理 (1)BackdropFilter (1)iOS (1)レビュー (1)getAuth (1)匿名 (1)Algolia (1)chakra-ui (1)コンサルティング (1)Symbol (1)reactive_forms (1)

お知らせ

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More