Le widget Theme dans Flutter

lib/
├── main.dart
├── theme.dart
└── home_page.dart

Résultat attendu :

• L’AppBar aura un fond Teal et le titre en Blanc (22pt, Gras).
• Le texte principal aura une taille de 18pt et sera Noir.
• Les boutons (ElevatedButton et TextButton) seront remplis en Teal, avec du texte en Blanc, des coins légèrement arrondis et un espacement uniforme, grâce aux TextButtonThemeData et ElevatedButtonThemeData.
• Le FloatingActionButton sera BlueAccent (hérité de colorScheme.secondary).

Remarque : Le widget « Theme » ne peut être utilisé qu’une seule fois dans une arborescence de widgets. Si vous souhaitez appliquer le même thème à plusieurs widgets, vous devez envelopper chaque arborescence de widgets avec le widget Theme et transmettre la même instance ThemeData à chacun.

• Votre tâche est de modifier le fichier lib/theme.dart pour transformer radicalement l’apparence de l’application sans toucher aux fichiers main.dart ni home_page.dart.
• L’objectif est de passer d’un thème clair et professionnel (Teal) à un thème sombre et énergique (Rouge/Orange).
• Modifications Détaillées à Effectuer
• Vous devez réaliser les 5 changements suivants :
• 1. Changement de Palette (Thème Sombre)
• Action : Basculer le thème de ColorScheme.light (clair) à ColorScheme.dark (sombre).
• Impact : Le fond de la page (Scaffold) deviendra Noir ou Gris très foncé par défaut.
• Code concerné : La propriété colorScheme.
• 2. Couleurs Principales
• Action : Changer la primaryColor pour Colors.red.
• Impact : L’AppBar et le fond des boutons deviendront Rouges.
• 3. Couleur Secondaire
Action : Changer la couleur secondaire (secondary) de Colors.blueAccent à Colors.orangeAccent.

Impact : Le FloatingActionButton (FAB) deviendra Orange Vif.

• 4. Style de Texte Principal
• Dans un thème sombre, le texte de corps doit être clair pour une bonne lisibilité.
• Action : Modifier le textTheme.bodyLarge pour que la couleur du texte soit Colors.white70 (Blanc légèrement transparent) et augmenter la taille de la police à 20.
• Impact : Le texte principal sur la HomePage sera plus grand et clair sur le fond sombre.
• 5. Modification du Style du TextButton
• Le style actuel du TextButton est un bouton rempli (Teal sur Teal), ce qui n’est pas le comportement typique d’un TextButton. Modifiez-le pour qu’il ressemble à un lien thémé.
• Action : Supprimer la couleur de fond (backgroundColor) dans le textButtonTheme.style.
• Action : Changer la couleur du texte (foregroundColor) pour utiliser la couleur secondaire du thème (Colors.orangeAccent).
• Impact : Le TextButton deviendra un lien de couleur Orange Vif sans remplissage.
• Attendu (Résultat Final)
• Après la modification du seul fichier lib/theme.dart, l’application doit présenter les caractéristiques suivantes :

Élément	Propriété du Thème Utilisée	Nouvelle Valeur Attendue
Fond d’écran	ColorScheme.dark	Noir / Gris foncé
Fond d’AppBar & Boutons	primaryColor	Rouge
FAB	colorScheme.secondary	Orange Vif
Texte principal	textTheme.bodyLarge	Blanc cassé (white70), 20pt
TextButton	textButtonTheme	Texte Orange Vif, Pas de fond

• Créez un fichier nommé mes_themes.dart.
• Dans ce fichier, définissez un objet ThemeData contenant :une primaryColor, un ColorScheme.light, un TextTheme avec bodyLarge et titleLarge
• un thème global pour :TextButton, ElevatedButton
• Importez ce fichier dans main.dart.

• Créez un widget MyApp.
• Appliquez le thème créé à l’application via la propriété theme de MaterialApp.
• Désactivez le bandeau debug.
• Expliquez le rôle de la propriété theme.

• Utilisez un Scaffold comme widget principal.
• Ajoutez : un AppBar, un SafeArea, un SingleChildScrollView
• Justifiez l’utilisation de SingleChildScrollView.

• Ajoutez un AppBar avec le titre : »Exemple de widget de thème », Centre le titre horizontalement.
• Expliquez comment le thème influence l’apparence de l’AppBar.

• Ajoutez un widget Text affichant : « Ce texte utilisera le style bodyLarge du thème. »
• Appliquez le style via : Theme.of(context).textTheme.bodyLarge
• Expliquez l’intérêt d’utiliser TextTheme au lieu d’un style local.

• Créez un Container avec : un padding, des coins arrondis, une ombre (BoxShadow)
• Appliquez la couleur primaire du thème comme couleur de fond.
• Utilisez titleLarge pour le texte.

• Ajoutez un TextButton avec le texte « Cliquez-moi ».
• N’ajoutez aucun style directement dans le widget.
• Expliquez comment le style du bouton est appliqué automatiquement via le thème.

• Ajoutez un ElevatedButton avec le texte « Bouton Elevé ».
• Vérifiez que le style (couleurs, forme, padding) provient du thème global.
• Comparez TextButton et ElevatedButton.

