Truyền state cho component con

Thuộc phần Quản lý trạng thái trong hành trình Flutter của Coddy. Bài học 1 trên 27.

Một ứng dụng gồm nhiều widget, và một widget nhỏ thường cần một giá trị do widget lớn hơn quản lý. Ở đây, điểm số nằm trong State của trang, còn bảng hiển thị điểm là một widget riêng.

Để truyền giá trị xuống, hãy thêm một trường final cho widget con và yêu cầu giá trị đó trong hàm khởi tạo:

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

  final int score;

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

Mỗi lần tạo widget con, widget cha truyền giá trị của mình vào: ScoreBoard(score: score). Khi widget cha gọi setState, nó tạo lại widget con và bảng sẽ nhận số mới.

Widget con không bao giờ thay đổi giá trị này. Nó hiển thị giá trị được truyền vào, còn widget cha vẫn là nơi duy nhất quản lý điểm số.

Thử thách

Dễ

Nút +1 tăng điểm, nhưng bảng luôn hiển thị Score: 0.

Thêm trường final int score vào ScoreBoard, và thiết lập giá trị cho trường này trong hàm khởi tạo.
Đặt nội dung văn bản là Score: theo sau là điểm số đó.
Truyền score của trang khi trang tạo bảng.

Tự làm thử

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));
  }
}