Introducción a Riverpod

Riverpod es una biblioteca de gestión de estado para Flutter que se basa en Provider, pero con mejoras significativas en términos de seguridad, flexibilidad y simplicidad. A diferencia de Provider, Riverpod no depende del contexto de Flutter, lo que facilita la prueba y la reutilización del código.

Ventajas de Riverpod

Independencia del Contexto: No necesita el BuildContext para funcionar.
Seguridad de Tipo: Proporciona una mejor seguridad de tipo en comparación con Provider.
Reutilización de Código: Facilita la reutilización de lógica de negocio en diferentes partes de la aplicación.
Pruebas: Simplifica la creación de pruebas unitarias y de integración.

Instalación de Riverpod

Para comenzar a usar Riverpod, primero debes agregar la dependencia en tu archivo pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^1.0.0

Luego, ejecuta flutter pub get para instalar la dependencia.

Conceptos Básicos de Riverpod

Providers

En Riverpod, un Provider es una forma de exponer un valor a la aplicación. Hay varios tipos de providers, pero los más comunes son:

Provider: Proporciona un valor inmutable.
StateProvider: Proporciona un valor mutable.
FutureProvider: Proporciona un valor que se resuelve en el futuro.
StreamProvider: Proporciona un valor que se emite a través de un stream.

Ejemplo Básico

A continuación, se muestra un ejemplo básico de cómo usar Riverpod para gestionar el estado de un contador.

Paso 1: Definir el Provider

import 'package:flutter_riverpod/flutter_riverpod.dart';

// Definimos un StateProvider para un contador
final counterProvider = StateProvider<int>((ref) => 0);

Paso 2: Consumir el Provider en un Widget

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

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterScreen(),
    );
  }
}

class CounterScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final counter = watch(counterProvider).state;

    return Scaffold(
      appBar: AppBar(
        title: Text('Riverpod Counter'),
      ),
      body: Center(
        child: Text(
          '$counter',
          style: TextStyle(fontSize: 40),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          context.read(counterProvider).state++;
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

Explicación del Código

Definición del Provider: Creamos un StateProvider que inicializa el contador en 0.
ProviderScope: Envolvemos nuestra aplicación con ProviderScope para habilitar el uso de Riverpod.
ConsumerWidget: Usamos ConsumerWidget para consumir el provider. ScopedReader se utiliza para leer el valor del provider.
Actualización del Estado: Utilizamos context.read(counterProvider).state++ para incrementar el valor del contador.

Ejercicio Práctico

Ejercicio 1: Contador Decremental

Modifica el ejemplo anterior para que el contador también pueda decrementar.

Solución

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

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterScreen(),
    );
  }
}

class CounterScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final counter = watch(counterProvider).state;

    return Scaffold(
      appBar: AppBar(
        title: Text('Riverpod Counter'),
      ),
      body: Center(
        child: Text(
          '$counter',
          style: TextStyle(fontSize: 40),
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: () {
              context.read(counterProvider).state++;
            },
            child: Icon(Icons.add),
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () {
              context.read(counterProvider).state--;
            },
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

Retroalimentación y Consejos

Error Común: Olvidar envolver la aplicación con ProviderScope. Esto es esencial para que Riverpod funcione.
Consejo: Usa ConsumerWidget en lugar de Consumer cuando sea posible, ya que es más limpio y fácil de leer.

Conclusión

En esta sección, hemos aprendido los conceptos básicos de Riverpod y cómo usarlo para gestionar el estado en una aplicación Flutter. Riverpod ofrece una forma más segura y flexible de manejar el estado en comparación con Provider. En el próximo módulo, exploraremos cómo navegar y enrutar en Flutter.

Riverpod

Introducción a Riverpod

Ventajas de Riverpod

Instalación de Riverpod

Conceptos Básicos de Riverpod

Providers

Ejemplo Básico

Paso 1: Definir el Provider

Paso 2: Consumir el Provider en un Widget

Explicación del Código

Ejercicio Práctico

Ejercicio 1: Contador Decremental

Solución

Retroalimentación y Consejos

Conclusión

Curso de Desarrollo con Flutter

Módulo 1: Introducción a Flutter

Módulo 2: Conceptos Básicos de Programación en Dart

Módulo 3: Widgets en Flutter

Módulo 4: Gestión de Estado

Módulo 5: Navegación y Enrutamiento

Módulo 6: Redes y APIs

Módulo 7: Persistencia y Almacenamiento

Módulo 8: Conceptos Avanzados de Flutter

Módulo 9: Pruebas y Depuración

Módulo 10: Despliegue y Mantenimiento

Módulo 11: Flutter para Web y Escritorio