DEV Community: Marcelo Sebastián

Manejo de estados en flutter, Provider

Marcelo Sebastián — Fri, 11 Sep 2020 22:34:45 +0000

En esta guía se mostrará el uso de Provider para el manejo de estados en Flutter.

El código de esta guía se lo puede encontrar en GitHub.

marcedroid / Flutter-State-Management-Demos

Manejo de estados en Flutter

Importante

La rama provider es la que tiene la implementación de esta guía.
La rama master tiene el código base de la aplicación.

La aplicación cuenta con tres vistas:

User: En esta vista al cambiar los valores del campo de texto también se actualizará el título del AppBar, además se actualizará en nombre de usuario en la vista cart.
Catalog: En esta vista se muestra un listado de Items y al interactuar con cada uno de ellos se puede ver que el ícono para agregar/eliminar cambia, también se actualiza el contador de items del AppBar y el listado de items de la vista cart.
Cart: En esta vista se muestra un listado de los productos que se han seleccionado en la vista de catalog también se muestra el precio total y el nombre de usuario junto con las iniciales del mismo en un CircleAvatar.

Para mantener el código ordenado se creó la carpeta providers y dentro de esta los archivos catalog_provider.dart, user_provider.dart

providers
- catalog_provider.dart
- user_provider.dart

Índice

Instalar Provider
Provider para nombre de usuario
Provider para catálogo
Modificar main.dart
Vistas
- user.dart
- catalog.dart
- cart.dart

Instalar Provider

https://pub.dev/packages/provider

Para este ejemplo se ha utilizado la versión 4.3.2+2
pubspec.yaml

dependencies:
  provider: ^4.3.2+2

Provider para nombre de usuario

user_provider.dart

import 'package:flutter/material.dart';

class UserProvider with ChangeNotifier {
  String _username = 'Guest';

  String get username => _username;

  void onChange(value) {
    _username = value;
    notifyListeners();
  }
}

Explicación:

Importar la librería material.dart ya que se va a usar como mixin ChangeNotifier en la clase UserProvider

import 'package:flutter/material.dart';

Crear la clase UserProvider y utilizar como mixin la clase ChangeNotifier

class UserProvider with ChangeNotifier {
  ...
}

Crear una variable privada que va a contener el nombre de usuario, también agregar un getter para que se pueda obtener este valor fuera de la clase UserProvider.

String _username = 'Guest';

String get username => _username;

Crear un método que va a actualizar el nombre de usuario y a su vez va a notificar los cambios.

void onChange(value) {
  _username = value;

// Notificar los cambios con notifyListeners();
  notifyListeners();
}

Provider para catálogo

catalog_provider.dart

import 'package:flutter/material.dart';
import 'package:state_management/models/item_model.dart';

class CatalogProvider with ChangeNotifier {
  List<ItemModel> _catalog = [];

  List<ItemModel> get catalog => _catalog;

  void addToCatalog(ItemModel itemModel) {
    _catalog.add(itemModel);
    notifyListeners();
  }

  void removeFromCatalog(ItemModel itemModel) {
    _catalog.remove(itemModel);
    notifyListeners();
  }
}

Explicación:

Al igual que con user_provider.dart es necesario importar la librería material.dart, pero esta vez también va a ser necesario item_model.dart ya que se van a usar objetos de tipo ItemModel.

import 'package:flutter/material.dart';
import 'package:state_management/models/item_model.dart';

Crear la clase CatalogProvider y utilizar como mixin la clase ChangeNotifier

class CatalogProvider with ChangeNotifier {
  ...
}

Crear una variable privada que va a contener el listado de items, también agregar un getter para que se pueda obtener este listado fuera de la clase CatalogProvider.

List<ItemModel> _catalog = [];

List<ItemModel> get catalog => _catalog;

Crear un método para agregar un nuevo item al listado y a su vez va a notificar los cambios.

void addToCatalog(ItemModel itemModel) {
  _catalog.add(itemModel);

// Notificar los cambios con notifyListeners();
  notifyListeners();
}

Crear otro método para eliminar un nuevo item del listado y a su vez va a notificar los cambios.

void removeFromCatalog(ItemModel itemModel) {
  _catalog.remove(itemModel);

// Notificar los cambios con notifyListeners();
  notifyListeners();
}

Modificar main.dart

import 'package:provider/provider.dart';
import 'package:state_management/providers/catalog_provider.dart';
import 'package:state_management/providers/user_provider.dart';

...

void main() => runApp(
      MultiProvider(
        providers: [
          ChangeNotifierProvider(create: (_) => UserProvider()),
          ChangeNotifierProvider(create: (_) => CatalogProvider())
        ],
        child: MyApp(),
      ),
    );

Explicación:

Importar la librería provider.dart además de los archivos catalog_provider.dart y user_provider.dart.

import 'package:provider/provider.dart';
import 'package:state_management/providers/catalog_provider.dart';
import 'package:state_management/providers/user_provider.dart';

Modificar el método original void main() => runApp(MyApp());
Porque se deben crear los providers el nivel más alto posible en la jerarquía de widgets.

void main() => runApp(
// Agregar un MultiProvider ya que se van a utilizar varios providers
      MultiProvider(
        providers: [

// Crear el CatalogProvider
          ChangeNotifierProvider(create: (_) => UserProvider()),

// Crear el UserProvider
          ChangeNotifierProvider(create: (_) => CatalogProvider())
        ],

// Pasar MyApp() como widget hijo
        child: MyApp(),
      ),
    );

