Тема приложения на основе seed

Часть раздела Адаптивная компоновка путешествия по Flutter на Coddy. Урок 21 из 30.

Все кнопки, переключатели и ползунки в вашем приложении получают свои цвета из одного места: темы приложения. Измените тему — и всё приложение изменится вместе с ней, без необходимости менять хотя бы одну кнопку.

Вы задаёте её в MaterialApp. Самый быстрый способ создать тему — начать с одного начального цвета:

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

ColorScheme.fromSeed создаёт целый набор сочетающихся цветов на основе начального: насыщенный primary для кнопок и ссылок, мягкий primaryContainer для залитых областей, surface для фона и цвета текста, который размещается на каждом из них. Это оттенки начального цвета, поэтому оранжевый на кнопке — не совсем Colors.orange, но он явно оранжевый и хорошо читается.

Фиолетовый, который вы видели до сих пор, — это начальный цвет Flutter по умолчанию.

Задание

Легко

Задай для Garden Journal зелёную тему: установи theme: у MaterialApp равным ThemeData, цветовая схема которого создаётся на основе исходного цвета Colors.green. Обе кнопки станут зелёными, и их не придётся менять.

Попробуйте сами

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