setStateで画面を再描画

CoddyのFlutterジャーニー「アプリをインタラクティブにする」セクションの一部。レッスン 11/34。

このアプリで1つ追加を押して、コンソールを見てください。1、2、3と表示されます。画面上の数字は0のままです。Flutterは画面を一度だけ構築し、その後もう一度構築するよう指示されていません。

StatelessWidgetは変化しません。変化する画面はStatefulWidgetで、次の2つのクラスとして記述します。

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Text('$_count');
  }
}

HomePageは、どのStateを作るかを指定するだけです（createStateは、「値を返す関数」で学んだアロー形式で記述します）。_HomePageStateが実際の処理を行います。_countのような画面のデータをクラスの先頭にある変数に保持し、画面を構築します。画面が存在する間はこのクラスも存在するため、_countの値は再構築の前後で保持されます。

画面を変更するには、setStateの中でデータを変更します。これによってFlutterに「変更があったので、もう一度構築して」と伝わり、Textに新しい数字が表示されます。

setState(() {
  _count = _count + 1;
});

_HomePageStateと_countの先頭にあるアンダースコアは、名前をプライベートにします。つまり、このファイル内でのみ使用できます。Stateクラスやその変数には、通常アンダースコアが付いています。

チャレンジ

中級

Add oneを押すたびに画面上の数値が1増えるようにします。_countへの変更をsetStateの中に記述してください。

自分で試してみよう

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('$_count', style: TextStyle(fontSize: 48)),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                _count = _count + 1;
                print(_count);
              },
              child: Text('Add one'),
            ),
          ],
        ),
      ),
    );
  }
}