Usar temas para compartir colores y estilos de fuente

Para compartir colores y estilos de fuente en toda una app, usa temas.

Puedes definir temas para toda la app. Puedes extender un tema para cambiar el estilo de un tema para un componente. Cada tema define los colores, el estilo tipográfico y otros parámetros aplicables para el tipo de componente Material.

Flutter aplica los estilos en el siguiente orden:

1. Estilos aplicados a un widget específico.
2. Temas que sobrescriben el tema del padre inmediato.
3. Tema principal para toda la app.

Después de definir un Theme, úsalo dentro de tus propios widgets. Los widgets Material de Flutter usan tu tema para establecer los colores de fondo y los estilos de fuente para las app bars, botones, casillas de verificación y más.

Para compartir un Theme en toda tu app, establece la propiedad theme en el constructor de tu MaterialApp. Esta propiedad toma una instancia de ThemeData.

Si no especificas un tema en el constructor, Flutter crea un tema por defecto para ti.

MaterialApp(
  title: appName,
  theme: ThemeData(
    // Define the default brightness and colors.
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.purple,
      // ···
      brightness: Brightness.dark,
    ),
​
    // Define the default `TextTheme`. Use this to specify the default
    // text styling for headlines, titles, bodies of text, and more.
    textTheme: TextTheme(
      displayLarge: const TextStyle(
        fontSize: 72,
        fontWeight: FontWeight.bold,
      ),
      // ···
      titleLarge: GoogleFonts.oswald(
        fontSize: 30,
        fontStyle: FontStyle.italic,
      ),
      bodyMedium: GoogleFonts.merriweather(),
      displaySmall: GoogleFonts.pacifico(),
    ),
  ),
  home: const MyHomePage(title: appName),
);

La mayoría de las instancias de ThemeData establecen valores para las siguientes dos propiedades. Estas propiedades afectan a toda la app.

1. colorScheme define los colores.
2. textTheme define el estilo del texto.

Para aprender qué colores, fuentes y otras propiedades puedes definir, consulta la documentación de ThemeData.

Para aplicar tu nuevo tema, usa el método Theme.of(context) al especificar las propiedades de estilo de un widget. Estas pueden incluir, pero no se limitan a, style y color.

El método Theme.of(context) busca hacia arriba en el árbol de widgets y recupera el Theme más cercano en el árbol. Si tienes un Theme independiente, ese es el que se aplica. Si no, Flutter aplica el tema de la app.

En el siguiente ejemplo, el constructor de Container utiliza esta técnica para establecer su color.

Container(
  padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
  color: Theme.of(context).colorScheme.primary,
  child: Text(
    'Text with a background color',
    // ···
    style: Theme.of(context).textTheme.bodyMedium!.copyWith(
      color: Theme.of(context).colorScheme.onPrimary,
    ),
  ),
),

Para sobrescribir el tema general en una parte de la app, envuelve esa sección de la app en un widget Theme.

Puedes sobrescribir un tema de dos maneras:

1. Crea una instancia de ThemeData única.
2. Extender el tema padre.

Si deseas que un componente de tu app ignore el tema general, crea una instancia de ThemeData. Pasa esa instancia al widget Theme.

Theme(
  // Create a unique theme with `ThemeData`.
  data: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.pink)),
  child: FloatingActionButton(onPressed: () {}, child: const Icon(Icons.add)),
);

En lugar de sobrescribirlo todo, considera extender el tema padre. Para extender un tema, usa el método copyWith().

Theme(
  // Find and extend the parent theme using `copyWith`.
  // To learn more, check out the section on `Theme.of`.
  data: Theme.of(
    context,
  ).copyWith(colorScheme: ColorScheme.fromSeed(seedColor: Colors.pink)),
  child: const FloatingActionButton(onPressed: null, child: Icon(Icons.add)),
);

Para aprender más, mira este breve video de Widget of the Week sobre el widget Theme:

Ver en YouTube en una nueva pestaña: "Theme | Flutter widget de la semana"