Motyw aplikacji z ziarna

Część sekcji Układ dopasowany do ekranu ścieżki Flutter w Coddy. Lekcja 21 z 30.

Każdy przycisk, przełącznik i suwak w Twojej aplikacji pobiera kolory z jednego miejsca: motywu aplikacji. Zmień motyw, a zmieni się cała aplikacja — bez dotykania choćby jednego przycisku.

Ustawiasz go w MaterialApp. Najszybciej utworzysz motyw, zaczynając od jednego koloru bazowego:

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

ColorScheme.fromSeed tworzy cały zestaw pasujących kolorów na podstawie koloru bazowego: wyrazisty primary dla przycisków i linków, delikatny primaryContainer dla wypełnionych obszarów, surface dla tła oraz kolory tekstu umieszczonego na każdym z nich. Są to odcienie koloru bazowego, więc pomarańczowy na przycisku nie jest dokładnie taki jak Colors.orange, ale wyraźnie przypomina pomarańczowy i jest czytelny.

Fiolet, który widziałeś do tej pory, to domyślny kolor bazowy Fluttera.

Wyzwanie

Łatwy

Nadaj Garden Journal zielony motyw: ustaw theme: w MaterialApp na ThemeData, którego schemat kolorów pochodzi z ziarna Colors.green. Oba przyciski zmienią kolor na zielony bez konieczności ich modyfikowania.

Spróbuj swoich sił

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