Vistas

En esta sección se mostrará los cambios necesarios a realizar para que las vistas se actualicen usando providers.

user.dart

import 'package:provider/provider.dart';
import 'package:state_management/providers/user_provider.dart';

...

@override
void initState() {
  super.initState();

  _textEditingController =
      TextEditingController(text: context.read<UserProvider>().username);
}

...

final _userProvider = Provider.of<UserProvider>(context);

...

title: Text('User - ${_userProvider.username}'),

...

onChanged: (value) {
  _userProvider.onChange(value);
},

Explicación:

Importar la librería provider.dart y el archivo user_provider.dart

import 'package:provider/provider.dart';
import 'package:state_management/providers/user_provider.dart';

Sobrescribir el método initState para pasar el nombre de usuario al TextEditingController, esto se hace para tener un valor por default en el campo de texto.

@override
void initState() {
  super.initState();

// Obtener el nombre de usuario fuera de una vista con
// context.read<UserProvider>().username
  _textEditingController =
      TextEditingController(text: context.read<UserProvider>().username);
}

Agregar una variable privada en el método build que contenga UserProvider

final _userProvider = Provider.of<UserProvider>(context);

Agregar el nombre de usuario al título del AppBar usando _userProvider.username

title: Text('User - ${_userProvider.username}'),

Llamar el método onChange de UserProvider al momento de hacer un cambio en el campo de texto.

onChanged: (value) {
  _userProvider.onChange(value);
},

catalog.dart

import 'package:provider/provider.dart';
import 'package:state_management/providers/catalog_provider.dart';

...

