Ein App-Theme aus einem Seed

Teil des Abschnitts Layouts für jede Bildschirmgröße der Flutter-Journey von Coddy. Lektion 21 von 30.

Jeder Button, Schalter und Schieberegler in deiner App bezieht seine Farben aus einer einzigen Quelle: dem Theme der App. Ändere das Theme, und die ganze App verändert sich mit, ohne dass du auch nur einen Button anfassen musst.

Du legst es in MaterialApp fest. Am schnellsten erstellst du eines aus einer einzigen Ausgangsfarbe:

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

ColorScheme.fromSeed erstellt aus der Ausgangsfarbe einen ganzen Satz aufeinander abgestimmter Farben: ein kräftiges primary für Buttons und Links, ein sanftes primaryContainer für gefüllte Bereiche, eine surface-Farbe für den Hintergrund und die Farben für den darauf angezeigten Text. Es sind Abstufungen der Ausgangsfarbe, daher ist das Orange auf einem Button nicht exakt Colors.orange, aber eindeutig orange und gut lesbar.

Das Lila, das du bisher gesehen hast, ist die Standard-Ausgangsfarbe von Flutter.

Aufgabe

Einfach

Verleihe dem Garden Journal ein grünes Design: Setze das theme: von MaterialApp auf ein ThemeData, dessen Farbschema aus dem Ausgangswert Colors.green stammt. Beide Schaltflächen werden grün, ohne dass sie geändert werden.

Probier es selbst

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