Implémentation du Mode Clair et Sombre dans une Application Flutter

Objectifs

• L’objectif de ce tutoriel est de guider les développeurs Flutter dans l’implémentation d’un système de basculement entre les thèmes clair et sombre. À la fin de ce tutoriel, vous serez capable de :
  • Définir des thèmes personnalisés pour les modes clair et sombre.
  • Appliquer les thèmes dans une application Flutter en respectant les préférences système.
  • Implémenter un basculement dynamique entre les thèmes clair et sombre grâce à un bouton interactif.
  • Intégrer une gestion d'état avec Provider pour maintenir la cohérence du thème dans toute l'application.
  • Respecter les bonnes pratiques pour une interface utilisateur accessible et cohérente.
  • Ce tutoriel convient aux développeurs Flutter de niveau débutant à intermédiaire souhaitant améliorer leurs compétences en personnalisation d’interface utilisateur.

Étapes pour Définir des Thèmes Clairs et Sombres

1. Créer une Classe pour le Thème:

   • Créez un fichier theme.dart pour définir les thèmes.

     import 'package:flutter/material.dart';
     
     final ThemeData lightTheme = ThemeData(
       brightness: Brightness.light,
       primaryColor: Colors.blue,
       colorScheme: ColorScheme.light(
         primary: Colors.blue,
         secondary: Colors.blueAccent,
       ),
       appBarTheme: AppBarTheme(
         backgroundColor: Colors.blue,
         foregroundColor: Colors.white, // Couleur du texte et des icônes
       ),
     );
     
     final ThemeData darkTheme = ThemeData(
       brightness: Brightness.dark,
       primaryColor: Colors.grey[900],
       colorScheme: ColorScheme.dark(
         primary: Colors.grey[900]!,
         secondary: Colors.blueAccent,
       ),
       appBarTheme: AppBarTheme(
         backgroundColor: Colors.grey[900],
         foregroundColor: Colors.white,
       ),
     );

2. Appliquer les thèmes dans main.dart

   • Créez une application de base dans le fichier main.dart :

     import 'package:flutter/material.dart';
     import 'theme.dart';
     
     void main() {
       runApp(MyApp());
     }
     
     class MyApp extends StatelessWidget {
       @override
       Widget build(BuildContext context) {
         return MaterialApp(
           title: 'Démo du thème Flutter',
           theme: lightTheme, // Thème clair
           darkTheme: darkTheme, // Thème sombre
           themeMode: ThemeMode.system, // Utilise le mode système par défaut
           home: MyHomePage(),
         );
       }
     }
     
     class MyHomePage extends StatelessWidget {
       @override
       Widget build(BuildContext context) {
         return Scaffold(
           appBar: AppBar(
             title: Text('Démo du thème Flutter'),
           ),
           body: Center(
             child: Text('Bonjour, Flutter!'),
           ),
         );
       }
     }

3. Basculer dynamiquement entre les thèmes

   • Pour gérer le changement dynamique des thèmes, ajoutez Provider. Ajoutez provider dans votre pubspec.yaml:

     dependencies:
       flutter:
         sdk: flutter
       provider: ^5.0.0

   • Créez un fichier theme_notifier.dart pour gérer le thème :

     import 'package:flutter/material.dart';
     
     class ThemeNotifier with ChangeNotifier {
       ThemeMode _themeMode = ThemeMode.system; // Par défaut : mode système
     
       ThemeMode get themeMode => _themeMode;
     
       void setTheme(ThemeMode mode) {
         _themeMode = mode;
         notifyListeners(); // Notifie les widgets abonnés
       }
     }

   • Mettez à jour le main.dart pour utiliser Provider :

     import 'package:flutter/material.dart';
     import 'package:provider/provider.dart';
     import 'theme.dart';
     import 'theme_notifier.dart';
     
     void main() {
       runApp(
         ChangeNotifierProvider(
           create: (_) => ThemeNotifier(),
           child: MyApp(),
         ),
       );
     }
     
     class MyApp extends StatelessWidget {
       @override
       Widget build(BuildContext context) {
         return Consumer(
           builder: (context, themeNotifier, child) {
             return MaterialApp(
               title: 'Démo du thème Flutter',
               theme: lightTheme,
               darkTheme: darkTheme,
               themeMode: themeNotifier.themeMode, // Mode basé sur le ThemeNotifier
               home: MyHomePage(),
             );
           },
         );
       }
     }

