Back

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

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

  1. 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.

  2. É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

          9. 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
    ),
  ),
);




author avatar
Riadh HAJJI

Riadh HAJJI

You may also like

Le widget Theme et la classe ThemeData en Flutter
13 décembre, 2024

Le widget Theme dans Flutter Le widget Theme dans Flutter Objectifs Connaitre la notion thme dans Flutter Être capable d’utilisez un thème général pour votre application. Présentation La thématisation est le processus d’utilisation d’un ensemble de couleurs, de polices, de …

La classe ThemeData dans Flutter
13 décembre, 2024

Le widget Theme dans Flutter La classe ThemeData dans Flutter Objectifs L’objectif de ce tutoriel est de comprendre comment utiliser et personnaliser la classe ThemeData dans Flutter pour créer des thèmes cohérents et adaptables à toute une application. Vous apprendrez …

TP11.1 Créer une Application Flutter Dynamique avec GridView et Slider
10 décembre, 2024

Le widget TextFormField dans Flutter TP11 Application de Répertoire de Moyens de Transport TP12 Application de Catalogue de Produits   TP11.1 Créer une Application Flutter Dynamique avec GridView et Slider   Objectif Développer une application Flutter simple qui affiche une …