Trabajar con proveedores: parte 1. Introducción a los proveedores en… | de Stefano Alvares | Dev Genius | Noviembre de 2020

En este artículo, cubriremos los proveedores y la administración estatal en Flutter.

El paquete del proveedor es un envoltorio de InheritedWIdget que se utiliza para la gestión del estado. Con el proveedor podemos colocar un objeto de estado en el árbol de widgets y hacerlo accesible desde cualquier otro widget descendiente. El proveedor también ayuda a administrar la vida útil de los objetos de estado al inicializarlos con datos y limpiarlos después de que se eliminen del árbol de widgets. El proveedor también se puede utilizar para implementar componentes BLoC o servir como base para otras soluciones de gestión de la salud. O puede usarse simplemente para inyección de dependencia, que es un término caprichoso para pasar datos a widgets.

Agregar el complemento

Comencemos agregando el complemento del proveedor a nuestro proyecto de flutter.

Vaya a su archivo pubspec.yaml y busque el archivo cupertino_icons conectar. A continuación, puede agregar los complementos que necesite para su aplicación. Así que sigamos adelante y agreguemos el paquete del proveedor aquí mismo.

cupertino_icons: ^1.0.0
provider: ^4.3.2+2

Una vez hecho esto, ejecute el comando pub get. Si está utilizando Android Studio, verá la opción Obtener Pub en la esquina superior derecha. Si está utilizando VS Code, el comando se ejecuta automáticamente si guarda el archivo.

Agregar un ChangeNotifier

Ahora que hemos agregado el paquete de proveedores a nuestro proyecto, sigamos adelante y usémoslo. Antes de comenzar a usar los datos, debe implementar un ChangeNotifier. Esto le dice a todos los widgets que consumen datos cuando se ha agregado, actualizado o eliminado algo de nuestra lista de contactos.

Creamos una nueva carpeta en lib llamada proveedor y dentro de ella creamos un archivo llamado contact-provider.dart.

import '../model/contact.dart';
import 'package:flutter/material.dart';

class ContactProvider extends ChangeNotifier {
List<Contact> _contactList = [];

List<Contact> get contacts {
return [..._contactList];
}

set contacts(List<Contact> newContacts) {
_contactList = newContacts;
notifyListeners();
}

void addContact(Contact newContact) {
_contactList.add(newContact);
notifyListeners();
}

void removeContact(int index) {
_contactList.removeAt(index);
notifyListeners();
}
}

Entendamos qué está pasando aquí.

Para empezar, creemos nuestro propio Proveedor de contacto clase y haz que extienda el ChangeNotifier. Esto nos da acceso al archivo. notificarListeners () método que usaremos para actualizar los datos en nuestra aplicación.

Tenemos una lista de contactos privada _contactList a la que se puede acceder usando un getter y un setter. Diferente a lo que tenemos agregar contacto () es Remover contacto () métodos que se explican por sí mismos. En cada uno de estos métodos verá que usamos el notificarListeners () método que actualizará los widgets cada vez que se agregue o elimine un contacto.

Una vez hecho esto, vayamos a nuestro archivo main.dart y envolvemos nuestra MaterialApp en un archivo MultiProvider () artilugio. en MultiProvider declaramos una lista de todos nuestros proveedores que deseamos utilizar dentro de la aplicación.

Así es como debería verse nuestro archivo main.dart:

import 'package:contacts_app/provider/contact-provider.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'contacts-page.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider.value(value: ContactProvider()),
],
child: MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.purple,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: ContactsPage(),
),
);
}
}

Usando el proveedor

Ahora que tenemos nuestra configuración de escucha de cambios, volvamos al archivo contact-page.dart. Editemos el archivo _getContacts () método para actualizar el proveedor cuando obtengamos la lista de contactos.

void _getContacts() async {
await Future.delayed(Duration(milliseconds: 200));
ContactProvider contactProvider = Provider.of<ContactProvider>(context, listen: false);
contactProvider.contacts = dummyData;
}

Inicializamos nuestro proveedor y actualizamos nuestros contactos en el proveedor. Tenga en cuenta que cuando esté inicializando su proveedor, establezca el parámetro listen en false. Utiliza el proveedor simplemente para acceder a sus datos, no para escuchar cambios.

Ahora que tenemos los datos, lo siguiente que debemos hacer es consumir esos datos en nuestro ListView. Lo hacemos en _buildListView () método.

Widget _buildListView() {
return Consumer<ContactProvider>(
builder: (__, model, _) {
return ListView.builder(
itemBuilder: (_, index) {
return ContactCard(model.contacts[index]);
},
itemCount: model.contacts.length,
);
},
);
}

Envolvemos nuestro ListView en un archivo Consumidor () widget donde el tipo es nuestro ContactProvider. La función del constructor de consumidores nos proporciona un contexto, un modelo y variables secundarias. Dado que no necesitamos variables conext o secundarias, las inicializamos como variables de desperdicio. Nuestra principal área de interés es el modelo. Esto nos da los contactos que usamos para llenar nuestro ListView. Puede ver la interfaz de usuario de nuestra lista de contactos a continuación.

Interfaz de usuario de la lista de contactos

Envolver

En este artículo, hemos analizado cómo utilizar Provider, Consumer y algunos ChangeNotifiers. Lo usamos para crear nuestra aplicación de contactos. En el próximo artículo veremos cómo agregar un nuevo contacto, actualizar un contacto existente y eliminar contactos de nuestra lista de contactos.

Como siempre, si te gustó, avísame aplaudiendo y en los comentarios. Además, siéntase libre de comentar sobre los temas que le gustaría que cubriera en mis próximos artículos. Hasta entonces, ¡feliz programación!

Puedes consultar el código completo aquí:

Recursos:

  1. Gestión sencilla del estado de la aplicación
  2. Una mirada más cercana al paquete de proveedores
  3. Dar sentido a todos esos proveedores de flutter

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *