Riverpod: ProviderScope

Część sekcji Zarządzanie stanem ścieżki Flutter w Coddy. Lekcja 16 z 27.

Riverpod to kolejny pakiet do zarządzania współdzielonym stanem, stworzony przez tę samą osobę co Provider, która wykorzystała zdobyte doświadczenie. Największa zmiana: provider nie jest widgetem w drzewie. To zmienna final na początku pliku, poza wszystkimi klasami:

import 'package:flutter_riverpod/flutter_riverpod.dart';

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

Funkcja nadaje providerowi jego wartość. Riverpod wywołuje ją, gdy widget po raz pierwszy o nią poprosi, i zachowuje wynik.

Wartości trzeba gdzieś przechowywać i tym właśnie zajmuje się ProviderScope. Dodaje się go raz, wokół całej aplikacji, w main:

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

Widget odczytuje provider za pomocą ref. ConsumerWidget to StatelessWidget, którego metoda build otrzymuje ref: ref.watch(quoteProvider). Jeśli nad nim nie ma ProviderScope, ta linia nie ma skąd odczytać wartości, a działanie aplikacji zostaje przerwane z komunikatem No ProviderScope found.

Wyzwanie

Łatwy

Aplikacja zatrzymuje działanie z komunikatem No ProviderScope found.

Owiń MyApp w ProviderScope w main.
Zmień cytat na Small steps, every day.

Spróbuj swoich sił

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