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

生徒

「Flutterでアプリを作ってるんですが、状態管理ってよく聞くんですけど、それって何ですか？」

先生

「いいですね、その疑問から入るのはとても大事です。Flutterでは画面の表示内容を『状態（State）』として管理することが基本なんですよ。」

生徒

「Stateってよく出てくるけど、どんな時に使うんですか？

先生

「例えば、ボタンを押したらカウントが増える、入力欄の文字が変わると画面が更新される、というようなときですね。ではFlutterの状態管理の基本から見ていきましょう！」

1. Flutterの状態管理とは何か？

Flutterにおける状態管理とは、アプリのデータやUIの状態（State）を一元的に管理し、変更があったときにそれを画面に反映する仕組みです。FlutterはUIフレームワークであり、ユーザーの操作やAPIからの応答によって状態が変化します。その状態変化に応じて画面も再描画されるのがFlutterの特徴です。

状態管理を適切に行うことで、コードの保守性やテストのしやすさが大きく向上します。特に初心者がアプリを作る際にも、状態管理の理解は避けて通れないポイントです。

2. Stateとは？StatelessWidgetとStatefulWidgetの違い

Flutterのウィジェット（画面部品）は2種類に分かれます。それがStatelessWidget（状態を持たない）とStatefulWidget（状態を持つ）です。

StatelessWidget：状態（変化）がないウィジェット。例えば、テキストや画像など。
StatefulWidget：状態（変化）を持つウィジェット。例えば、カウントアップボタンなど。

以下は、カウントボタンの例です。


import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const CounterPage(),
    );
  }
}

class CounterPage extends StatefulWidget {
  const CounterPage({super.key});

  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('カウントアプリ')),
      body: Center(child: Text('$_count', style: const TextStyle(fontSize: 40))),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

3. setStateとは？画面を更新するための仕組み

上記のコードで出てきたsetState()は、Stateの値を変更し、UIにその変更を反映させるためのメソッドです。

setStateの中で変数を書き換えることで、Flutterはその変更を検知し、自動で該当ウィジェットを再描画します。これはFlutterの「宣言的UI」の仕組みを支える重要な機能です。

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

Flutter実践開発をAmazonで見る

※ Amazon広告リンク

4. よく使われる状態管理の種類（Provider・Riverpodなど）

FlutterにはsetState以外にも、複雑なアプリや大規模な状態管理に対応するためのフレームワークがいくつか存在します。特に人気が高いのは以下の2つです。

Provider：公式ドキュメントでも推奨される、最も基本的な外部パッケージ。シンプルで理解しやすく、初学者にも人気。
Riverpod：Providerの改良版。よりスケーラブルでテストしやすい設計。

初めての状態管理にはProviderから始めるのがおすすめです。

5. Providerの基本的な使い方

以下にProviderを使った基本的な状態管理のコード例を紹介します。まずはpubspec.yamlに依存関係を追加します。


dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

次に、ChangeNotifierを使ったカウンタークラスを定義します。


import 'package:flutter/material.dart';

class Counter extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

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

その上で、Providerでラップし、Consumerで状態を監視してUIに反映します。


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

6. 状態管理が必要になる場面とは？

Flutterアプリの中で状態管理が必要になる典型的な場面は次のようなときです：

フォーム入力欄の値を保存・検証する
ログイン状態を管理する
APIから取得したデータを画面に反映する
ナビゲーションを状態に応じて切り替える

初心者の方は、最初はsetStateで十分ですが、アプリの機能が増えるとProviderやRiverpodのような外部パッケージの導入が必要になってきます。

7. 初心者におすすめのFlutter状態管理ステップ

初心者がFlutterの状態管理を学ぶステップは以下のように進めるのが良いでしょう：

setStateで状態変更の基本を理解する
単一ファイル内での状態管理の実装練習
ChangeNotifierとProviderを使ってデータを分離
画面をまたいだ状態管理や非同期APIとの連携に挑戦
RiverpodやBlocなどの高度なパッケージに進む

Flutterの状態管理の基本とは？初心者向けにわかりやすく解説