Tạo giao diện chủ đề từ một seed

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 21 trên 30.

Mọi nút, công tắc và thanh trượt trong ứng dụng của bạn đều lấy màu từ cùng một nơi: chủ đề của ứng dụng. Thay đổi chủ đề là toàn bộ ứng dụng đổi màu theo, mà không cần chạm vào bất kỳ nút nào.

Bạn thiết lập chủ đề trong MaterialApp. Cách nhanh nhất để tạo chủ đề là bắt đầu từ một màu gốc:

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.orange),
  ),
  home: ...,
)

ColorScheme.fromSeed tạo ra cả một bộ màu hài hòa từ màu gốc: màu primary đậm cho nút và liên kết, màu primaryContainer dịu cho vùng được tô màu, màu surface cho nền và các màu chữ tương ứng. Đây đều là các sắc độ của màu gốc, nên màu cam trên nút không hoàn toàn giống Colors.orange, nhưng vẫn rõ sắc cam và dễ đọc.

Thử thách

Dễ

Tạo giao diện màu xanh lá cho Garden Journal: đặt theme: của MaterialApp thành một ThemeData có bảng màu lấy từ màu hạt giống Colors.green. Cả hai nút sẽ chuyển sang màu xanh lá mà không cầ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: Scaffold(
        appBar: AppBar(title: const Text('Garden Journal')),
        body: Center(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              TextButton(
                onPressed: () {},
                child: const Text('Cancel'),
              ),
              const SizedBox(width: 16),
              ElevatedButton(
                onPressed: () {},
                child: const Text('Save'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}