StatefulWidgetを書く

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

今回は、StatefulWidgetを自分で書きます。画面にはI feel Sleepyと表示され、コーヒーを飲むを押すとI feel Awakeに変わるはずです。StatelessWidgetでは、それはできません。

StatelessWidgetをStatefulWidgetに変えるには、3つの手順があります。

extends StatelessWidgetをextends StatefulWidgetに変更し、buildをcreateStateに置き換えます。
その下にStateクラスを書き、buildを変更せずにそこへ移します。
変化する変数をbuildの外に出し、Stateクラスの先頭に移します。

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

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

class _HomePageState extends State<HomePage> {
  String _mood = 'Sleepy';

  @override
  Widget build(BuildContext context) {
    ...
  }
}

手順3が重要です。buildの先頭にある変数は、buildが実行されるたびに作り直されるため、setStateの後には'Sleepy'に戻ってしまいます。Stateクラスの先頭に置けば一度だけ作られ、設定した値が保持されます。

チャレンジ

中級

HomePageを_HomePageStateクラスを持つStatefulWidgetにしてください。Stateの先頭にあるString _mood = 'Sleepy';に気分を保持し、Drink coffeeで'Awake'に変更するように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 StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    String mood = 'Sleepy';
    return Scaffold(
      appBar: AppBar(title: Text('Mood')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('I feel $mood', style: TextStyle(fontSize: 32)),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {},
              child: Text('Drink coffee'),
            ),
          ],
        ),
      ),
    );
  }
}