Riverpod: ProviderScope

Parte da seção Gerenciamento de estado do Journey de Flutter da Coddy. Lição 16 de 27.

Riverpod é outro pacote para estado compartilhado, escrito pela mesma pessoa que criou o Provider, com algumas lições aprendidas. Sua maior mudança: um provedor não é um widget na árvore. É uma variável final no início do arquivo, fora de todas as classes:

import 'package:flutter_riverpod/flutter_riverpod.dart';

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

A função fornece o valor do provedor. O Riverpod a chama na primeira vez que um widget solicita o valor e mantém o resultado.

Os valores precisam ser mantidos em algum lugar, e essa é a função de ProviderScope. Ele é colocado uma vez ao redor do app inteiro, em main:

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

Um widget lê um provedor por meio de um ref. Um ConsumerWidget é um StatelessWidget cujo build recebe um: ref.watch(quoteProvider). Sem um ProviderScope acima dele, essa linha não tem onde procurar, e o app para com No ProviderScope found.

Desafio

Fácil

O app é interrompido com No ProviderScope found.

Envolva MyApp em um ProviderScope em main.
Altere a frase para Small steps, every day.

Experimente você mesmo

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)),
      ),
    );
  }
}