Flutterで状態管理をする

初めましてblueです。

現在、ITベンチャー企業でWEBキャンペーンシステムの開発を行っています。

今回はFlutterで状態管理をする方法に記事にしてみました！

状態管理とは？

アプリのデータ状態を管理すること
例えば、ECサイトのアプリだとカゴに商品を入れるとその状態が管理されたままになっていると思います。そのような管理する機能のことです。

使用するパッケージ

provider | Flutter Package

実装コード

  ChangeNotifierProvider(
      create: (context) => Counter(),
      child: const MyApp(),
    ),

ChangeNotifierProvider()
渡すデータを設定します。今回はCounter()を渡しています。

class Counter with ChangeNotifier {
  int value = 0;

  void increment() {
    value += 1;
    notifyListeners();
  }
}

ChangeNotifier()
継承するデータを設定。これがChangeNotifierProviderで渡すデータになります。

notifyListeners()
データが変更されるたびにこのメソッドを呼び出して、通知します。

 Consumer<Counter>(
              builder: (context, counter, child) => Text(
                '${counter.value}',
                style: Theme.of(context).textTheme.headline4,
              ),
            ),

Consumer()
状態の変化によってリビルドします。リビルドさせたいWidgetを囲む。

context.read<Counter>()

context.read<T>
受け取ったデータを元々のUI構築を行わず、変更する

全体コード（サンプルコード参照）

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Counter(),
      child: const MyApp(),
    ),
  );
}

class Counter with ChangeNotifier {
  int value = 0;

  void increment() {
    value += 1;
    notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('You have pushed the button this many times:'),
            Consumer<Counter>(
              builder: (context, counter, child) => Text(
                '${counter.value}',
                style: Theme.of(context).textTheme.headline4,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          var counter = context.read<Counter>();
          counter.increment();
        },
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}