Colores de Theme.of(context)

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

Los botones adoptan el tema por sí solos. Tus propios contenedores no: un Container con Colors.teal.shade100 conserva ese color independientemente del tema.

Para colorear tus propios widgets según el tema, léelo con Theme.of(context):

final colors = Theme.of(context).colorScheme;

Container(
  color: colors.primaryContainer,
  child: Text('Hi', style: TextStyle(color: colors.onPrimaryContainer)),
)

El esquema de colores viene en pares. primaryContainer es un relleno suave, y onPrimaryContainer es el color del texto sobre ese relleno, elegido para que sea fácil de leer. Lo mismo ocurre con primary y onPrimary, surface y onSurface.

Theme.of(context) encuentra el tema que está por encima del widget que lo solicita. El tema lo establece MaterialApp, así que el context debe estar debajo de este, como en el build de HomeScreen. En el propio build de MyApp, que está por encima de MaterialApp, solo encuentra el púrpura predeterminado de Flutter.

Desafío

Fácil

Colorea el banner usando el tema, para que siga cualquier semilla que elijas:

al principio de build de HomeScreen: final colors = Theme.of(context).colorScheme;
el color del banner: colors.primaryContainer
el color de su texto: colors.onPrimaryContainer

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,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
      ),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Bookshelf')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            Container(
              width: double.infinity,
              padding: const EdgeInsets.all(24),
              decoration: BoxDecoration(
                color: Colors.teal.shade100,
                borderRadius: BorderRadius.circular(16),
              ),
              child: Text(
                'You read 12 books this year',
                style: TextStyle(fontSize: 20, color: Colors.teal.shade900),
              ),
            ),
          ],
        ),
      ),
    );
  }
}