子コンポーネントにStateを渡す

CoddyのFlutterジャーニー「状態管理」セクションの一部。レッスン 1/27。

アプリは多くのウィジェットで構成され、小さなウィジェットが大きなウィジェットの持つ値を必要とすることはよくあります。ここでは、スコアはページのStateに保持されていますが、それを表示するボードは独立したウィジェットです。

値を子に渡すには、子にfinalフィールドを用意し、コンストラクターで受け取るようにします。

class ScoreBoard extends StatelessWidget {
  const ScoreBoard({super.key, required this.score});

  final int score;

  @override
  Widget build(BuildContext context) {
    return Text('Score: $score');
  }
}

親は子をビルドするたびに値を渡します。ScoreBoard(score: score)。親がsetStateを呼び出すと、再びビルドされ、ボードには新しい数値が渡されます。

子が値を変更することはありません。渡された値を表示し、スコアを所有するのは親のままです。

チャレンジ

簡単

+1ボタンを押すと点数は増えますが、ボードには常にScore: 0と表示されます。

ScoreBoardに、コンストラクターで設定するfinal int scoreフィールドを追加します。
テキストをScore: に続けてその点数を表示するようにします。
ページがボードを作成するときに、ページのscoreを渡します。

自分で試してみよう

import 'package:flutter/material.dart';

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

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

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const ScoreBoard(),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  score++;
                });
              },
              child: const Text('+1'),
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Text('Score: 0', style: TextStyle(fontSize: 32));
  }
}