Riverpod: ProviderScope

Parte de la sección Gestión del estado del Journey de Flutter de Coddy. Lección 16 de 27.

Riverpod es otro paquete para el estado compartido, escrito por la misma persona que Provider, con algunas lecciones aprendidas. Su mayor cambio: un proveedor no es un widget del árbol. Es una variable final al principio del archivo, fuera de todas las clases:

import 'package:flutter_riverpod/flutter_riverpod.dart';

final quoteProvider = Provider((ref) => 'Small steps, every day.');

La función le da su valor al proveedor. Riverpod la llama la primera vez que un widget lo solicita y conserva el resultado.

Los valores deben guardarse en algún lugar, y esa es la función de ProviderScope. Se coloca una vez alrededor de toda la aplicación, en main:

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

Un widget lee un proveedor mediante un ref. Un ConsumerWidget es un StatelessWidget cuyo build recibe uno: ref.watch(quoteProvider). Si no hay un ProviderScope por encima, esa línea no tiene dónde buscar y la aplicación se detiene con No ProviderScope found.

Desafío

Fácil

La aplicación se detiene con No ProviderScope found.

Envuelve MyApp en un ProviderScope en main.
Cambia la cita por Small steps, every day.

Pruébalo tú mismo

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

final appNameProvider = Provider((ref) => 'Daily Quote');
final quoteProvider = Provider((ref) => 'Write your quote here.');

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends ConsumerWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final appName = ref.watch(appNameProvider);
    final quote = ref.watch(quoteProvider);
    return Scaffold(
      appBar: AppBar(title: Text(appName)),
      body: Center(
        child: Text(quote, style: const TextStyle(fontSize: 24)),
      ),
    );
  }
}