用种子颜色生成应用主题

本课属于 Coddy Flutter 学习旅程的“适配不同屏幕的布局”单元。第 21 课，共 30 课。

应用中的每个按钮、开关和滑块都从同一个地方获取颜色：应用的主题。更改主题，整个应用都会随之改变，无需修改任何按钮。

你可以在 MaterialApp 上设置主题。最快的方法是从一个种子颜色开始：

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

ColorScheme.fromSeed 会根据种子生成一组协调的颜色：按钮和链接使用醒目的 primary，填充区域使用柔和的 primaryContainer，背景使用 surface，每种颜色还配有适合搭配的文字颜色。这些颜色都是种子颜色的不同色调，所以按钮上的橙色并不完全等同于 Colors.orange，但看起来显然是橙色，而且清晰易读。

你目前看到的紫色是 Flutter 的默认种子颜色。

挑战

简单

为 Garden Journal 设置绿色主题：将 MaterialApp 的 theme: 设置为一个颜色方案由种子 Colors.green 生成的 ThemeData。两个按钮都会变成绿色，无需修改它们。

亲手试试

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'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}