Công tắc chế độ tối

Thuộc phần Bố cục phù hợp với mọi màn hình trong hành trình Flutter của Coddy. Bài học 25 trên 30.

Một số người muốn dùng chế độ tối trong một ứng dụng nhưng không muốn dùng ở các ứng dụng khác. Hãy thêm một nút chuyển đổi cho họ.

themeMode: là một cài đặt như mọi cài đặt khác, nên có thể lấy giá trị từ trạng thái. Giữ một giá trị bool trong State của MyApp, widget tạo MaterialApp, rồi chọn chế độ dựa trên giá trị đó:

bool _dark = false;

MaterialApp(
  themeMode: _dark ? ThemeMode.dark : ThemeMode.light,
  ...
)

Khi nút chuyển đổi thay đổi _dark bên trong setState, build chạy lại, MaterialApp nhận chế độ mới, và mọi màn hình chuyển chủ đề cùng lúc với hiệu ứng mờ dần ngắn.

Trạng thái phải nằm phía trên MaterialApp, vì chủ đề được chọn ở đó. Vì vậy, ở đây MyApp là một StatefulWidget.

Thử thách

Dễ

Để công tắc đổi chủ đề:

trong onChanged, lưu giá trị mới vào _dark bên trong setState
đặt themeMode: của MaterialApp dựa trên _dark: dùng giao diện tối khi giá trị là true, giao diện sáng khi giá trị là false

Tự làm thử

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _dark = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
      ),
      darkTheme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.indigo,
          brightness: Brightness.dark,
        ),
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Night Reader')),
        body: Center(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text('Dark mode', style: TextStyle(fontSize: 20)),
              const SizedBox(width: 12),
              Switch(
                value: _dark,
                onChanged: (value) {},
              ),
            ],
          ),
        ),
      ),
    );
  }
}