ConsumerWidget и ref.watch

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

Любой виджет может прочитать значение провайдера, если у него есть ref. Чтобы передать его, измените две вещи:

extends StatelessWidget заменяется на extends ConsumerWidget.
В build добавляется второй параметр — WidgetRef ref.

class CityName extends ConsumerWidget {
  const CityName({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final city = ref.watch(cityProvider);
    return Text(city);
  }
}

ref.watch(cityProvider) возвращает значение провайдера — в данном случае текст Lisbon — и повторно строит виджет при каждом изменении этого значения. Без ref.watch cityProvider — это только сам провайдер, а не его значение.

Каждый виджет, которому нужно значение, запрашивает его таким образом, где бы он ни находился. Ничего не передаётся через конструкторы, и для поиска значения не нужен context.

Задание

Легко

CityName и Temperature показывают заглушки. Сделайте так, чтобы они читали провайдеры в начале файла:

Преобразуйте оба виджета в ConsumerWidget.
CityName отображает значение cityProvider.
Temperature отображает значение temperatureProvider, за которым следует °C, и сохраняет тот же размер.

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

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

final cityProvider = Provider((ref) => 'Lisbon');
final temperatureProvider = Provider((ref) => 21);

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const CityName()),
        body: const Center(child: Temperature()),
      ),
    );
  }
}

class CityName extends StatelessWidget {
  const CityName({super.key});

  @override
  Widget build(BuildContext context) {
    return const Text('City');
  }
}

class Temperature extends StatelessWidget {
  const Temperature({super.key});

  @override
  Widget build(BuildContext context) {
    return const Text('0°C', style: TextStyle(fontSize: 64));
  }
}