Truyền callback 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 2 trên 27.

Một giá trị đi từ lớp cha xuống lớp con. Thao tác nhấn đi theo chiều ngược lại: nút nằm trong lớp con, nhưng điểm số mà nút thay đổi thuộc về lớp cha.

Lớp cha đưa cho lớp con một hàm, rồi lớp con gọi hàm đó. Hàm không có tham số và không trả về gì có kiểu VoidCallback:

class AddButton extends StatelessWidget {
  const AddButton({super.key, required this.onAdd});

  final VoidCallback onAdd;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(onPressed: onAdd, child: Text('Add point'));
  }
}

Lớp cha viết thao tác cần thực hiện khi nhấn, dùng setState như thường lệ:

AddButton(
  onAdd: () {
    setState(() {
      score++;
    });
  },
)

Viết onPressed: onAdd, không viết onAdd(). Cách đầu tiên đưa hàm cho nút để gọi sau. Cách thứ hai gọi hàm ngay khi dựng giao diện và truyền giá trị mà hàm trả về.

Thử thách

Dễ

Nút Add point nằm trong widget AddButton và hiện chưa làm gì cả.

Thêm trường final VoidCallback onAdd vào AddButton, được thiết lập trong hàm khởi tạo.
Dùng trường này làm onPressed của nút.
Trong trang, truyền vào một hàm tăng score thêm 1 bên trong setState.

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: [
            Text('Score: $score', style: const TextStyle(fontSize: 32)),
            const SizedBox(height: 16),
            const AddButton(),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {},
      child: const Text('Add point'),
    );
  }
}