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

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

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

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

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

Read More

タグ

Flutter (103)初心者向け (26)イベント (17)Google Apps Script (14)Nextjs (11)可茂IT塾 (8)Firebase (7)riverpod (6)React (6)ChatGPT (5)新卒 (4)就活 (4)デザイン (4)Dart (4)JavaScript (4)FlutterWeb (3)vscode (3)Prisma (3)NestJS (3)Figma (3)Slack (3)TypeScript (3)ワーケーション (3)インターン (3)お知らせ (3)設計 (2)線型計画法 (2)事例 (2)Image (2)File (2)画像 (2)iOS (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)社会人 (2)大学生 (2)RSS (1)CodeRunner (1)個人開発 (1)Android (1)Unity (1)WebView (1)Twitter (1)フルリモート (1)TextScaler (1)textScaleFactor (1)学生向け (1)supabase (1)Java (1)Spring Boot (1)shell script (1)正規表現 (1)パワーポイント (1)趣味 (1)モンスターボール (1)CSS (1)SCSS (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)iPad (1)シェアハウス (1)スクレイピング (1)PageView (1)画面遷移 (1)flutter_hooks (1)Gmail (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)GCPコンソール (1)Google_ML_Kit (1)Vercel (1)Google Domains (1)Git (1)オンラインオフィス (1)LINE (1)Bitcoin (1)bitFlyer (1)コミュニティー (1)文系エンジニア (1)Freezed (1)markdown (1)GlobalKey (1)ValueKey (1)Key (1)アイコン (1)go_router (1)debug (1)datetime_picker (1)Apple Store Connect (1)FlutterGen (1)デバッグ (1)Widget Inspector (1)検索機能 (1)Shader (1)Navigator (1)メール送信 (1)Dio (1)CustomClipper (1)ClipPath (1)Material Design (1)カスタム認証 (1)アニメーション (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)mac (1)csv (1)Dialog (1)BI (1)LifeHack (1)ショートカット (1)Chrome (1)高校生 (1)キャリア教育 (1)非同期処理 (1)生体認証 (1)BackdropFilter (1)レビュー (1)getAuth (1)Algolia (1)コンサルティング (1)Symbol (1)

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

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

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

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

Read More