Um botão para alternar o modo escuro

Parte da seção Layouts que se adaptam do Journey de Flutter da Coddy. Lição 25 de 30.

Algumas pessoas querem o modo escuro em um app, mas não nos outros. Ofereça a elas uma chave de alternância.

themeMode: é uma configuração como qualquer outra, então pode vir do estado. Mantenha um bool no State de MyApp, o widget que cria o MaterialApp, e escolha o modo com base nele:

bool _dark = false;

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

Quando a chave de alternância altera _dark dentro de setState, build é executado novamente, o MaterialApp recebe o novo modo e todas as telas mudam de tema ao mesmo tempo, com uma transição rápida.

O estado precisa ficar acima de MaterialApp, porque é nele que o tema é escolhido. É por isso que MyApp é um StatefulWidget aqui.

Desafio

Fácil

Faça com que a chave alterne o tema:

em onChanged, armazene o novo valor em _dark dentro de setState
defina o themeMode: de MaterialApp com base em _dark: escuro quando for true, claro quando for false

Experimente você mesmo

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) {},
              ),
            ],
          ),
        ),
      ),
    );
  }
}