Un interrupteur pour le mode sombre

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

Certaines personnes veulent le mode sombre dans une application, mais pas dans les autres. Proposez-leur un interrupteur.

themeMode: est un paramètre comme un autre, il peut donc provenir de l’état. Gardez un bool dans l’State de MyApp, le widget qui construit MaterialApp, et choisissez le mode à partir de celui-ci :

bool _dark = false;

MaterialApp(
  themeMode: _dark ? ThemeMode.dark : ThemeMode.light,
  ...
)

Lorsque l’interrupteur modifie _dark dans setState, build s’exécute à nouveau, MaterialApp applique le nouveau mode et tous les écrans changent de thème en même temps, avec un bref fondu.

L’état doit se trouver au-dessus de MaterialApp, car c’est là que le thème est choisi. C’est pourquoi MyApp est ici un StatefulWidget.

Défi

Facile

Fais basculer le thème avec l’interrupteur :

dans onChanged, stocke la nouvelle valeur dans _dark à l’intérieur de setState
définis le themeMode: de MaterialApp à partir de _dark : sombre lorsqu’il vaut true, clair lorsqu’il vaut false

Essayez vous-même

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _dark = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
      ),
      darkTheme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.indigo,
          brightness: Brightness.dark,
        ),
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Night Reader')),
        body: Center(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text('Dark mode', style: TextStyle(fontSize: 20)),
              const SizedBox(width: 12),
              Switch(
                value: _dark,
                onChanged: (value) {},
              ),
            ],
          ),
        ),
      ),
    );
  }
}