Giao diện 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 24 trên 30.

Nhiều người để điện thoại ở chế độ tối, nhất là vào ban đêm. Một ứng dụng có thể có hai giao diện: theme: cho chế độ sáng và darkTheme: cho chế độ tối.

Bảng màu tối được tạo từ cùng một màu gốc, với thêm một thiết lập:

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.red),
  ),
  darkTheme: ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.red,
      brightness: Brightness.dark,
    ),
  ),
  themeMode: ThemeMode.dark,
  home: ...,
)

brightness: Brightness.dark đảo ngược bảng màu: surface có màu tối, văn bản onSurface có màu sáng, còn các sắc độ từ màu gốc dịu hơn để không gây chói.

themeMode: chọn giao diện được sử dụng. ThemeMode.system, giá trị mặc định, làm theo cài đặt của điện thoại; ThemeMode.light và ThemeMode.dark chọn một giao diện bất kể cài đặt của điện thoại. Mọi widget đọc giao diện đều thay đổi theo lựa chọn đó.

Thử thách

Dễ

Tạo giao diện tối cho Night Reader:

thêm darkTheme: từ màu hạt giống Colors.indigo với brightness: Brightness.dark
themeMode: ThemeMode.dark, để giao diện luôn ở chế độ tố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,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Night Reader')),
        body: const Center(
          child: Text('Good evening', style: TextStyle(fontSize: 28)),
        ),
      ),
    );
  }
}