Cambiar el tema de una aplicación Flutter de claro a oscuro

Tiempo de lectura: < 1 minuto

Primero debemos añadir la dependencia provider dentro de pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  provider: ^5.0.0

Para modificar el tema de una aplicación muestro un ejemplo a continuación:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => ThemeProvider(),
      child: MyApp(),
    ),
  );
}

class ThemeProvider with ChangeNotifier {
  bool _isDarkMode = false;

  ThemeMode get currentTheme => _isDarkMode ? ThemeMode.dark : ThemeMode.light;

  void toggleTheme() {
    _isDarkMode = !_isDarkMode;
    notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      themeMode: Provider.of<ThemeProvider>(context).currentTheme,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Mi aplicación'),
      ),
      body: Center(
        child: Consumer<ThemeProvider>(
          builder: (context, themeProvider, _) => ElevatedButton(
            onPressed: () {
              themeProvider.toggleTheme();
            },
            child: Text('Cambiar tema'),
          ),
        ),
      ),
    );
  }
}

Espero que les sirva de ayuda, feliz día!

Deja un comentario