ConsumerWidget e ref.watch

Parte da seção Gerenciamento de estado do Journey de Flutter da Coddy. Lição 17 de 27.

Qualquer widget pode ler um provider quando consegue obter um ref. Para fornecê-lo, altere duas coisas:

extends StatelessWidget passa a ser extends ConsumerWidget.
build recebe um segundo parâmetro, 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) fornece o valor do provider, neste caso o texto Lisbon, e reconstrói o widget sempre que esse valor muda. Sem ref.watch, cityProvider é apenas o próprio provider, não o valor dele.

Cada widget que precisa de um valor solicita-o dessa forma, onde quer que esteja. Nada é passado pelos construtores, e nada precisa de context para encontrá-lo.

Desafio

Fácil

CityName e Temperature exibem marcadores provisórios. Faça com que leiam os provedores no início do arquivo:

Transforme ambos em widgets ConsumerWidget.
CityName exibe o valor de cityProvider.
Temperature exibe o valor de temperatureProvider seguido de °C, no mesmo tamanho.

Experimente você mesmo

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