En Flutter, la personalización y la flexibilidad son dos de sus mayores fortalezas. Una de las características más útiles que ofrece es la capacidad de cambiar el tema de la aplicación en tiempo real. Esto puede ser especialmente útil si quieres ofrecer a tus usuarios la opción de cambiar entre un tema claro y oscuro. En esta guía, te mostraré cómo puedes lograr esto usando el paquete Provider.

Configurando el Provider

Primero, necesitamos configurar el Provider en nuestra aplicación. El Provider es un paquete que simplifica el manejo del estado en Flutter. Para usarlo, necesitamos envolver nuestra aplicación en un ChangeNotifierProvider.

void main() {

  runApp(

    ChangeNotifierProvider(

      create: (context) => ThemeProvider(),

      child: MyApp(),

    ),

  );

}

Creando el ThemeProvider

A continuación, necesitamos crear nuestro ThemeProvider. Este es un ChangeNotifier que mantendrá el estado de nuestro tema actual.

class ThemeProvider extends ChangeNotifier {

  ThemeData _themeData;

  ThemeProvider() {

    _themeData = ThemeData.light();

  }

  getTheme() => _themeData;

  setTheme(ThemeData theme) {

    _themeData = theme;

    notifyListeners();

  }

}

Cambiando el Tema

Finalmente, podemos cambiar el tema llamando a setTheme en nuestro ThemeProvider. Aquí hay un ejemplo de cómo puedes hacer esto con un botón.

FloatingActionButton(

  onPressed: () {

    var themeProvider = Provider.of(context, listen: false);

    themeProvider.setTheme(

      themeProvider.getTheme() == ThemeData.light()

        ? ThemeData.dark()

        : ThemeData.light(),

    );

  },

  child: Icon(Icons.brightness_6),

),