Saltar al contenido principal

Empezando

Antes de sumergirnos en los mecanismos internos de Riverpod, comencemos con lo básico: instalar Riverpod y luego escribir un "Hello world".

Qué paquete instalar

Antes que nada, debes tener en cuenta que Riverpod se distribuye en varios paquetes con un uso ligeramente diferente. La variante de Riverpod a instalar depende de la aplicación que estás desarrollando.

Puedes consultar la siguiente tabla para decidir qué paquete usar:

Tipo de aplicaciónNombre del paqueteDescripción
Flutter + flutter_hookshooks_riverpodPermite usar flutter_hooks y Riverpod juntos.
Solo Flutterflutter_riverpodUna forma básica de usar Riverpod para aplicaciones Flutter.
Solo Dart (Sin Flutter)riverpodRiverpod sin todas las clases dependientes de Flutter.

Instalación

Una vez que sepas qué paquete deseas instalar, procede a añadir lo siguiente a tu pubspec.yaml:

pubspec.yaml
environment:
sdk: ">=2.12.0 <3.0.0"
flutter: ">=2.0.0"

dependencies:
flutter:
sdk: flutter
flutter_hooks: ^0.18.0
hooks_riverpod: ^2.0.0-dev.9

Luego ejecuta flutter pub get.

Eso es todo. ¡Lograste añadir Riverpod a tu aplicación!

Ejemplo de uso: Hello world

Ahora que hemos instalado Riverpod, podemos comenzar a usarlo.

Los siguientes fragmentos de código muestran cómo usar nuestra nueva dependencia para crear un "Hello world":

lib/main.dart
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

// Creamos un "provider", el cual almacenará un valor (en este caso "Hello world").
// El usar un provider nos permitirá simular/sobrescribir el valor expuesto.
final helloWorldProvider = Provider((_) => 'Hello world');

void main() {
runApp(
// Para que los widgets puedan leer los providers, necesitamos envolver
// toda la aplicación en un `ProviderScope`.
// Aquí es donde se almacenará el estado de nuestros providers.
ProviderScope(
child: MyApp(),
),
);
}

// Nota: MyApp es un HookConsumerWidget de flutter_hooks.
class MyApp extends HookConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final String value = ref.watch(helloWorldProvider);

return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Example')),
body: Center(
child: Text(value),
),
),
);
}
}

Que luego puedes ejecutar con flutter run. Esto mostrará un "Hello world" en tu dispositivo.

Mejora tu productividad: Instala los atajos de código

Si usas Flutter y VS Code, considera usar Flutter Riverpod Snippets.

Si usas Flutter y Android Studio o IntelliJ, considera usar Flutter Riverpod Snippets.

img