ConsumerWidget y ref.watch

Parte de la sección Gestión del estado del Journey de Flutter de Coddy. Lección 17 de 27.

Cualquier widget puede leer un proveedor cuando puede obtener un ref. Para proporcionárselo, cambia dos cosas:

extends StatelessWidget se convierte en extends ConsumerWidget.
build recibe un 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) te proporciona el valor del proveedor, aquí el texto Lisbon, y vuelve a construir el widget cada vez que cambia ese valor. Sin ref.watch, cityProvider es solo el proveedor en sí, no su valor.

Cada widget que necesita un valor lo solicita de esta manera, esté donde esté. No se pasa nada mediante constructores, y no hace falta context para encontrarlo.

Desafío

Fácil

CityName y Temperature muestran marcadores de posición. Haz que lean los proveedores de la parte superior del archivo:

Convierte ambos en elementos ConsumerWidget.
CityName muestra el valor de cityProvider.
Temperature muestra el valor de temperatureProvider seguido de °C, con el mismo tamaño.

Pruébalo tú mismo

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