ConsumerWidget e ref.watch

Fa parte della sezione Gestione dello stato del percorso Flutter di Coddy. Lezione 17 di 27.

Qualsiasi widget può leggere un provider una volta ottenuto un ref. Per fornirglielo, modifica due cose:

extends StatelessWidget diventa extends ConsumerWidget.
build riceve un secondo parametro, 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) ti fornisce il valore del provider, in questo caso il testo Lisbon, e ricostruisce il widget ogni volta che quel valore cambia. Senza ref.watch, cityProvider è solo il provider in sé, non il suo valore.

Ogni widget che ha bisogno di un valore lo richiede in questo modo, ovunque si trovi. Non viene passato nulla tramite i costruttori e non serve context per trovarlo.

Sfida

Facile

CityName e Temperature mostrano dei segnaposto. Fai in modo che leggano i provider all'inizio del file:

Trasforma entrambi in ConsumerWidget.
CityName mostra il valore di cityProvider.
Temperature mostra il valore di temperatureProvider seguito da °C, mantenendo la stessa dimensione.

Provalo tu

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