Callback gửi giá trị

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

Một callback có thể mang giá trị ngược lên. Bộ chọn kích cỡ bên dưới có ba nút, và trang cần biết bạn đã nhấn nút nào.

Thêm tham số cho callback. Kiểu void Function(String) là một hàm nhận một String và không trả về gì:

class SizePicker extends StatelessWidget {
  const SizePicker({super.key, required this.onPick});

  final void Function(String) onPick;

  @override
  Widget build(BuildContext context) {
    return OutlinedButton(
      onPressed: () => onPick('S'),
      child: Text('S'),
    );
  }
}

Mỗi nút bọc lời gọi trong một hàm nhỏ, () => onPick('S'), để hàm chạy khi bạn nhấn nút chứ không phải trong lúc dựng giao diện. Thành phần cha nhận giá trị dưới dạng tham số và lưu lại:

SizePicker(
  onPick: (picked) {
    setState(() {
      size = picked;
    });
  },
)

Flutter có tên ngắn gọn cho cùng kiểu này: ValueChanged<String>. Nhiều widget có sẵn sử dụng kiểu này, chẳng hạn như onChanged của TextField.

Thử thách

Trung bình

Hãy làm cho các nút chọn kích cỡ hoạt động:

Thêm cho SizePicker một trường final void Function(String) onPick, được thiết lập trong hàm khởi tạo.
Cho mỗi nút gọi onPick với chữ cái tương ứng.
Hiển thị kích cỡ đã chọn trên trang: Size: S, Size: M hoặc Size: L.

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> {
  String size = 'M';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('T-shirt')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Size: $size', style: const TextStyle(fontSize: 32)),
            const SizedBox(height: 16),
            const SizePicker(),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        OutlinedButton(onPressed: () {}, child: const Text('S')),
        const SizedBox(width: 8),
        OutlinedButton(onPressed: () {}, child: const Text('M')),
        const SizedBox(width: 8),
        OutlinedButton(onPressed: () {}, child: const Text('L')),
      ],
    );
  }
}