Riverpod: ProviderScope

Часть раздела Управление состоянием путешествия по Flutter на Coddy. Урок 16 из 27.

Riverpod — ещё один пакет для общего состояния, написанный тем же человеком, что и Provider, с учётом некоторых извлечённых уроков. Главное отличие: провайдер не является виджетом в дереве. Это переменная final в начале файла, вне всех классов:

import 'package:flutter_riverpod/flutter_riverpod.dart';

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

Функция задаёт значение провайдера. Riverpod вызывает её, когда виджет впервые запрашивает это значение, и сохраняет результат.

Значения нужно где-то хранить, и за это отвечает ProviderScope. Он добавляется один раз вокруг всего приложения, в main:

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

Виджет читает значение провайдера через ref. ConsumerWidget — это StatelessWidget, у которого в методе build есть такой объект: ref.watch(quoteProvider). Если над ним нет ProviderScope, этой строке неоткуда получить значение, и приложение остановится с ошибкой No ProviderScope found.

Задание

Легко

Приложение останавливается с сообщением No ProviderScope found.

Оберни MyApp в ProviderScope в main.
Измени цитату на Small steps, every day.

Попробуйте сами

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