Dark mode en Flutter con ThemeMode: ejercicio resuelto

Si quieres implementar modo oscuro en Flutter, este ejercicio te muestra una base clara con ThemeMode.

Enunciado

Permite alternar entre tema claro y oscuro mediante un switch.

Solución en Flutter

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import 'package:flutter/material.dart';

void main() => runApp(const ThemeApp());

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

  @override
  State<ThemeApp> createState() => _ThemeAppState();
}

class _ThemeAppState extends State<ThemeApp> {
  bool isDark = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      themeMode: isDark ? ThemeMode.dark : ThemeMode.light,
      home: Scaffold(
        appBar: AppBar(title: const Text('Dark mode')),
        body: Center(
          child: SwitchListTile(
            value: isDark,
            title: const Text('Modo oscuro'),
            onChanged: (value) => setState(() => isDark = value),
          ),
        ),
      ),
    );
  }
}

Resultado esperado

La app cambia de tema al instante y mantiene consistencia visual.

Errores frecuentes

Configurar solo theme sin darkTheme.
No centralizar colores y estilos.
No persistir preferencia del usuario.

Aplicación práctica

El dark mode mejora UX en sesiones largas y es esperado por muchos usuarios.

Siguiente ejercicio recomendado

Práctica guiada y siguiente paso

FAQ

¿ThemeMode es suficiente para dark mode?

Sí, para la mayoría de apps cubre bien el caso base.

¿Conviene persistir el tema en local?

Sí. Mejora experiencia al recordar preferencia entre sesiones.

¿Puede afectar accesibilidad?

Bien implementado mejora confort visual, pero debes cuidar contraste y legibilidad.