Передача состояния дочернему компоненту

Часть раздела Управление состоянием путешествия по Flutter на Coddy. Урок 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));
  }
}