Un tema para la app a partir de una semilla

Parte de la sección Diseños que se adaptan del Journey de Flutter de Coddy. Lección 21 de 30.

Cada botón, interruptor y control deslizante de tu aplicación obtiene sus colores de un solo lugar: el tema de la aplicación. Cambia el tema y toda la aplicación cambiará con él, sin tocar un solo botón.

Lo configuras en MaterialApp. La forma más rápida de crear uno es empezar con un único color semilla:

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

ColorScheme.fromSeed crea un conjunto completo de colores que combinan a partir de la semilla: un primary intenso para los botones y los enlaces, un primaryContainer suave para las áreas rellenas, un surface para el fondo y los colores del texto que aparece sobre cada uno. Son tonos de la semilla, así que el naranja de un botón no es exactamente Colors.orange, pero es claramente naranja y fácil de leer.

El morado que has visto hasta ahora es el color semilla predeterminado de Flutter.

Desafío

Fácil

Dale al Garden Journal un tema verde: establece theme: de MaterialApp en un ThemeData cuyo esquema de colores provenga de la semilla Colors.green. Ambos botones se volverán verdes sin modificarlos.

Pruébalo tú mismo

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