Les couleurs de Theme.of(context)

Fait partie de la section Des mises en page adaptées du Journey Flutter de Coddy. Leçon 22 sur 30.

Les boutons adoptent eux-mêmes le thème. Ce n’est pas le cas de vos propres boîtes : un Container avec Colors.teal.shade100 conserve cette couleur quel que soit le thème.

Pour colorer vos propres widgets à partir du thème, récupérez-le avec Theme.of(context) :

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

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

Les couleurs sont organisées par paires. primaryContainer est un remplissage doux, et onPrimaryContainer est la couleur du texte sur ce remplissage, choisie pour être facile à lire. Il en va de même pour primary et onPrimary, surface et onSurface.

Theme.of(context) trouve le thème défini au-dessus du widget qui le demande. Le thème est défini par MaterialApp, le context doit donc se trouver en dessous, par exemple dans le build de HomeScreen. Dans le build de MyApp lui-même, qui se trouve au-dessus de MaterialApp, il ne trouve que le violet par défaut de Flutter.

Défi

Facile

Colore la bannière à partir du thème, afin qu’elle suive toute valeur de départ que tu choisis :

au début de HomeScreen's build : final colors = Theme.of(context).colorScheme;
la couleur de la bannière : colors.primaryContainer
la couleur de son texte : colors.onPrimaryContainer

Essayez vous-même

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