Un thème d’application généré à partir d’une couleur de base

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

Chaque bouton, interrupteur et curseur de votre application puise ses couleurs à une seule source : le thème de l’application. Modifiez le thème et toute l’application changera avec lui, sans toucher à un seul bouton.

Vous le définissez sur MaterialApp. Le moyen le plus rapide d’en créer un consiste à partir d’une seule couleur de base :

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.orange),
  ),
  home: ...,
)

ColorScheme.fromSeed crée tout un ensemble de couleurs harmonieuses à partir de la couleur de base : une couleur primary vive pour les boutons et les liens, une couleur primaryContainer douce pour les zones remplies, une couleur surface pour l’arrière-plan, ainsi que les couleurs du texte qui s’affiche sur chacune d’elles. Ce sont des nuances de la couleur de base : l’orange d’un bouton n’est donc pas exactement Colors.orange, mais il est bien orange et facile à lire.

Le violet que vous avez vu jusqu’ici est la couleur de base par défaut de Flutter.

Défi

Facile

Donne au journal de jardin un thème vert : définis theme: de MaterialApp sur un ThemeData dont le jeu de couleurs provient de la graine Colors.green. Les deux boutons deviennent verts sans être modifiés.

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,
      home: Scaffold(
        appBar: AppBar(title: const Text('Garden Journal')),
        body: Center(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              TextButton(
                onPressed: () {},
                child: const Text('Cancel'),
              ),
              const SizedBox(width: 16),
              ElevatedButton(
                onPressed: () {},
                child: const Text('Save'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}