Riverpod: ProviderScope

Fa parte della sezione Gestione dello stato del percorso Flutter di Coddy. Lezione 16 di 27.

Riverpod è un altro pacchetto per lo stato condiviso, scritto dalla stessa persona che ha creato Provider, con alcune lezioni imparate. Il cambiamento più importante: un provider non è un widget nell'albero. È una variabile final all'inizio del file, al di fuori di ogni classe:

import 'package:flutter_riverpod/flutter_riverpod.dart';

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

La funzione fornisce il proprio valore al provider. Riverpod la richiama la prima volta che un widget lo richiede e conserva il risultato.

I valori devono essere conservati da qualche parte, e questo è il compito di ProviderScope. Va inserito una sola volta, attorno all'intera app, in main:

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

Un widget legge un provider tramite un ref. Un ConsumerWidget è un StatelessWidget il cui build riceve un ref: ref.watch(quoteProvider). Senza un ProviderScope al di sopra, quella riga non ha dove cercare e l'app si arresta con No ProviderScope found.

Sfida

Facile

L'app si interrompe con No ProviderScope found.

Avvolgi MyApp in un ProviderScope in main.
Modifica la citazione in Small steps, every day.

Provalo tu

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