• Créez une Card avec :des coins arrondis,une élévation
• Insérez une image à l’aide de Image.network.
• Superposez un texte sur l’image en utilisant Stack et Positioned.
• Appliquez un style provenant du thème.

• Ajoutez deux ListTile contenant :une icône, un titre,un sous-titre
• Appliquez les styles de texte depuis le thème.
• Ajoutez une couleur de fond cohérente avec le thème.

• Pourquoi utiliser Theme.of(context) ?
• Quels sont les avantages d’un thème global ?
• Que se passe-t-il si on change la couleur primaire dans le thème ?

import 'package:flutter/material.dart';
import 'mes_themes.dart'; // Assurez-vous d'importer votre thème

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: themeData, // Applique le thème défini dans theme.dart
      home: Scaffold(
        backgroundColor: Colors.teal[50], // Fond doux pour l'écran
        appBar: AppBar(
          title: Text('Exemple de widget de thème'),
          centerTitle: true, // Centrer le titre
        ),
        body: SafeArea(
          child: SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment:
                    CrossAxisAlignment.center, // Centrer horizontalement
                children: [
                  // Premier texte avec style du thème
                  Text(
                    "Ce texte utilisera le style bodyLarge du thème.",
                    style: Theme.of(context).textTheme.bodyLarge,
                    textAlign: TextAlign.center,
                  ),
                  SizedBox(height: 30), // Espacement

                  // Container avec la couleur primaire
                  Container(
                    padding: EdgeInsets.all(16),
                    decoration: BoxDecoration(
                      color: Theme.of(context).primaryColor,
                      borderRadius: BorderRadius.circular(12),
                      boxShadow: [
                        // Ombre pour effet 3D
                        BoxShadow(
                          color: Colors.black26,
                          blurRadius: 6,
                          offset: Offset(0, 4),
                        ),
                      ],
                    ),
                    child: Text(
                      "Ce conteneur utilise la couleur primaire.",
                      style: Theme.of(context).textTheme.titleLarge,
                      textAlign: TextAlign.center,
                    ),
                  ),
                  SizedBox(height: 30),

                  // TextButton avec le style du thème
                  // le style du TextButton est automatiquement appliqué grâce à la configuration dans votre fichier mes_themes.dart, où vous avez défini un style global pour tous les TextButton via le widget TextButtonThemeData.
                  TextButton(
                    onPressed: () {},
                      // Afficher le SnackBar
                    child: const Text("Cliquez-moi"),
                  ),

                 const SizedBox(height: 30),

                  // ElevatedButton avec le style du thème
                  ElevatedButton(
                    onPressed: () {},
                    child: const Text("Bouton Elevé"),
                  ),
                  SizedBox(height: 30),

                  // Card avec image et texte
                  Card(
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(12),
                    ),
                    elevation: 5,
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(12),
                      child: Stack(
                        children: [
                          Image.network(
                            'https://via.placeholder.com/150',
                            width: 150,
                            height: 150,
                            fit: BoxFit.cover,
                          ),
                          Positioned(
                            bottom: 16,
                            left: 16,
                            child: Text(
                              "Image de la Card",
                              style: Theme.of(context).textTheme.titleLarge,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  SizedBox(height: 30),

                  // ListTile avec thème
                  ListTile(
                    leading: Icon(Icons.home, color: Colors.teal),
                    title: Text("Item 1",
                        style: Theme.of(context).textTheme.bodyLarge),
                    subtitle: Text("Description de l'item 1",
                        style: Theme.of(context).textTheme.bodyLarge),
                    tileColor: Colors.teal[100],
                  ),
                  SizedBox(height: 10),
                  ListTile(
                    leading: Icon(Icons.business, color: Colors.teal),
                    title: Text("Item 2",
                        style: Theme.of(context).textTheme.bodyLarge),
                    subtitle: Text("Description de l'item 2",
                        style: Theme.of(context).textTheme.bodyLarge),
                    tileColor: Colors.teal[100],
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

• Créer une application Flutter qui permet à l’utilisateur de choisir entre différents thèmes (par exemple, un thème « Fête », un thème « Nature », et un thème « Minimaliste ») à l’aide d’une interface utilisateur simple.

• Créer une Application Flutter de Base
• Définir Plusieurs Thèmes
• Implémenter un Menu pour Changer de Thème
• Appliquer le Thème Choisi à l’Application

• Commencez par créer une nouvelle application Flutter :

• Modifiez votre fichier lib/main.dart pour y inclure plusieurs thèmes :

• Créez un écran d’accueil qui permet à l’utilisateur de sélectionner un thème :

• Dans cet exemple, chaque bouton appelle _changeTheme avec un thème spécifique lorsque l’utilisateur le sélectionne.

• Lorsque vous exécutez cette application, vous devriez voir un écran avec un titre et trois boutons. En cliquant sur chaque bouton, le thème de l’application doit changer immédiatement pour refléter le thème sélectionné.

• Ajouter des Images de Fond : Personnalisez chaque thème avec une image de fond différente.
• Animations de Transition : Ajoutez des animations lors du changement de thème pour une expérience utilisateur plus fluide.
• Stockage des Préférences de Thème : Utilisez SharedPreferences pour mémoriser le choix de thème de l’utilisateur entre les sessions.