【Flutter初心者用】画面の値を変化させるsetState()の基本をシンプルにわかりやすく解説

こんにちは！文系プログラマーのいおです！

今回はFlutterのsetState()メソッドについて、Flutterプロジェクトを立ち上げたときのデフォルトのサンプルプログラムを用いて説明する記事を書こうと思います。

はじめに
値を変化させるsetState()
- setState()について
- build()について
具体的なプログラム例
- main.dartの一部
- 中身（手順）の説明
おわりに

はじめに

サンプルプログラムの構成については下記記事を参考にしてみてください。

値を変化させるsetState()

setState()について

一言でいうと、画面の値を変化させることができるメソッドです。StatefulWidgetクラス内で使われます。このsetState()が呼ばれた後に、build()メソッドが再実行されます。

build()について

画面に配置したいウィジェットを記述するメソッドです。build()はStateオブジェクトが変更されるたびに呼ばれるメソッドのため、setState()の呼び出し後に強制的に実行されます。

つまり、「setState()でStateクラスの値を変化させ、build()で画面を再描画することで、見た目の画面が変化する」っていう仕組みだったんですね。

具体的なプログラム例

main.dartの一部

下記はFlutterプロジェクトを立ち上げたときにデフォルトで作成されるmain.dartの一部です。

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<myhomepage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<myhomepage> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

中身（手順）の説明

①変数の定義

int _counter = 0;

②setState()の定義

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

③floatingActionButtonのonPressedにセット

floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),

③を行うことで、ボタン（floatingActionButton）を押すたびに②が呼ばれることになるため、それに伴ってbuild()メソッドが実行され画面が再描画されるという流れですね。