La classe ThemeData dans Flutter

Recopier le code suivant

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.blue, // Couleur principale
        scaffoldBackgroundColor: Colors.white, // Couleur de fond de l'écran
        canvasColor: Colors.lightBlue[100], // Couleur pour les menus contextuels et Drawer (bleu ciel)
        cardColor: Colors.white, // Couleur des cartes
        dividerColor: Colors.black38, // Couleur des séparateurs ou lignes
        colorScheme: ColorScheme.fromSwatch().copyWith(
          secondary: Colors.orange, // Couleur d'accentuation
          surface: Colors.grey[200], // Couleur d'arrière-plan pour certains composants
        ),
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Exemple Thème Flutter'),
        backgroundColor: Theme.of(context).primaryColor, // Utilisation de primaryColor
      ),
      body: SingleChildScrollView(
        child: Container(
          color: Theme.of(context).colorScheme.surface, // Utilisation de surface comme arrière-plan
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'Couleur principale : primaryColor',
                style: TextStyle(color: Theme.of(context).primaryColor),
              ),
              SizedBox(height: 10),
              Text(
                'Couleur d\'accentuation : colorScheme.secondary',
                style: TextStyle(color: Theme.of(context).colorScheme.secondary),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {},
                style: ElevatedButton.styleFrom(
                  backgroundColor: Theme.of(context).colorScheme.secondary, // Bouton avec accentColor
                ),
                child: Text('Bouton d\'accentuation'),
              ),
              SizedBox(height: 20),
              Card(
                color: Theme.of(context).cardColor, // Utilisation de cardColor
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Text('Ceci est une carte'),
                ),
              ),
              SizedBox(height: 20),
              Divider(
                color: Theme.of(context).dividerColor, // Utilisation de dividerColor
              ),
              SizedBox(height: 20),
              DrawerExample(),
            ],
          ),
        ),
      ),
      drawer: Drawer(
        child: Container(
          color: Theme.of(context).canvasColor, // Couleur bleu ciel pour le Drawer
          child: ListView(
            children: const [
              DrawerHeader(
                child: Text('Menu contextuel', style: TextStyle(color: Colors.white)),
                decoration: BoxDecoration(color: Colors.blue), // Couleur d'en-tête du Drawer
              ),
              ListTile(
                title: Text('Option 1'),
              ),
              ListTile(
                title: Text('Option 2'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class DrawerExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        Scaffold.of(context).openDrawer();
      },
      child: Text('Ouvrir le Drawer'),
    );
  }
}




Questions proposées :
• 1. Couleur principale (PrimaryColor)
• Modifiez la couleur principale (primaryColor) de l’application en vert (Colors.green). Observez les changements sur les éléments utilisant cette couleur.
• 2. Couleur d’accentuation (AccentColor)
• Changez la couleur d’accentuation (colorScheme.secondary) en rouge (Colors.red). Notez où cette couleur est appliquée.
• 3. Couleur du Drawer
• Modifiez la couleur de fond du Drawer (canvasColor) pour qu’elle devienne jaune clair (Colors.yellow[100]).
• 4. Couleur des cartes (CardColor)
• Personnalisez la couleur des cartes (cardColor) en gris clair (Colors.grey[300]).
• 5. Couleur des séparateurs (DividerColor)
• Changez la couleur des séparateurs (dividerColor) en bleu marine (Colors.blue[900]).
• 6. Couleur de fond du Scaffold
• Modifiez la couleur de fond de l’écran (scaffoldBackgroundColor) en une couleur personnalisée, comme rose clair (Colors.pink[50]).
• 7. Personnalisation de l’AppBar
• Ajoutez un icône (e.g., Icons.home) sur la gauche du titre dans l’AppBar.
• Changez la couleur du texte du titre en blanc.
• 8. Personnalisation du bouton (ElevatedButton)
• Modifiez la couleur du texte du bouton en noir.
• Modifiez la couleur de fond du bouton pour qu’elle corresponde à la couleur principale de l’application.
• 9. Couleur de l’en-tête du Drawer
• Changez la couleur de l’en-tête du Drawer pour utiliser une couleur dégradée en modifiant la propriété decoration du DrawerHeader.

primaryColor et accentColor).

Container(
  color: Theme.of(context).primaryColor, // Accéder à primaryColor
  child: Text(
    'Texte avec couleur principale',
    style: TextStyle(color: Theme.of(context).primaryColor),
  ),
),

• primaryColor : Couleur principale.
• canvasColor : Couleur utilisée pour le fond du Drawer et des menus contextuels.
• cardColor : Couleur utilisée pour les cartes.
• dividerColor : Couleur des lignes de séparation.
• scaffoldBackgroundColor : Couleur d’arrière-plan de l’écran.

Container(
  color: Theme.of(context).colorScheme.secondary, // Couleur d'accentuation
  child: Text(
    'Texte avec couleur secondaire',
    style: TextStyle(color: Theme.of(context).colorScheme.secondary),
  ),
),

• primary : Couleur principale.
• secondary : Couleur d’accentuation.
• surface : Couleur de surface (par exemple, arrière-plan d’une carte).
• background : Couleur d’arrière-plan.
• onPrimary, onSecondary: Couleurs du texte ou des icônes affichés sur primary ou secondary.

• L’AppBar utilise primaryColor par défaut :

AppBar(
  title: Text('Exemple AppBar'),
  backgroundColor: Theme.of(context).primaryColor, // Couleur principale
),

• Pour les boutons, les couleurs sont basées sur colorScheme.secondary :

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    backgroundColor: Theme.of(context).colorScheme.secondary, // Couleur d'accentuation
  ),
  child: Text('Bouton'),
),

• Les cartes utilisent cardColor par défaut :

Card(
  color: Theme.of(context).cardColor, // Couleur de la carte
  child: Padding(
    padding: EdgeInsets.all(16.0),
    child: Text('Ceci est une carte'),
  ),
),

Text(
  'Texte personnalisé',
  style: TextStyle(color: Theme.of(context).primaryColor), // Couleur principale
),

class CustomColors extends ThemeExtension {
  final Color? customBackground;

  CustomColors({this.customBackground});

  @override
  CustomColors copyWith({Color? customBackground}) {
    return CustomColors(customBackground: customBackground ?? this.customBackground);
  }

  @override
  CustomColors lerp(ThemeExtension? other, double t) {
    if (other is! CustomColors) return this;
    return CustomColors(
      customBackground: Color.lerp(customBackground, other.customBackground, t),
    );
  }
}

theme: ThemeData(
  extensions: >[
    CustomColors(customBackground: Colors.lightGreen),
  ],
),

final customColors = Theme.of(context).extension();
Container(
  color: customColors?.customBackground, // Couleur personnalisée
),