【Flutter】Providerパターンを使った状態管理の基本的な使い方とサンプルコード

Flutterの状態管理における基本的な使い方とサンプルコード

概要

Flutterは、クロスプラットフォームのモバイルアプリケーション開発フレームワークです。状態管理は、アプリケーションの正常な動作に欠かせない要素であり、Flutterではさまざまな方法が提供されています。本記事では、その中でも特に注目されている「Providerパターン」について解説します。Providerパターンは、単一のデータソースを共有するための効果的な手法であり、状態管理をシンプルかつ効率的に行うことができます。

Providerパターンとは

Providerパターンは、Flutterにおける状態管理の手法の一つです。このパターンでは、アプリケーション全体の状態を一元管理するためのプロバイダー(Provider)と呼ばれるクラスを使用します。プロバイダーは、データの変更を通知し、その変更に応じてウィジェットを再構築する役割を担います。この仕組みにより、状態の共有や監視を簡単に行うことができます。

Providerパターンの基本的な使い方

Providerパターンを利用するためには、まず

provider

パッケージをプロジェクトに追加する必要があります。以下のコマンドを実行して、パッケージをインストールします。


$ flutter pub add provider

次に、

main.dart

ファイルでプロバイダーを設定します。

MultiProvider

ウィジェットを使用して、複数のプロバイダーをまとめることができます。


void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => CounterProvider()),
        ChangeNotifierProvider(create: (_) => ThemeProvider()),
      ],
      child: MyApp(),
    ),
  );
}

上記の例では、

CounterProvider

ThemeProvider

という2つのプロバイダーを使用しています。それぞれのプロバイダーは、

ChangeNotifierProvider

を使用して作成しています。

続いて、ウィジェットツリー内でプロバイダーを使用する方法について説明します。ウィジェットでプロバイダーを使用するには、

Provider.of

メソッドを使用するか、

Consumer

ウィジェットを使う方法があります。


class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counterProvider = Provider.of<CounterProvider>(context);
    final themeProvider = Provider.of<ThemeProvider>(context);

    return Column(
      children: [
        Text('Count: ${counterProvider.count}'),
        RaisedButton(
          onPressed: () => counterProvider.increment(),
          child: Text('Increment'),
        ),
        Consumer<ThemeProvider>(
          builder: (context, themeProvider, child) {
            return SwitchListTile(
              value: themeProvider.isDarkMode,
              onChanged: (value) => themeProvider.toggleTheme(),
              title: Text('Dark Mode'),
            );
          },
        ),
      ],
    );
  }
}

上記の例では、

Provider.of

メソッドを使用して

CounterProvider

ThemeProvider

を取得しています。これにより、ウィジェット内でプロバイダーの状態を参照したり、プロバイダーのメソッドを呼び出したりすることができます。

サンプルコード

以下に、Counterアプリケーションのサンプルコードを示します。このアプリケーションでは、カウンターの値を表示し、ボタンを押すと値を増やすことができます。


class CounterProvider with ChangeNotifier {
  int _count = 0;

  int get count => _count;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Counter App')),
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counterProvider = Provider.of<CounterProvider>(context);

    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('Count: ${counterProvider.count}', style: TextStyle(fontSize: 24)),
          RaisedButton(
            onPressed: () => counterProvider.increment(),
            child: Text('Increment'),
          ),
        ],
      ),
    );
  }
}

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

まとめ

この記事では、Flutterにおける状態管理の基本的な使い方として「Providerパターン」について紹介しました。Providerパターンは、状態管理をシンプルかつ効率的に行うための手法であり、Flutterの開発において非常に重要な要素です。プロバイダーを使用することで、状態の共有や監視を容易に行うことができます。是非、Flutterの開発においてProviderパターンを活用してみてください。

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x