[Flutter]画面(screen)を再描画(rerender)するには？

どうも、ちょげ(@chogetarou)です。

画面を再描画する方法を紹介します。

方法
使用例
1. 関連

方法

画面を再描画するには、「setState」を使います。

具体的な方法としては、画面を再描画したいタイミングで、「setState((){})」を呼び出します。

setState(() {});

setStateが呼び出すことで、画面を再描画することが出来ます。

また、setStateの引数の関数では、再描画する際に行いたい処理を指定できます。

setStateを使うには、StatefulWidgetを使う必要があります。

使用例

以下は、使用例です。

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
  var _count = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text('$_count'),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _count++;
                });
              },
              child: Text('再描画'),
            ),
          ],
        ),
        width: double.infinity,
      ),
    );
  }
}