Flutter/Dartで状態管理を行うProviderの導入方法と活用例

flutter

はじめに

Flutterは、Googleが提供するモバイルアプリ開発フレームワークで、多くのプログラマに人気があります。しかし、アプリを開発する際に状態管理が必要になる場面があります。Flutterでは、Providerパッケージを使用することで簡単に状態管理ができます。

初めてのFlutterアプリ開発チュートリアル

初めてのFlutter/Dartマルチプラットフォームアプリ開発チュートリアル
はじめに FlutterはGoogleが開発した、マルチプラットフォームのモバイルアプリ開発のフレームワークです。Flutterを使うと、AndroidとiOSの両方のプラットフォームで同時にアプリを開発することができます。 また、ブラウザ...
nbaboston.net
2023.03.18

この記事では、FlutterでProviderパターンを導入する方法と、具体的な活用例について解説します。まずは、Providerパターンとは何か、簡単に説明します。Providerパターンは、状態管理を効率的に行うための設計パターンで、Flutterでは、State Managementの1つとして用いられます。

参照）Providerのドキュメント

セットアップ

まず、pubspec.yamlファイルにProviderパッケージを追加します。

dependencies:
  flutter:
    sdk: flutter
  provider: ^x.x.x  # 最新のバージョンを確認してください

※パッケージへの追加はflutter pub add providerでも追加できます
次に、flutter pub getを実行してパッケージを取得します。

基本的な使い方

まずはシンプルなカウンターアプリを作ってみましょう。この例では、Providerを使用してカウンターの値を管理します。

まず、カウンターの状態を保持するCounterクラスを作成します。このクラスはChangeNotifierを継承します。

class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

次に、ChangeNotifierProviderを使用して、アプリケーションのトップレベルでCounterクラスのインスタンスを提供します。

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

最後に、Consumerウィジェットを使用して、Counterの現在の状態を取得し、UIを更新します。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Provider Example')),
        body: Center(
          child: Consumer(
            builder: (context, counter, child) => Text('${counter.count}'),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            Provider.of(context, listen: false).increment();
          },
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

これで、フローティングアクションボタンをタップするたびに、カウンターの値が増加し、その値が画面上に反映されます。

Consumerウィジェットは、Counterが更新されるたびに再構築され、最新のカウンターの値を表示します。

異なる状態の管理

上記の例では単一のCounterクラスを共有しましたが、Providerを使用すると複数の異なるタイプの状態を管理することも可能です。それぞれの状態は異なるChangeNotifierクラスとして定義し、それぞれをChangeNotifierProviderを使用して提供します。そして、それぞれのConsumerウィジェットでそれぞれの状態を消費します。

まとめ

この記事では、FlutterでProviderパッケージを使用してアプリケーションの状態管理を行う基本的な方法を説明しました。Providerを使用すると、アプリケーションの状態を効果的に管理し、コードを整理し、再利用性を向上させることができます。