Gestión del estado de aplicaciones en Flutter

Gestión estado aplicaciones

Resumen del articulo Gestión sencilla del estado de las aplicaciones

Nota: Se utiliza el termino widget porque se ha vuelto una palabra estándar. Una traducción podría ser Componente.

Añadir paquete provider

Para la gestión de estado se utiliza el paquete provider, que tiene que añadirse al proyecto

 1. Añadir en pubspec.yaml

 dependencies:

  flutter:

    sdk: flutter

  provider: ^2.0.0

2. Añadir en el código fuente:

 import 'package:provider/provider.dart'

Utilizar paquete provider

Se gestionan con 4 conceptos para conseguir trabajar con estados y variables globales a toda la aplicación:

1. ChangeNotifier
2. ChangeNotifierProvider
3. Consumer
4. Provider.of

ChangeNotifier

Proporciona notificaciones de los cambios de estado a los widgets que se suscriben a ese ChangeNotifier. Al final representa el estado "global" de la aplicación.

La forma de implementarlo es la siguiente:

 class Mimodelodenotificador extends ChangeNotifier {

    // Acciones que modifican el estado de la aplicación

   // Avisar a los widgets que están escuchando  que se reconstruyan ya que el estado 

   // global ha cambiado tras las acciones anteriores.

    notifyListeners();

  }

ChangeNotifierProvider

ChangeNotifierProvider es muy simple. Solamente proporciona una instancia de un ChangeNotifier a sus descendientes. Por tanto debe colocarse por encima de los widgets que lo necesiten

Si es al principio de toda la app se escribe:

void main() {

  runApp(

    ChangeNotifierProvider(

      create: (context) => Mimodelodenotificador(),

      child: MyApp(),

    ),

  );

}

* Ahora se utiliza create en vez de builder

** con ese trozo de código se puede acceder a context en todo MyApp

Consumer

De la clase consumer serán los widgets que se suscriben al notificador. Actualizaran visualmente u de otra forma la app para reflejar el nuevo estado global.

Consumer<Mimodelodenotificador>( //entre símbolos va el tipo de notificador

  builder: (context, mimodelodenotificador, child) { //el 2º parámetro es la instancia del notificador

    //acciones de actualización

  },

Provider.of

Para el caso de querer utilizar Consumer pero no necesitas acceder a datos se usa provider.of con el parámetro listen con valor false.

Provider.of<CartModel>(context, listen: false)

}

 

Código completo

Todo el código junto quedaría como se escribe a continuación. Es un resumen ejecutable del main.dart del ejemplo provider_counter

https://github.com/flutter/samples/tree/main/provider_counter

import 'package:flutter/material.dart';

import 'package:provider/provider.dart';

void main() {

  runApp(

    ChangeNotifierProvider(

      create: (context) => Counter(),

      child: const MyApp(),

    ),

  );

}

class Counter with ChangeNotifier {

  int value = 0;

  void increment() {

    value += 1;

    notifyListeners();

  }

}

class MyApp extends StatelessWidget {

  const MyApp({super.key});

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Flutter Demo',

      home: const MyHomePage(),

    );

  }

}

class MyHomePage extends StatelessWidget {

  const MyHomePage({super.key});

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: const Text('Flutter Demo Home Page'),

      ),

      body: Center(

        child: Column(

          children: [

            const Text('You have pushed the button this many times:'),

            Consumer<Counter>(

              builder: (context, counter, child) => Text(

                '${counter.value}',

                style: Theme.of(context).textTheme.headline4,

              ),

            ),

          ],

        ),

      ),

      floatingActionButton: FloatingActionButton(

        onPressed: () {

          var counter = context.read<Counter>();

          counter.increment();

        },

        tooltip: 'Increment',

        child: const Icon(Icons.add),

      ),

    );

  }

}