Flutterで値を任意のタイミングで変更して画面描画する方法（setState）

目次

変数を書き換える方法

以下の様に、「testStr」の変数の値を書き換えるには「testStr = "書き換えたい値";」とする事で書き換える事ができます。
しかし、この様に書き換えると、「testStr」を画面に表示する様な処理を行なっている場合には、画面の値は変更されません。

import 'package:flutter/material.dart';

void main() => runApp(TestPageState());

class TestPage extends StatefulWidget {
  const TestPage({Key? key}) : super(key: key);
  @override
  TestPageState createState() => TestPageState();
}

class TestPageState extends State<TestPage> {
 // 変数
 String testStr = '変数のテキスト';

 @override
 Widget build(BuildContext context) {
    testStr = "変更";
    〜〜〜省略〜〜〜
 }
}

変数を書き換えて画面に描画する方法

以下が、変数の情報を画面に描画しておき、ボタン押下で変数の中身を変更するサンプルです。

import 'package:flutter/material.dart';

void main() => runApp(TestPageState());

class TestPage extends StatefulWidget {
  const TestPage({Key? key}) : super(key: key);
  @override
  TestPageState createState() => TestPageState();
}

class TestPageState extends State<TestPage> {
 // 変数
 String testStr = '変数のテキスト';

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body:Center(
       child: Column(
         children: [
           Text('$testStr'),
           RaisedButton(
             onPressed: () {
                 setState(() {
                   testStr = "変更後のテキスト";
                 });
             },
             child: Text("変数書き換えボタン"),
           ),
         ],
         mainAxisAlignment: MainAxisAlignment.center,
       ),
     )
   );
 }
}

注目するべきは、以下の様に「setState」の中で「testStr = "変更後のテキスト";」の変数書き換えを行なっている事です。
「setState」の中で変数を書き換えることで、「build」の関数が再度実行され、画面の描画が再実行されるため、画面表示が変わるという結果になります。

setState(() {
  testStr = "変更後のテキスト";
});