Providerとは？Flutterアプリでの使い方とメリットまとめ
生徒
「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(),
)
この記事を読んだ人からの質問