child: CircleAvatar(
  child: Text(
    '${context.watch<CatalogProvider>().catalog.length}',

...

@override
Widget build(BuildContext context) {
  final _catalogProvider =
      Provider.of<CatalogProvider>(context, listen: false);

...

trailing: IconButton(
  onPressed: () {
    if (items[index].addedToCart) {
      _catalogProvider.removeFromCatalog(items[index]);
    } else {
      _catalogProvider.addToCatalog(items[index]);
    }

Explicación:

Importar la librería provider y el archivo catalog_provider.dart

import 'package:provider/provider.dart';
import 'package:state_management/providers/catalog_provider.dart';

Actualizar el número de items en el AppBar utilizando context.watch

child: CircleAvatar(
  child: Text(
    '${context.watch<CatalogProvider>().catalog.length}',

Crear una variable privada de tipo provider, pero creada con el parámetro listen en false, ya que se va a utilizar para actualizar datos del provider no para obtenerlos.

@override
Widget build(BuildContext context) {
  final _catalogProvider =
      Provider.of<CatalogProvider>(context, listen: false);

Utilizar _catalogProvider para remover o agregar items al listado de items.

trailing: IconButton(
  onPressed: () {
    if (items[index].addedToCart) {
      _catalogProvider.removeFromCatalog(items[index]);
    } else {
      _catalogProvider.addToCatalog(items[index]);
    }

cart.dart

import 'package:state_management/providers/catalog_provider.dart';
import 'package:state_management/providers/user_provider.dart';
import 'package:provider/provider.dart';

...

@override
  Widget build(BuildContext context) {
    final _userProvider = Provider.of<UserProvider>(context);
    final _catalogProvider = Provider.of<CatalogProvider>(context);

...

child: ListView.builder(
  itemCount: _catalogProvider.catalog.length,
  itemBuilder: (context, index) => ListTile(
    title: Text(
      '${_catalogProvider.catalog[index].name}'.toUpperCase(),
      style: TextStyle(fontWeight: FontWeight.bold),
    ),
    trailing: Text(
      '\$${_catalogProvider.catalog[index].price.toStringAsFixed(2)}',
    ),
  ),
),

...

Column(
  children: [
    CircleAvatar(
      child: Text(
          getInitials(_userProvider.username).toUpperCase()),
    ),
    Text(
      '${_userProvider.username}',
      style: TextStyle(
        fontWeight: FontWeight.bold,
      ),
    ),
  ],
),

...

Text(
  '\$${formatTotal(_catalogProvider.catalog)}',

Explicación:

Importar la librería provider y los archivos catalog_provider.dart y user_provider.dart

import 'package:state_management/providers/catalog_provider.dart';
import 'package:state_management/providers/user_provider.dart';
import 'package:provider/provider.dart';

Crear dos variables privadas, para obtener los datos del provider de user y catalog.

@override
  Widget build(BuildContext context) {
    final _userProvider = Provider.of<UserProvider>(context);
    final _catalogProvider = Provider.of<CatalogProvider>(context);

Actualizar ListView.builder

child: ListView.builder(

// Actualizar el contador de items.
  itemCount: _catalogProvider.catalog.length,
  itemBuilder: (context, index) => ListTile(
    title: Text(

// Mostrar el nombre del item.
      '${_catalogProvider.catalog[index].name}'.toUpperCase(),
      style: TextStyle(fontWeight: FontWeight.bold),
    ),
    trailing: Text(

// Mostrar el precio del producto con dos decimales.
'\$${_catalogProvider.catalog[index].price.toStringAsFixed(2)}',
    ),
  ),
),

Actualizar el nombre de usuario.

Column(
  children: [
    CircleAvatar(
      child: Text(

// Mostrar las iniciales del nombre de usuario
          getInitials(_userProvider.username).toUpperCase()),
    ),
    Text(

// Mostrar el nombre de usuario
      '${_userProvider.username}',
      style: TextStyle(
        fontWeight: FontWeight.bold,
      ),
    ),
  ],
),

Actualizar el valor total de los items.

Text(
  '\$${formatTotal(_catalogProvider.catalog)}',

Eso es todo, recuerda que código de esta guía se lo puede encontrar en GitHub.

marcedroid / Flutter-State-Management-Demos

Manejo de estados en Flutter

Manejo de estados en flutter, BLoC Pattern sin librerías

Marcelo Sebastián — Fri, 04 Sep 2020 23:30:29 +0000

En esta guía se mostrará el uso del patrón BLoC sin hacer uso de librerías de terceros.

El código de esta guía se lo puede encontrar en GitHub.

marcedroid / Flutter-State-Management-Demos

Manejo de estados en Flutter

Importante

La rama bloc-no-libraries es la que tiene la implementación del patrón BLoC.
La rama master tiene el código base de la aplicación.

La aplicación cuenta con tres vistas:

User: En esta vista al cambiar los valores del campo de texto también se actualizará el título del AppBar, además se actualizará en nombre de usuario en la vista cart.
Catalog: En esta vista se muestra un listado de Items y al interactuar con cada uno de ellos se puede ver que el ícono para agregar/eliminar cambia, también se actualiza el contador de items del AppBar y el listado de items de la vista cart.
Cart: En esta vista se muestra un listado de los productos que se han seleccionado en la vista de catalog también se muestra el precio total y el nombre de usuario junto con las iniciales del mismo en un CircleAvatar.

Para tener el código ordenado se debe crear en la carpeta lib la carpeta blocs y dentro de esta carpeta crear catalog y user

blocs
- catalog
- user

Índice

Patrón BLoC para nombre de usuario
- user_event.dart
- user_state.dart
- user_bloc.dart
Patrón BLoC para catálogo
- catalog_event.dart
- catalog_state.dart
- catalog_bloc.dart
Vistas
- user.dart
- catalog.dart
- cart.dart

Patrón BLoC para nombre de usuario

Crear tres archivos dentro de la carpeta blocs/user

user_event.dart: Archivo en el cual se declararán los eventos de patrón BLoC.
user_state.dart: Archivo que se encargará de la lógica para obtener, modificar o eliminar la data.
user_bloc.dart: Detectará el tipo de evento recibido y se encargará de responder a ellos.

user_event.dart

abstract class UserEvent {}

class OnChangeEvent extends UserEvent {
  final String value;

  OnChangeEvent(this.value);
}

class GetUsernameEvent extends UserEvent {}

Es un archivo bastante simple, que podíamos haber incluido directamente en el archivo _bloc, pero de esta forma tenemos mucho mejor ordenado el código.

Explicación:

Primero es necesario definir los eventos, una de las formas más fáciles es hacerlo con clases.
Vamos a crear una clase abstracta base de la cual van a extender el resto de nuestros eventos de usuario.

abstract class UserEvent {}

Luego vamos a definir el evento que se ejecutará al momento de hacer un cambio en el nombre de usuario.
Este va a recibir como parámetro un String.

class OnChangeEvent extends UserEvent {
  final String value;

  OnChangeEvent(this.value);
}

Por último vamos a definir otro evento con el cual obtendremos el nombre de usuario actual, esto lo vamos a necesitar para actualizar la data entre pantallas o tomar el valor fuera de una vista.

class GetUsernameEvent extends UserEvent {}

user_state.dart

class UserState {
  String _username = 'Guest';

  UserState._();
  static UserState _instance = UserState._();
  factory UserState() => _instance;

  String get username => _username;

  void onChange(value) {
    _username = value;
  }
}

Explicación:

Crear una variable privada, en este caso quiero que el usuario por default sea Guest es por eso que no he dejado un string vacío.

String _username = 'Guest';

Necesitamos tener una instancia que sea compartida y que solo pueda ser instanciada una vez (singleton).

// Definimos un constructor privado.
UserState._();

// Crear una instancia privada usando nuestro constructor.
static UserState _instance = UserState._();

// Crear una factory (método que genera las instancias)
factory UserState() => _instance;

Crear un get para obtener en nombre de usuario.

String get username => _username;

Por último crear el método para actualizar el nombre de usuario.

void onChange(value) {
  _username = value;
}

user_bloc.dart

import 'dart:async';

import 'package:state_management/blocs/user/user_event.dart';
import 'package:state_management/blocs/user/user_state.dart';

class UserBloc {
  UserState _userState = UserState();

  StreamController<UserEvent> _input = StreamController();
  StreamController<String> _output = StreamController();

  StreamSink<UserEvent> get sendEvent => _input.sink;
  Stream<String> get userStream => _output.stream;

  UserBloc() {
    _input.stream.listen(_onEvent);
  }

  void _onEvent(UserEvent event) {
    if (event is OnChangeEvent) {
      _userState.onChange(event.value);
    }

    _output.add(_userState.username);
  }

  void dispose() {
    _input.close();
    _output.close();
  }
}

Explicación:

Importar dart:async ya que es requerido por StreamController, también importar el archivo de eventos y estado.

import 'dart:async';

import 'package:state_management/blocs/user/user_event.dart';
import 'package:state_management/blocs/user/user_state.dart';

Crear una variable privada de tipo UserState().

UserState _userState = UserState();

Crear dos variables privadas de tipo StreamController().

StreamController<UserEvent> _input = StreamController();
StreamController<String> _output = StreamController();

Exponer sink y stream mediante getters, esto es para que la vistas puedan enviar eventos y escuchar los cambios.

StreamSink<UserEvent> get sendEvent => _input.sink;
Stream<String> get userStream => _output.stream;

Crear un constructor que escuche los eventos.

UserBloc() {
  _input.stream.listen(_onEvent);
}

Crear un método privado _onEvent que se encargue de procesar los eventos que escucha el _input.stream.

void _onEvent(UserEvent event) {
// Si el evento es de tipo OnChangeEvent, ejecutar la función onChange de _userState.
  if (event is OnChangeEvent) {
    _userState.onChange(event.value);
  }

// Enviamos el nuevo valor utilizando el _output.
  _output.add(_userState.username);
}

Liberar los recursos de los StreamController() cuando no se los necesite con un dispose.

void dispose() {
  _input.close();
  _output.close();
}

Patrón BLoC para catálogo

Estos pasos son prácticamente los mismos que se hicieron para el patrón BLoC del nombre de usuario.

Crear tres archivos dentro de la carpeta blocs/catalog

catalog_event.dart: Archivo en el cual se declararán los eventos de patrón BLoC.
catalog_state.dart: Archivo que se encargará de la lógica para obtener, modificar o eliminar la data.
catalog_bloc.dart: Detectará el tipo de evento recibido y se encargará de responder a ellos.

catalog_event.dart

import 'package:state_management/models/item_model.dart';

abstract class CatalogEvent {}

class AddCatalogItemEvent extends CatalogEvent {
  final ItemModel item;

  AddCatalogItemEvent(this.item);
}

class RemoveCatalogItemEvent extends CatalogEvent {
  final ItemModel item;

  RemoveCatalogItemEvent(this.item);
}

class GetCatalogEvent extends CatalogEvent {}

Explicación:

Importar item_model.dart ya que este BLoC va a usar una lista de ItemModel.

import 'package:state_management/models/item_model.dart';

Crear una clase abstracta de la cual van a extender los otros eventos.

abstract class CatalogEvent {}

Definir un evento para agregar un item al carrito, recibe como parámetro un ItemModel.

class AddCatalogItemEvent extends CatalogEvent {
  final ItemModel item;

  AddCatalogItemEvent(this.item);
}

Definir un evento para eliminar un item del carrito, recibe como parámetro un ItemModel.

class RemoveCatalogItemEvent extends CatalogEvent {
  final ItemModel item;

  RemoveCatalogItemEvent(this.item);
}

Definir un evento que se ejecutará para obtener el listado del catálogo.

class GetCatalogEvent extends CatalogEvent {}

catalog_state.dart

import 'package:state_management/models/item_model.dart';

class CatalogState {
  List<ItemModel> _catalog = [];

  CatalogState._();
  static CatalogState _instance = CatalogState._();
  factory CatalogState() => _instance;

  List<ItemModel> get catalog => _catalog;

  void addToCatalog(ItemModel itemModel) {
    _catalog.add(itemModel);
  }

  void removeFromCatalog(ItemModel itemModel) {
    _catalog.remove(itemModel);
  }
}

Explicación:

Importar item_model.dart ya que este BLoC va a usar una lista de ItemModel.

import 'package:state_management/models/item_model.dart';

Crear una variable privada que va a contener una lista de objetos ItemModel, en este caso se inicial la lista vacía.

List<ItemModel> _catalog = [];

Necesitamos tener una instancia que sea compartida y que solo pueda ser instanciada una vez (singleton).

// Definimos un constructor privado.
CatalogState._();

// Crear una instancia privada usando nuestro constructor.
static CatalogState _instance = CatalogState._();

// Crear la factory (método que genera las instancias)
factory CatalogState() => _instance;

Crear un getter para obtener el listado de ItemModel

List<ItemModel> get catalog => _catalog;

Crear el método que agrega un item al carrito.

void addToCatalog(ItemModel itemModel) {
  _catalog.add(itemModel);
}

Crear el método que elimina un item del carrito.

void removeFromCatalog(ItemModel itemModel) {
  _catalog.remove(itemModel);
}

catalog_bloc.dart

import 'dart:async';

import 'package:state_management/blocs/catalog/catalog_event.dart';
import 'package:state_management/blocs/catalog/catalog_state.dart';
import 'package:state_management/models/item_model.dart';

class CatalogBloc {
  CatalogState _catalogState = CatalogState();

  StreamController<CatalogEvent> _input = StreamController();
  StreamController<List<ItemModel>> _output =
      StreamController<List<ItemModel>>.broadcast();

  StreamSink<CatalogEvent> get sendEvent => _input.sink;
  Stream<List<ItemModel>> get catalogStream => _output.stream;

  CatalogBloc() {
    _input.stream.listen(_onEvent);
  }

  void _onEvent(CatalogEvent event) {
    if (event is AddCatalogItemEvent) {
      _catalogState.addToCatalog(event.item);
    } else if (event is RemoveCatalogItemEvent) {
      _catalogState.removeFromCatalog(event.item);
    }

    _output.add(_catalogState.catalog);
  }

  void dispose() {
    _input.close();
    _output.close();
  }
}

Explicación:

Importar dart:async ya que es requerido por StreamController, también importar el archivo de eventos, estado e ItemModal.

import 'dart:async';

import 'package:state_management/blocs/catalog/catalog_event.dart';
import 'package:state_management/blocs/catalog/catalog_state.dart';
import 'package:state_management/models/item_model.dart';

Crear una variable privada de tipo CatalogState().

CatalogState _catalogState = CatalogState();

Crear dos variables provadas de tipo StreamController().
En este caso el _output va a ser escuchado en más de un lugar de la vista, por lo cual debe ser un broadcast.
StreamController<List<ItemModel>>.broadcast();

StreamController<CatalogEvent> _input = StreamController();
StreamController<List<ItemModel>> _output = StreamController<List<ItemModel>>.broadcast();

Exponer sink y stream mediante getters, esto es para que la vistas puedan enviar eventos y escuchar los cambios.

StreamSink<CatalogEvent> get sendEvent => _input.sink;
Stream<List<ItemModel>> get catalogStream => _output.stream;

Crear un constructor que escuche los eventos.

CatalogBloc() {
  _input.stream.listen(_onEvent);
}

Crear un método privado _onEvent que se encargue de procesar los eventos que escucha el _input.stream.

void _onEvent(CatalogEvent event) {
  if (event is AddCatalogItemEvent) {
// Si el evento es de tipo AddCatalogItemEvent, ejecutar la función addToCatalog de _catalogState.
    _catalogState.addToCatalog(event.item);
  } else if (event is RemoveCatalogItemEvent) {
// Si el evento es de tipo RemoveCatalogItemEvent, ejecutar la función removeFromCatalog de _catalogState.
    _catalogState.removeFromCatalog(event.item);
  }

  _output.add(_catalogState.catalog);
}

Liberar los recursos de los StreamController() cuando no se los necesite con un dispose.

void dispose() {
  _input.close();
  _output.close();
}

Vistas

En esta sección se mostrará los cambios necesarios a realizar para que las vistas se actualicen usando el patrón BLoC.

user.dart

...

import 'package:state_management/blocs/user/user_bloc.dart';
import 'package:state_management/blocs/user/user_event.dart';
import 'package:state_management/blocs/user/user_state.dart';

...

TextEditingController _textEditingController;
UserBloc _userBloc = UserBloc();

@override
void initState() {
  super.initState();

  _textEditingController = TextEditingController(text: UserState().username);
  _userBloc.sendEvent.add(GetUsernameEvent());
}

@override
void dispose() {
  _userBloc.dispose();
  super.dispose();
}

...

title: StreamBuilder<String>(
    stream: _userBloc.userStream,
    builder: (context, snapshot) {
      return Text('User - ${snapshot.data}');
    }),

...

onChanged: (value) {
  _userBloc.sendEvent.add(OnChangeEvent(value));
},

...

Explicación:

Importar los archivos event, stats y bloc de usuario.

import 'package:state_management/blocs/user/user_bloc.dart';
import 'package:state_management/blocs/user/user_event.dart';
import 'package:state_management/blocs/user/user_state.dart';

Al sobre escribir initState() se debe colocar el nuevo código después de super.initState();
Al sobre escribir dispose() se debe colocar el nuevo código antes de super.dispose();

TextEditingController _textEditingController;
// Instanciar el user bloc
UserBloc _userBloc = UserBloc();

// Sobrescribir `initState` y enviar el evento `GetUsernameEvent` para actualizar el nombre de usuario al cambiar de página.
@override
void initState() {
  super.initState();

// Asignarle un valor inicial al TextEditingController, en este caso el nombre de usuario.
  _textEditingController = TextEditingController(text: UserState().username);
  _userBloc.sendEvent.add(GetUsernameEvent());
}

// Sobrescribir `dispose` para librerar los recursos del BLoC cuando ya no se usen.
@override
void dispose() {
  _userBloc.dispose();
  super.dispose();
}

Envolver el Text widget del AppBar en un StreamBuilder, de esta forma se actualizará de manera automática.

// Es necesario asignar el tipo de valor que se va a actualizar, en este caso String
title: StreamBuilder<String>(
// El stream que se pasa hace referencia a _output.stream
    stream: _userBloc.userStream,
    builder: (context, snapshot) {
// snapshot.data es el valor que se actualiza.
      return Text('User - ${snapshot.data}');
    }),

catalog.dart

...

import 'package:state_management/blocs/catalog/catalog_bloc.dart';
import 'package:state_management/blocs/catalog/catalog_event.dart';
import 'package:state_management/models/item_model.dart';

...

CatalogBloc _catalogBloc = CatalogBloc();

@override
void initState() {
  super.initState();
  _catalogBloc.sendEvent.add(GetCatalogEvent());
}

@override
void dispose() {
  _catalogBloc.dispose();
  super.dispose();
}

...

child: CircleAvatar(
  child: StreamBuilder<List<ItemModel>>(
      initialData: [],
      stream: _catalogBloc.catalogStream,
      builder: (context, snapshot) {
        return Text(
          '${snapshot.data.length}',
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 14.0,
          ),
        );
      }),

...

trailing: IconButton(
  onPressed: () {
    if (items[index].addedToCart) {
      widget._catalogBloc.sendEvent.add(
        RemoveCatalogItemEvent(items[index]),
      );
    } else {
      widget._catalogBloc.sendEvent.add(
        AddCatalogItemEvent(items[index]),
      );
    }
  },
),

...

Explicación:

Importar los archivos bloc y state de catalog además de item_model.

import 'package:state_management/blocs/catalog/catalog_bloc.dart';
import 'package:state_management/blocs/catalog/catalog_event.dart';
import 'package:state_management/models/item_model.dart';

Al sobre escribir initState() se debe colocar el nuevo código después de super.initState();
Al sobre escribir dispose() se debe colocar el nuevo código antes de super.dispose();

// Instanciar el catalog bloc
CatalogBloc _catalogBloc = CatalogBloc();

// Sobrescribir `initState` y enviar el evento `GetCatalogEvent` para actualizar el catálogo al cambiar de página.
@override
void initState() {
  super.initState();
  _catalogBloc.sendEvent.add(GetCatalogEvent());
}

// Sobrescribir `dispose` para librerar los recursos del BLoC cuando ya no se usen.
@override
void dispose() {
  _catalogBloc.dispose();
  super.dispose();
}

Envolver el Text widget en un StreamBuilder que contiene el número de items seleccionados.

child: CircleAvatar(

// En este caso el StreamBuilder es de tipo <List<ItemModel>>
  child: StreamBuilder<List<ItemModel>>(

// Se coloca una Lista vacía como data inicial para evitar errores al momento de hacer snapshot.data.length
      initialData: [],

// Pasar como stream el catalogStream del archivo catalog_bloc
      stream: _catalogBloc.catalogStream,
      builder: (context, snapshot) {
        return Text(

// snapshot.data.length es para obtener el número de items seleccionado
          '${snapshot.data.length}',
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 14.0,
          ),
        );
      }),

En este caso se ve widget._catalogBloc en lugar de solo
_catalogBloc, esto se debe a que se pasa _catalogBloc como atributo.

trailing: IconButton(
  onPressed: () {
    if (items[index].addedToCart) {

// Se envía el evento RemoveCatalogItemEvent y se pasa como parámetro el item actual
      widget._catalogBloc.sendEvent.add(
        RemoveCatalogItemEvent(items[index]),
      );
    } else {

// Se envía el evento AddCatalogItemEvent y se pasa como parámetro el item actual
      widget._catalogBloc.sendEvent.add(
        AddCatalogItemEvent(items[index]),
      );
    }
  },
),

cart.dart

...

import 'package:state_management/blocs/catalog/catalog_bloc.dart';
import 'package:state_management/blocs/catalog/catalog_event.dart';
import 'package:state_management/blocs/user/user_bloc.dart';
import 'package:state_management/blocs/user/user_event.dart';
import 'package:state_management/models/item_model.dart';

...

UserBloc _userBloc = UserBloc();
CatalogBloc _catalogBloc = CatalogBloc();

@override
void initState() {
  super.initState();
  _userBloc.sendEvent.add(GetUsernameEvent());
  _catalogBloc.sendEvent.add(GetCatalogEvent());
}

@override
void dispose() {
  _userBloc.dispose();
  _catalogBloc.dispose();
  super.dispose();
}

...

Expanded(
  child: StreamBuilder<List<ItemModel>>(
    initialData: [],
    stream: _catalogBloc.catalogStream,
    builder: (context, snapshot) {
      return ListView.builder(
        itemCount: snapshot.data.length,
        itemBuilder: (context, index) => ListTile(
          title: Text(
            '${snapshot.data[index].name}'.toUpperCase(),
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          trailing: Text(
            '\$${snapshot.data[index].price.toStringAsFixed(2)}',
          ),
        ),
      );
    },
  ),
),

...

StreamBuilder<String>(
  stream: _userBloc.userStream,
  builder: (context, snapshot) {
    return Column(
      children: [
        CircleAvatar(
          child: Text(
            getInitials('${snapshot.data}').toUpperCase(),
          ),
        ),
        Text(
          '${snapshot.data}',
          style: TextStyle(
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
    );
  },
),

...

StreamBuilder<List<ItemModel>>(
  initialData: [],
  stream: _catalogBloc.catalogStream,
  builder: (context, snapshot) {
    return Text(
      '\$${formatTotal(snapshot.data)}',
      style: TextStyle(
        fontSize: 20.0,
        fontWeight: FontWeight.bold,
      ),
    );
  },
),

...

Explicación:

Importar los archivos bloc y state de user y catalog, además de item_model.

import 'package:state_management/blocs/catalog/catalog_bloc.dart';
import 'package:state_management/blocs/catalog/catalog_event.dart';
import 'package:state_management/blocs/user/user_bloc.dart';
import 'package:state_management/blocs/user/user_event.dart';
import 'package:state_management/models/item_model.dart';

Al sobre escribir initState() se debe colocar el nuevo código después de super.initState();
Al sobre escribir dispose() se debe colocar el nuevo código antes de super.dispose();

// Instanciar user y catalog bloc
UserBloc _userBloc = UserBloc();
CatalogBloc _catalogBloc = CatalogBloc();

// Sobrescribir `initState` y enviar el evento `GetUsernameEvent` `GetCatalogEvent` para actualizar el nombre y catálogo al cambiar de página.
@override
void initState() {
  super.initState();
  _userBloc.sendEvent.add(GetUsernameEvent());
  _catalogBloc.sendEvent.add(GetCatalogEvent());
}

// Sobrescribir `dispose` para librerar los recursos del BLoC cuando ya no se usen.
@override
void dispose() {
  _userBloc.dispose();
  _catalogBloc.dispose();
  super.dispose();
}

Envolver el ListView widget en un StreamBuilder para actualizar el title y trailing del ListTile.

Expanded(

// En este caso el StreamBuilder es de tipo <List<ItemModel>>
  child: StreamBuilder<List<ItemModel>>(

// Se coloca una Lista vacía como data inicial para evitar errores al momento de hacer snapshot.data.length
    initialData: [],

// Pasar como stream el catalogStream del archivo catalog_bloc
    stream: _catalogBloc.catalogStream,
    builder: (context, snapshot) {
      return ListView.builder(

// snapshot.data.length es para obtener el número de items seleccionado
        itemCount: snapshot.data.length,
        itemBuilder: (context, index) => ListTile(
          title: Text(

// snapshot.data[index].name nombre del producto.
            '${snapshot.data[index].name}'.toUpperCase(),
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          trailing: Text(

// snapshot.data[index].price.toStringAsFixed(2) precio del producto con dos decimales
            '\$${snapshot.data[index].price.toStringAsFixed(2)}',
          ),
        ),
      );
    },
  ),
),

Envolver el Column widget en un StreamBuilder para actualizar el nombre de usuario.

// En este caso el StreamBuilder es de tipo <String>
StreamBuilder<String>(

// Pasar como stream el userStream del archivo user_bloc
  stream: _userBloc.userStream,
  builder: (context, snapshot) {
    return Column(
      children: [
        CircleAvatar(
          child: Text(

// Muestra las iniciales del nombre de usuario
            getInitials('${snapshot.data}').toUpperCase(),
          ),
        ),
        Text(

// Muestra el nombre de usuario
          '${snapshot.data}',
          style: TextStyle(
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
    );
  },
),

Envolver el Text widget en un StreamBuilder para actualizar el precio total de los items seleccionados.

// En este caso el StreamBuilder es de tipo <List<ItemModel>>
StreamBuilder<List<ItemModel>>(

// Se coloca una Lista vacía como data inicial para evitar errores al momento de hacer snapshot.data
  initialData: [],

// Pasar como stream el catalogStream del archivo catalog_bloc
  stream: _catalogBloc.catalogStream,
  builder: (context, snapshot) {
    return Text(

// Muestra el precio total de los items seleccionados
      '\$${formatTotal(snapshot.data)}',
      style: TextStyle(
        fontSize: 20.0,
        fontWeight: FontWeight.bold,
      ),
    );
  },
),

Eso es todo, recuerda que código de esta guía se lo puede encontrar en GitHub.

marcedroid / Flutter-State-Management-Demos

Manejo de estados en Flutter

Guías para una mejor escritura de código Dart

Marcelo Sebastián — Mon, 17 Aug 2020 16:21:32 +0000

Este es un pequeño recopilatorio de las recomendaciones para escribir un mejor código en Dart proporcionado por su equipo de desarrollo.

Puedes ver el listado completo en Effective Dart.

Índice

Guía de estilo
- Convención de nombres
  - UpperCamelCase
  - lowerCamelCase
  - lowercase_with_underscores
- Observaciones
- Orden
- Uso de llaves
Guía de documentación
- Comentarios
- Comentarios de documentación

Guía de estilo

Reglas para diseñar y organizar el código.

Convención de nombres

En Dart utilizaremos estas tres convenciones:

UpperCamelCase la primera letra de cada palabra escrita en mayúscula, incluyendo la primera.
lowerCamelCase la primera letra de cada palabra escrita en mayúscula, excepto la primera.
lowercase_with_underscores solo usar minúsculas, incluyendo acrónimos y separar las palabras por un subguión "_".

UpperCamelCase

Debemos usar esta convención para nombrar:

Classes
Enums
Typedefs
Type parameters
Extensions

// Classes (SliderMenu)
class SliderMenu { ... }

// Enums (Color).
enum Color { red, green, blue }

// Typedefs (Predicate).
typedef Predicate<T> = bool Function(T value);

//Type parameters (T).
abstract class Cache<T> {
  T getByKey(String key);
  void setByKey(String key, T value);
}

// Extensions (MyFancyList).
extension MyFancyList<T> on List<T> { ... }

lowerCamelCase

Debemos usar esta convención para nombrar:

Class members
Functions
Variables
Parameters
Named parameters
Constant/Final names

// Class members (httpRequest).
HttpRequest httpRequest;

// Functions (align).
void align(bool clearItems) {
  // ...
}

// Parameters (clearItems).
void align(bool clearItems) {
  // ...
}

// Named parameters (clearItems).
void align({bool clearItems}) {
  // ...
}

// Constant/Final names (pi, urlScheme).
const pi = 3.14;
final urlScheme = RegExp('^([a-z]+):');

lowercase_with_underscores

Debemos usar esta convención para nombrar:

Libraries
Packages
Directories
Source files
Named import

library peg_parser.source_scanner;

import 'file_system.dart';

// Named import (angular_components).
import 'package:angular_components/angular_components' as angular_components;

Observaciones

Usar mayúsculas en acrónimos y abreviaturas de más de dos letras.

HttpConnectionInfo
uiHandler
IOStream
HttpRequest
Id
DBIOPort
TVVcr

No colocar un subguión antes de un nombre, a menos que el identificador sea privado.

class Person {
  final _name;
  // ...
}

No usar letras de prefijo, como por ejemplo la Notación húngara.

// Bien.
const defaultTimeout;

// Mal.
const kDefaultTimeout;

Orden

Para una mejor legibilidad en el código se recomienda seguir este orden, y cada sección debe estar separada por una línea en blanco.

Colocar los imports de Dart antes que otros.

import 'dart:async';
import 'dart:html';

import 'package:bar/bar.dart';
import 'package:foo/foo.dart';

Colocar los imports de package antes que los imports relativos.

import 'package:bar/bar.dart';
import 'package:foo/foo.dart';

import 'util.dart';

Los exports deben estar en una sección separada después de los imports

import 'src/error.dart';
import 'src/foo_bar.dart';

export 'src/error.dart';

Ordenarlos alfabéticamente

import 'package:bar/bar.dart';
import 'package:foo/foo.dart';

import 'foo.dart';
import 'foo/foo.dart';

Uso de llaves

Uso normal de llaves.

if (isWeekDay) {
  print('Bike to work!');
} else {
  print('Go dancing or read a book!');
}

Se pueden omitir las llaves si tenemos un if sin else y todo cabe en la misma línea.

if (arg == null) return defaultValue;

Sin embargo aunque el return sea una sola línea pero no cabe en la primera se deben usar llaves.

// Bien.
if (overflowChars != other.overflowChars) {
  return overflowChars < other.overflowChars;
}

// Mal.
if (overflowChars != other.overflowChars)
  return overflowChars < other.overflowChars;

Guía de documentación

Reglas para una correcta documentación de clases o funciones, como comentarios normales.

Comentarios

Usar comentarios en forma de oraciones.
La primera palabra debe empezar con mayúscula, a menos de que sea un identificador Case sensitive.
La línea debe terminar con punto ("." "!" "?"), esto se aplica para todo tipo de comentarios.

// Not if there is nothing before it.
if (_chunks.isEmpty) return false;

No usar comentarios en bloque para documentación.

// Bien.
greet(name) {
  // Assume we have a valid name.
  print('Hi, $name!');
}

// Mal.
greet(name) {
  /* Assume we have a valid name. */
  print('Hi, $name!');
}

Comentarios de documentación

Estos comentarios son especiales porque dartdoc los analiza y crea páginas de documentos para ellos.
Un comentario de documento es cualquier comentario que aparece antes de una declaración y utiliza la sintaxis especial /// que busca dartdoc.

/// The number of characters in this chunk when unsplit.
int get length => ...

Se recomienda empezar los comentarios de la documentación con un resumen de una sola oración.

// Bien.
/// Deletes the file at [path] from the file system.
void delete(String path) {
  ...
}

// MAl.
/// Depending on the state of the file system and the user's permissions,
/// certain operations may or may not be possible. If there is no file at
/// [path] or it can't be accessed, this function throws either [IOError]
/// or [PermissionError], respectively. Otherwise, this deletes the file.
void delete(String path) {
  ...
}

Agrega una línea en blanco después de la primera oración para separar el párrafo.

// Bien.
/// Deletes the file at [path].
///
/// Throws an [IOError] if the file could not be found. Throws a
/// [PermissionError] if the file is present but could not be deleted.
void delete(String path) {
  ...
}

// Mal.
/// Deletes the file at [path]. Throws an [IOError] if the file could not
/// be found. Throws a [PermissionError] if the file is present but could
/// not be deleted.
void delete(String path) {
  ...
}

Evita la redundancia.

Intenta comenzar los comentarios de funciones o métodos con verbos en tercera persona.

/// Returns `true` if every element satisfies the [predicate].
bool all(bool predicate(T element)) => ...

/// Starts the stopwatch if not already running.
void start() {
  ...
}

Puedes utilizar Markdown para documentar, por lo cual puedes incluir ejemplos de código en los comentarios del documento.
Sin embargo se recomienda no abusar del Markdown.

Usa corchetes para hacer referencia a identificadores.

/// Throws a [StateError] if ...
/// similar to [anotherMethod()], but ...

/// Similar to [Duration.inDays], but handles fractional days.

/// To create a point, call [Point()] or use [Point.polar()] to ...

Otros lenguajes usan etiquetas para describir cuáles son los parámetros y los return de un método.

La convención en Dart es integrar eso en la descripción del método y resaltar los parámetros usando corchetes.

//Bien.
/// Defines a flag.
///
/// Throws an [ArgumentError] if there is already an option named [name] or
/// there is already an option using abbreviation [abbr]. Returns the new flag.
Flag addFlag(String name, String abbr) => ...

// Mal.
/// Defines a flag with the given name and abbreviation.
///
/// @param name The name of the flag.
/// @param abbr The abbreviation for the flag.
/// @returns The new flag.
/// @throws ArgumentError If there is already an option with
///     the given name or abbreviation.
Flag addFlag(String name, String abbr) => ...

Evita el uso de abreviaciones.

Prefiere utilizar "this" en lugar de "the" para referirse a instancias.

class Box {
  /// The value this wraps.
  var _value;

  /// True if this box contains a value.
  bool get hasValue => _value != null;
}