ConsumerWidget i ref.watch

Część sekcji Zarządzanie stanem ścieżki Flutter w Coddy. Lekcja 17 z 27.

Każdy widżet może odczytać provider, gdy tylko uzyska dostęp do ref. Aby mu go przekazać, zmień dwie rzeczy:

extends StatelessWidget zmienia się w extends ConsumerWidget.
build otrzymuje drugi parametr, 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) zwraca wartość providera — w tym przypadku tekst Lisbon — i ponownie buduje widżet za każdym razem, gdy ta wartość się zmienia. Bez ref.watch cityProvider oznacza tylko sam provider, a nie jego wartość.

Każdy widżet, który potrzebuje jakiejś wartości, pobiera ją w ten sposób, niezależnie od tego, gdzie się znajduje. Nic nie jest przekazywane dalej przez konstruktory i nie trzeba używać context, aby znaleźć tę wartość.

Wyzwanie

Łatwy

CityName i Temperature wyświetlają placeholdery. Zadbaj o to, aby korzystały z providerów na początku pliku:

Zamień oba w ConsumerWidget.
CityName wyświetla wartość cityProvider.
Temperature wyświetla wartość temperatureProvider, po której następuje °C, w tym samym rozmiarze.

Spróbuj swoich sił

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