4. Ajouter un bouton pour basculer entre les thèmes

   • Dans MyHomePage, ajoutez un bouton dans l'AppBar pour basculer entre les thèmes :

     import 'package:flutter/material.dart';
     import 'package:provider/provider.dart';
     import 'theme_notifier.dart';
     
     class MyHomePage extends StatelessWidget {
       @override
       Widget build(BuildContext context) {
         return Scaffold(
           appBar: AppBar(
             title: Text('Démo du thème Flutter'),
             actions: [
               IconButton(
                 icon: Icon(Icons.brightness_6),
                 onPressed: () {
                   ThemeNotifier themeNotifier =
                       Provider.of(context, listen: false);
     
                   // Basculer entre clair et sombre
                   if (themeNotifier.themeMode == ThemeMode.light) {
                     themeNotifier.setTheme(ThemeMode.dark);
                   } else {
                     themeNotifier.setTheme(ThemeMode.light);
                   }
                 },
               ),
             ],
           ),
           body: Center(
             child: Text('Bonjour, Flutter!'),
           ),
         );
       }
     }

5. Testez vos thèmes

   • Exécutez votre application sur un émulateur ou un appareil réel.
   • Basculer le mode système entre clair et sombre pour tester.
   • Cliquez sur l’icône dans l’AppBar pour changer le thème manuellement.

6. Mettre à jour MyHomePage avec un bouton de navigation

   • Ajoutez un bouton central dans MyHomePage pour naviguer vers une seconde page (SecondPage).

     import 'package:flutter/material.dart';
     import 'package:provider/provider.dart';
     import 'theme_notifier.dart';
     import 'SecondPage.dart'; // Importez la page secondaire
     
     class MyHomePage extends StatelessWidget {
       @override
       Widget build(BuildContext context) {
         return Scaffold(
           appBar: AppBar(
             title: const Text('Démo du thème Flutter'),
             actions: [
               IconButton(
                 icon: const Icon(Icons.brightness_6),
                 onPressed: () {
                   ThemeNotifier themeNotifier =
                       Provider.of(context, listen: false);
     
                   // Basculer entre clair et sombre
                   if (themeNotifier.themeMode == ThemeMode.light) {
                     themeNotifier.setTheme(ThemeMode.dark);
                   } else {
                     themeNotifier.setTheme(ThemeMode.light);
                   }
                 },
               ),
             ],
           ),
           body: Center(
             child: ElevatedButton(
               onPressed: () {
                 // Navigation vers la deuxième page
                 Navigator.push(
                   context,
                   MaterialPageRoute(builder: (context) => SecondPage()),
                 );
               },
               child: const Text('Aller à la page suivante'),
             ),
           ),
         );
       }
     }
     

7. Créer la SecondPage

   • La SecondPage a une AppBar avec un bouton pour basculer entre les thèmes.

     import 'package:flutter/material.dart';
     import 'package:provider/provider.dart';
     import 'theme_notifier.dart';
     
     class SecondPage extends StatelessWidget {
       @override
       Widget build(BuildContext context) {
         return Scaffold(
           appBar: AppBar(
             title: const Text('Deuxième Page'),
             actions: [
               IconButton(
                 icon: const Icon(Icons.brightness_6),
                 onPressed: () {
                   ThemeNotifier themeNotifier =
                       Provider.of(context, listen: false);
     
                   // Basculer entre clair et sombre
                   if (themeNotifier.themeMode == ThemeMode.light) {
                     themeNotifier.setTheme(ThemeMode.dark);
                   } else {
                     themeNotifier.setTheme(ThemeMode.light);
                   }
                 },
               ),
             ],
           ),
           body:const Center(
             child: Column(
               mainAxisAlignment: MainAxisAlignment.center,
               children:  [
                 Text(
                   'Bienvenue sur la deuxième page !',
                   style: TextStyle(fontSize: 20),
                 ),
                 SizedBox(height: 20),
                 Icon(Icons.widgets, size: 50, color: Colors.blue),
               ],
             ),
           ),
         );
       }
     }

8. Modifier le thème

   import 'package:flutter/material.dart';
   
   final ThemeData lightTheme = ThemeData(
     brightness: Brightness.light,
     primaryColor: Colors.blue,
     colorScheme: const ColorScheme.light(
       primary: Colors.blue,
       secondary: Colors.blueAccent,
     ),
     appBarTheme: const AppBarTheme(
       backgroundColor: Colors.blue,
       foregroundColor: Colors.white, // Couleur du texte et des icônes
     ),
     elevatedButtonTheme: ElevatedButtonThemeData(
       style: ElevatedButton.styleFrom(
         backgroundColor: Colors.blue, // Couleur de fond du bouton
         foregroundColor: Colors.white, // Couleur du texte
       ),
     ),
   );
   
   final ThemeData darkTheme = ThemeData(
     brightness: Brightness.dark,
     primaryColor: Colors.grey[900],
     colorScheme: ColorScheme.dark(
       primary: Colors.grey[900]!,
       secondary: Colors.blueAccent,
     ),
     appBarTheme: AppBarTheme(
       backgroundColor: Colors.grey[900],
       foregroundColor: Colors.white,
     ),
     elevatedButtonTheme: ElevatedButtonThemeData(
       style: ElevatedButton.styleFrom(
         backgroundColor: Colors.blueAccent, // Couleur de fond du bouton
         foregroundColor: Colors.white, // Couleur du texte
       ),
     ),
   );