Bật và tắt bằng công tắc

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 27 trên 34.

Switch là công tắc bật tắt quen thuộc trong phần cài đặt điện thoại. Nó hiển thị một giá trị bool và cho bạn biết khi có người gạt công tắc:

Switch(
  value: _wifi,
  onChanged: (bool value) {
    setState(() {
      _wifi = value;
    });
  },
)

value: xác định vị trí hiển thị: bật khi giá trị là true, tắt khi giá trị là false. onChanged nhận giá trị mới khi bạn chạm vào công tắc.

Công tắc không tự di chuyển. Khi chạm vào, nó chỉ gọi onChanged; bạn lưu giá trị mới bằng setState, màn hình được dựng lại và công tắc hiển thị ở vị trí mới. Nếu quên bước đó, công tắc sẽ bật trở lại mỗi lần bạn chạm vào.

Thử thách

Dễ

Để công tắc hoạt động: lưu giá trị mới vào _dark bằng setState.
Đặt backgroundColor của Scaffold thành Colors.black khi chế độ tối bật và Colors.white khi chế độ này tắt. Màu của nhãn đã thay đổi.

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 _dark = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(title: const Text('Settings')),
      body: Center(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              'Dark mode',
              style: TextStyle(fontSize: 20, color: _dark ? Colors.white : Colors.black),
            ),
            const SizedBox(width: 12),
            Switch(
              value: _dark,
              onChanged: (bool value) {},
            ),
          ],
        ),
      ),
    );
  }
}