Cores de Theme.of(context)

Parte da seção Layouts que se adaptam do Journey de Flutter da Coddy. Lição 22 de 30.

Os botões adotam o tema por conta própria. As suas próprias caixas não: um Container com Colors.teal.shade100 permanece com essa cor, seja qual for o tema.

Para colorir os seus próprios widgets com as cores do tema, leia-o com Theme.of(context):

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

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

O esquema de cores vem em pares. primaryContainer é um preenchimento suave, e onPrimaryContainer é a cor do texto sobre esse preenchimento, escolhida para facilitar a leitura. O mesmo vale para primary e onPrimary, surface e onSurface.

Theme.of(context) encontra o tema acima do widget que o solicita. O tema é definido por MaterialApp, então o context precisa estar abaixo dele, como no build de HomeScreen. No próprio build de MyApp, que está acima de MaterialApp, ele encontra apenas o roxo padrão do Flutter.

Desafio

Fácil

Use as cores do tema no banner para que ele acompanhe qualquer semente que você escolher:

no início de build de HomeScreen: final colors = Theme.of(context).colorScheme;
a cor do banner: colors.primaryContainer
a cor do texto: colors.onPrimaryContainer

Experimente você mesmo

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