Đánh dấu vào ô kiểm

Thuộc phần Tạo tính tương tác trong hành trình Flutter của Coddy. Bài học 28 trên 34.

Checkbox hoạt động giống như Switch: có một value: để vẽ và một onChanged để bạn phản hồi bằng setState.

Checkbox(
  value: _agreed,
  onChanged: (bool? value) {
    setState(() {
      _agreed = value ?? false;
    });
  },
)

Một điểm khác biệt: giá trị của nó có kiểu bool?, có thể là bool hoặc null. Checkbox có thể có trạng thái thứ ba, trạng thái trống, nhưng bạn sẽ không dùng trạng thái này ở đây. Vì _agreed là một bool thông thường, hãy chuyển giá trị null có thể có thành false bằng ??, như bạn đã làm với int.tryParse.

Checkbox thường là thành phần cho phép bạn nhấn một nút: đánh dấu vào ô “Tôi đồng ý” thì nút Tiếp tục sẽ không còn bị làm mờ.

Thử thách

Dễ

Cho phép đánh dấu và bỏ đánh dấu hộp kiểm: lưu giá trị của hộp vào _agreed.
Làm mờ Continue cho đến khi hộp được đánh dấu.

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 MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

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

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

class _HomePageState extends State<HomePage> {
  bool _agreed = false;

  void _continue() {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('Welcome!')),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Rules')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Checkbox(
                  value: _agreed,
                  onChanged: (bool? value) {},
                ),
                const Text('I agree to the rules'),
              ],
            ),
            const SizedBox(height: 16),
            ElevatedButton(onPressed: _continue, child: const Text('Continue')),
          ],
        ),
      ),
    );
  }
}