I colori di Theme.of(context)

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

I pulsanti adottano il tema automaticamente. Le tue caselle, invece, no: un Container con Colors.teal.shade100 mantiene quel colore indipendentemente dal tema.

Per colorare i tuoi widget usando il tema, leggilo con Theme.of(context):

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

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

Lo schema di colori è organizzato in coppie. primaryContainer è un riempimento tenue e onPrimaryContainer è il colore del testo sopra quel riempimento, scelto per essere facile da leggere. Lo stesso vale per primary e onPrimary, surface e onSurface.

Theme.of(context) trova il tema sopra il widget che lo richiede. Il tema è impostato da MaterialApp, quindi il context deve essere uno discendente, ad esempio quello di build di HomeScreen. Nel build di MyApp, che si trova sopra MaterialApp, trova soltanto il viola predefinito di Flutter.

Sfida

Facile

Colora il banner usando il tema, così seguirà qualsiasi colore iniziale tu scelga:

all'inizio di build di HomeScreen: final colors = Theme.of(context).colorScheme;
il colore del banner: colors.primaryContainer
il colore del testo: colors.onPrimaryContainer

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