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

生徒

「FlutterのsetStateってよく使うって聞くんですが、どういうときに使うんですか？」

先生

「それはとても大切なテーマですね。setStateはFlutterで状態を更新して画面に反映させるための基本的な仕組みです。」

生徒

「何か特別な書き方があるんですか？使い方をちゃんと理解したいです！」

先生

「もちろん！それではsetStateの使い方や注意点を、実例を交えて詳しく見ていきましょう。」

1. setStateとは？Flutterにおける状態更新の基本

FlutterのsetState()は、ウィジェットの状態（State）を変更し、それに応じてUIを更新するための基本的なメソッドです。StatefulWidgetで状態を管理しているとき、何かしらの変化があった場合にsetStateを呼び出すことで、変更を反映させることができます。

ボタンを押したときにカウントが増える、チェックボックスをONにするなど、ユーザーの操作に反応して画面を動的に変化させたい場面で使われます。

2. setStateの基本的な書き方

それでは、実際にsetStateの基本的な使い方を見てみましょう。以下は、ボタンを押すたびにカウントが1つずつ増えるシンプルな例です。


import 'package:flutter/material.dart';

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

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

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

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

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

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

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('setStateの基本')),
      body: Center(child: Text('カウント: $_counter', style: const TextStyle(fontSize: 30))),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: const Icon(Icons.add),
      ),
    );
  }
}

3. setStateでの状態変更はこのように反映される

setState()内で_counter++のように値を変更し、Flutterに「状態が変わったよ」と伝えることで、その変化に応じて該当ウィジェットが再描画されます。build()メソッドが再実行され、最新の状態が画面に反映される仕組みです。

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

Flutter実践開発をAmazonで見る

※ Amazon広告リンク

4. setStateの注意点！パフォーマンスと設計の落とし穴

便利なsetStateですが、使い方を間違えるとパフォーマンスや設計に悪影響を及ぼすことがあります。以下の点には特に注意しましょう。

処理が重い関数をsetState内に書かない：画面の再描画が遅くなる原因になります。
不要な範囲で再描画しない：setStateはウィジェット全体を再描画するため、必要最小限のスコープで使うのが望ましいです。
非同期処理の中でsetStateを使うとき：Widgetが破棄されていないかをmountedで確認するのが安全です。

5. 非同期処理とsetStateの組み合わせに気をつけよう

非同期処理（Futureなど）の完了後にsetStateを使うケースでは、該当ウィジェットがまだ画面上にあるかをmountedでチェックするのが基本です。


void loadData() async {
  final data = await fetchSomeData();
  if (!mounted) return;
  setState(() {
    _data = data;
  });
}

このようにmountedを使って安全にsetStateを呼び出すことで、クラッシュやバグを防ぐことができます。

6. setStateはどんな時に使うべき？使わない方がいい場面も

setStateは小規模な状態変更には便利ですが、次のような場面では他の状態管理手法（ProviderやRiverpodなど）を使うのが適しています：

複数の画面にまたがる状態を管理したいとき
複雑なロジックや依存関係がある場合
テストのしやすさや再利用性を高めたいとき

特にアプリが大きくなってくると、setStateでは管理が追いつかなくなるため、段階的に状態管理パッケージの導入を検討しましょう。

7. Flutter初心者がsetStateを学ぶときのポイント

Flutterを初めて学ぶ方にとって、setStateはとても大切な基礎です。以下のポイントを意識すると理解が深まります。

状態が変化するタイミングを意識する
StatefulWidgetとStatelessWidgetの違いを理解する
UIのどの部分が再描画されるか確認しながら学習する

一度コードを書いて動かしてみることで、setStateの動作が自然と身についていきます。

FlutterのsetStateの使い方と注意点を詳しく解説！状態更新の基本