先生と生徒の会話形式で理解しよう

生徒

「FlutterでProviderってよく聞くんですが、何のために使うんですか？」

先生

「ProviderはFlutterで状態管理を効率よく行うための仕組みですね。特にアプリが少し大きくなってくると、setStateだけでは限界があるので使われるようになります。」

生徒

「なるほど！でもどうやって使うんですか？コードも交えて教えてほしいです！」

先生

「それでは、Providerの基本的な使い方から、実際のコード例、Flutterでの活用方法まで詳しく説明していきましょう。」

1. FlutterにおけるProviderとは？状態管理の定番パッケージ

Providerは、Flutter公式でも推奨されている状態管理パッケージです。Flutterアプリでは、ユーザーの操作やAPIのレスポンスに応じて状態（State）を更新し、それをUIに反映させる必要があります。

小規模なアプリであればsetStateで十分ですが、状態を複数のウィジェット間で共有したり、再利用性の高いコードを書いたりしたい場合には、Providerのような状態管理ツールが欠かせません。

2. Providerのメリットとは？なぜ使うべきか

Providerを使うと、以下のようなメリットがあります。

UIとロジックを分離できる：データ処理をクラスに切り分けて管理可能。
状態の共有が簡単：複数のウィジェットから同じデータにアクセスできる。
パフォーマンスが向上：必要な部分だけを更新できる。
テストしやすいコードに：ロジックを独立させやすいためテストも容易。

Flutterアプリをスケーラブルに保つためにも、Providerは非常に有効な手段です。

3. Providerを使うための準備：pubspec.yamlへの追加

まず、Providerパッケージをプロジェクトに追加する必要があります。以下のようにpubspec.yamlに記述します。


dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

保存後、ターミナルでflutter pub getを実行して依存関係を反映させましょう。

Flutterを「実務レベル」で使えるようになりたい人や、 iPhone / Android両対応アプリ開発の流れをまとめて学びたい人には、定番の実践書がこちらです。

Flutter実践開発をAmazonで見る

※ Amazon広告リンク

4. ChangeNotifierとProviderでカウンターアプリを作ってみよう

Providerの基本は、ChangeNotifierというクラスを使って通知可能な状態（Notifier）を作ることです。まずはカウンターの状態を管理するクラスを作成します。


import 'package:flutter/material.dart';

class Counter extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners(); // これでUIに変更を通知
  }
}

次に、main.dartでChangeNotifierProviderを使ってアプリ全体にCounterを提供します。


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

5. Consumerウィジェットで状態を使う

Providerで提供したデータを受け取るにはConsumerウィジェットを使います。以下がUI部分の例です。


class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Providerの基本')),
        body: Center(
          child: Consumer<Counter>(
            builder: (context, counter, child) {
              return Text('カウント: ${counter.count}', style: const TextStyle(fontSize: 30));
            },
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => context.read<Counter>().increment(),
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

ConsumerはChangeNotifierがnotifyListenersを実行したときに再描画されます。

6. Providerの種類と役割の違い

Flutterのproviderパッケージには、いくつかのバリエーションがあります。それぞれの違いを簡単に紹介します。

Provider：単純な値の提供に使う。finalなデータ向け。
ChangeNotifierProvider：ChangeNotifierを使って変更通知可能なデータを提供。
FutureProvider：非同期処理の結果を提供。
StreamProvider：ストリーム型のデータをリアルタイムに提供。

最初はChangeNotifierProviderから始めるのが理解しやすくておすすめです。

7. Provider導入時の注意点とベストプラクティス

Providerは便利ですが、使い方を誤ると以下のような問題が起こる可能性があります。

不要なConsumerでビルドが多発 → パフォーマンス低下
データ構造が肥大化 → クラスを適切に分離する
UIロジックがロジック層に混ざる → 役割をしっかり分ける

また、Providerをアプリ全体に使う場合は、MultiProviderでまとめて管理するのが一般的です。


MultiProvider(
  providers: [
    ChangeNotifierProvider(create: (_) => Counter()),
    ChangeNotifierProvider(create: (_) => OtherModel()),
  ],
  child: MyApp(),
)

Providerとは？Flutterアプリでの使い方とメリットまとめ