Riverpod: ProviderScope

Teil des Abschnitts State Management der Flutter-Journey von Coddy. Lektion 16 von 27.

Riverpod ist ein weiteres Paket für gemeinsam genutzten Zustand, das von derselben Person wie Provider geschrieben wurde und einige Erkenntnisse aus den Erfahrungen berücksichtigt. Die größte Änderung: Ein Provider ist kein Widget im Widget-Baum. Er ist eine final-Variable am Anfang der Datei, außerhalb jeder Klasse:

import 'package:flutter_riverpod/flutter_riverpod.dart';

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

Die Funktion legt den Wert des Providers fest. Riverpod ruft sie auf, sobald ein Widget zum ersten Mal danach fragt, und behält das Ergebnis bei.

Die Werte müssen irgendwo gespeichert werden, und dafür ist ProviderScope zuständig. Es wird einmal um die gesamte App herum in main platziert:

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

Ein Widget liest einen Provider über ein ref aus. Ein ConsumerWidget ist ein StatelessWidget, dessen build ein solches erhält: ref.watch(quoteProvider). Ohne einen darüberliegenden ProviderScope gibt es für diese Zeile keinen Ort zum Nachsehen, und die App wird mit No ProviderScope found beendet.

Aufgabe

Einfach

Die App wird mit No ProviderScope found beendet.

Umschließe MyApp in main mit einem ProviderScope.
Ändere das Zitat in Small steps, every day..

Probier es selbst

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