Usar un provider con Change Notifier con Flutter

Tiempo de lectura: 2 minutos

En el ejemplo de hoy, vamos a aprender cómo crear un provider mediante un Change Notifier con Flutter.

Vamos a tratar de cambiar el color del fondo desde distintas pantallas en las que naveguemos.

Primero tenemos que instalar el paquete provider:

flutter pub add provider

Ahora vamos a crear un ChangeNotifier llamado BackgroundColorNotifier

import 'package:flutter/material.dart';

class BackgroundColorNotifier extends ChangeNotifier {
  Color _overlayColor = Colors.blueAccent.withOpacity(0.5);

  Color get overlayColor => _overlayColor;

  void updateColor(Color newColor) {
    _overlayColor = newColor.withOpacity(0.5);
    notifyListeners();
  }
}

Ahora tenemos que añadir este ChangeNotifierProvider en la raíz de nuestra APP.

En mi caso desde main.dart.

Se envuelve la aplicación con un ChangeNotifierProvider para que el color de fondo se pueda acceder desde cualquier parte de la app:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => BackgroundColorNotifier(),
      child: Consumer<BackgroundColorNotifier>(
        builder: (context, backgroundColorNotifier, child) {
          return GlobalBackground(
            overlayColor: backgroundColorNotifier.overlayColor,
            child: MaterialApp(
              debugShowCheckedModeBanner: false,
              navigatorObservers: [routeObserver],
              home: App(),
            ),
          );
        },
      ),
    );
  }
}

Para modificar el color por uno nuevo desde cualquier otra pantalla haremos lo siguiente:

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

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Stack(
        children: [
          Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () {
                    Provider.of<BackgroundColorNotifier>(context, listen: false)
                        .updateColor(Colors.redAccent);
                  },
                  child: Text('Cambiar fondo a rojo'),
                ),
                ElevatedButton(
                  onPressed: () {
                    Provider.of<BackgroundColorNotifier>(context, listen: false)
                        .updateColor(Colors.greenAccent);
                  },
                  child: Text('Cambiar fondo a verde'),
                ),
              ],
            ),
          ),

        ],
      ),
    );
  }
}

Y si lo queremos cambiar inmediatamente al entrar:

    
 @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      Provider.of<BackgroundColorNotifier>(context, listen: false)
          .updateColor(ColorsApp.rojo.withOpacity(0.2));
    });
}