Un tema per l'app a partire da un seme

Fa parte della sezione Layout adattabili del percorso Flutter di Coddy. Lezione 21 di 30.

Ogni pulsante, interruttore e cursore della tua app prende i suoi colori da un unico punto: il tema dell'app. Cambia il tema e tutta l'app cambia con esso, senza toccare un solo pulsante.

Lo imposti su MaterialApp. Il modo più rapido per crearne uno parte da un unico colore iniziale:

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

ColorScheme.fromSeed crea un intero insieme di colori coordinati a partire dal colore iniziale: un primary intenso per pulsanti e collegamenti, un primaryContainer tenue per le aree riempite, un surface per lo sfondo e i colori del testo sovrapposto a ciascuno di essi. Sono tonalità del colore iniziale, quindi l'arancione di un pulsante non è esattamente Colors.orange, ma è chiaramente arancione e facile da leggere.

Il viola che hai visto finora è il colore iniziale predefinito di Flutter.

Sfida

Facile

Dai a Garden Journal un tema verde: imposta theme: di MaterialApp su un ThemeData la cui combinazione di colori deriva dal seme Colors.green. Entrambi i pulsanti diventano verdi senza essere modificati.

Provalo tu

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