初心者と学ぶFlutter第4回：State管理とsetState解説

はじめに
1. StatelessWidget vs StatefulWidget
1. StatelessWidget
  1. StatelessWidgetの例
2. StatefulWidget
  1. StatefulWidgetの基本的な構造
setStateを使った状態管理
1. 状態の変更とUIの更新
2. 例：カウンターアプリ
ColumnやRowを使ったレイアウトの状態管理
1. 例：複数ボタンで状態を管理する
setStateを使う上での注意点
1. setStateの呼び出しは必要最小限に
2. 状態を局所的に管理する
まとめ
1. この記事のポイント

はじめに

前回はDart言語の基礎文法を学びました。

Flutter開発に必要なDartの基本文法を初心者向けに解説。データ型、制御構文、関数、クラス、非同期処理まで丁寧に学べる入門ガイド。

今回は状態管理を学びます。

アプリケーション開発において「状態管理」はとても重要なテーマです。特にユーザーの入力や操作によってUIが変わるアプリケーションでは、状態管理が欠かせません。Flutterでも、状態（State）を適切に管理することがアプリケーションの品質に大きく影響します。

この記事では、Flutterの状態管理の基本となるStatefulWidgetとsetStateを使って、状態がどのように変わり、それに伴ってUIが更新されるのかを初心者向けにわかりやすく解説していきます。状態管理の基本を理解すれば、より複雑なアプリケーションの開発が楽になります。

1. StatelessWidget vs StatefulWidget

まず、Flutterには2つの主要なウィジェットがあります。それはStatelessWidgetとStatefulWidgetです。

StatelessWidget

StatelessWidgetは、その名前の通り状態を持たないウィジェットです。状態が変わらない画面や静的な要素を作成する際に使います。TextやIconなどは、StatelessWidgetに分類されます。

StatelessWidgetの例

Dart

import 'package:flutter/material.dart';

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('StatelessWidget Example')),
      body: Center(child: Text('This is a stateless widget')),
    );
  }
}

void main() {
  runApp(MaterialApp(home: MyStatelessWidget()));
}

StatefulWidget

一方、StatefulWidgetは状態を持つウィジェットです。状態が変わることで、UIもそれに応じて更新されるような場面で使います。ユーザーの入力や操作に応じて、画面が動的に変化する場合に使うのがStatefulWidgetです。

StatefulWidgetの基本的な構造

下記コードのポイントは、StatefulWidgetが状態を持ち、状態を管理するためにStateクラス（_MyStatefulWidgetState）を定義しているところです。このクラス内で状態を変更し、それに応じてUIを更新します。

Dart

import 'package:flutter/material.dart';

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('StatefulWidget Example')),
      body: Center(child: Text('This is a stateful widget')),
    );
  }
}

void main() {
  runApp(MaterialApp(home: MyStatefulWidget()));
}

setStateを使った状態管理

StatefulWidgetで状態を管理する際に使うのが、setStateメソッドです。setStateを呼び出すことで、状態を変更し、それに伴ってUIが再レンダリングされます。

状態の変更とUIの更新

setStateを使うことで、状態を更新し、その状態に基づいてUIを再描画する仕組みを実現できます。以下は、ボタンを押すたびにカウントが増えるシンプルなカウンターアプリの例です。

例：カウンターアプリ

状態の定義：_counterという整数変数でカウントの状態を管理しています。初期値は0です。
状態の変更：_incrementCounterメソッドでsetStateを呼び出し、_counterの値を1つ増やします。このメソッドが呼ばれるたびに、_counterが更新され、UIも自動的に再レンダリングされます。
UIの更新：Textウィジェットの中で_counterの値を表示しているため、ボタンを押すたびに表示される数字が更新されます。

Dart

import 'package:flutter/material.dart';

class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int _counter = 0;  // 状態を管理する変数

  // カウントを増やすメソッド
  void _incrementCounter() {
    setState(() {
      _counter++;  // 状態の変更
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter App')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,  // ボタンを押すとカウントを増やす
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: CounterApp()));
}

ColumnやRowを使ったレイアウトの状態管理

状態管理は、単に数値を増減させるだけでなく、複雑なUIレイアウトでも必要です。例えば、ColumnやRowを使って、複数のウィジェットを縦や横に並べ、その状態を動的に変更することも可能です。

以下は、Column内に複数のボタンを並べ、それぞれがクリックされるたびにカウントが増加する例です。

例：複数ボタンで状態を管理する

2つのボタンとそれぞれのカウントが独立して状態を管理しています。
Columnを使って縦に配置し、_incrementCount1と_incrementCount2でそれぞれのボタンの状態を変更しています。
それぞれのボタンを押すと、対応するカウントが増え、UIに反映されます。

Dart

import 'package:flutter/material.dart';

class MultiButtonApp extends StatefulWidget {
  @override
  _MultiButtonAppState createState() => _MultiButtonAppState();
}

class _MultiButtonAppState extends State<MultiButtonApp> {
  int _count1 = 0;
  int _count2 = 0;

  // ボタン1のカウントを増やす
  void _incrementCount1() {
    setState(() {
      _count1++;
    });
  }

  // ボタン2のカウントを増やす
  void _incrementCount2() {
    setState(() {
      _count2++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Multi Button App')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('Button 1 count: $_count1'),
          ElevatedButton(
            onPressed: _incrementCount1,
            child: Text('Increment Button 1'),
          ),
          SizedBox(height: 20),  // ボタン間にスペースを入れる
          Text('Button 2 count: $_count2'),
          ElevatedButton(
            onPressed: _incrementCount2,
            child: Text('Increment Button 2'),
          ),
        ],
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: MultiButtonApp()));
}