Un interruptor para el modo oscuro

Parte de la sección Diseños que se adaptan del Journey de Flutter de Coddy. Lección 25 de 30.

Algunas personas quieren el modo oscuro en una aplicación y no en las demás. Dales un interruptor.

themeMode: es una configuración como cualquier otra, así que puede provenir del estado. Mantén un bool en el State de MyApp, el widget que construye MaterialApp, y elige el modo a partir de él:

bool _dark = false;

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

Cuando el interruptor cambia _dark dentro de setState, build se ejecuta de nuevo, MaterialApp obtiene el nuevo modo y todas las pantallas cambian de tema al mismo tiempo, con un fundido breve.

El estado debe estar por encima de MaterialApp, porque es ahí donde se elige el tema. Por eso MyApp es aquí un StatefulWidget.

Desafío

Fácil

Haz que el interruptor cambie el tema:

en onChanged, guarda el nuevo valor en _dark dentro de setState
configura themeMode: de MaterialApp según _dark: oscuro cuando sea true, claro cuando sea false

Pruébalo tú mismo

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