¿Quieres que tu app Flutter luzca moderna y se adapte a las preferencias del usuario?
¡Implementa el modo oscuro y claro fácilmente con Flutter!
¿Por qué ofrecer modo oscuro y claro?
- Mejora la experiencia de usuario y la accesibilidad.
- Ahorra batería en dispositivos con pantallas OLED.
- Es tendencia en apps modernas.
¿Cómo funciona el tema en Flutter?
Flutter permite definir temas globales para toda la app usando ThemeData. Puedes alternar entre tema claro y oscuro fácilmente.
Ejemplo básico: Alternar modo oscuro y claro
1. Define los temas en tu app
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool _modoOscuro = false;
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Modo Oscuro y Claro',
theme: ThemeData.light(),
darkTheme: ThemeData.dark(),
themeMode: _modoOscuro ? ThemeMode.dark : ThemeMode.light,
home: Scaffold(
appBar: AppBar(title: Text('Modo Oscuro y Claro')),
body: Center(
child: SwitchListTile(
title: Text('Activar modo oscuro'),
value: _modoOscuro,
onChanged: (valor) {
setState(() {
_modoOscuro = valor;
});
},
),
),
),
);
}
}Detectar el modo del sistema automáticamente
Puedes hacer que tu app use el modo del sistema por defecto:
MaterialApp(
theme: ThemeData.light(),
darkTheme: ThemeData.dark(),
themeMode: ThemeMode.system, // Usa el modo del sistema
// ...
)Personaliza tus temas
Puedes crear temas personalizados para dar identidad a tu app:
final temaClaro = ThemeData(
brightness: Brightness.light,
primarySwatch: Colors.blue,
scaffoldBackgroundColor: Colors.white,
appBarTheme: AppBarTheme(backgroundColor: Colors.blue),
);
final temaOscuro = ThemeData(
brightness: Brightness.dark,
primarySwatch: Colors.deepPurple,
scaffoldBackgroundColor: Colors.black,
appBarTheme: AppBarTheme(backgroundColor: Colors.deepPurple),
);
MaterialApp(
theme: temaClaro,
darkTheme: temaOscuro,
themeMode: ThemeMode.system,
// ...
)Guardar la preferencia del usuario
Puedes usar el paquete shared_preferences para recordar la elección del usuario:
import 'package:shared_preferences/shared_preferences.dart';
// Al cambiar el modo
void _guardarPreferencia(bool modoOscuro) async {
final prefs = await SharedPreferences.getInstance();
prefs.setBool('modoOscuro', modoOscuro);
}
// Al iniciar la app
void _cargarPreferencia() async {
final prefs = await SharedPreferences.getInstance();
setState(() {
_modoOscuro = prefs.getBool('modoOscuro') ?? false;
});
}Buenas prácticas
- Usa colores accesibles y buen contraste en ambos modos.
- Prueba tu app en modo claro y oscuro antes de publicar.
- Permite al usuario cambiar el modo desde la configuración de la app.
Recursos útiles
- Documentación oficial de Flutter: Temas
- Ejemplo de modo oscuro en Flutter
- shared_preferences package
¿Listo para modernizar tu app Flutter?
¡Con modo oscuro y claro, tus usuarios te lo agradecerán!
Explorar etiquetas