ConsumerWidget und ref.watch

Teil des Abschnitts State Management der Flutter-Journey von Coddy. Lektion 17 von 27.

Jedes Widget kann einen Provider lesen, sobald es ein ref erhalten kann. Damit es eines erhält, musst du zwei Dinge ändern:

Aus extends StatelessWidget wird extends ConsumerWidget.
build erhält einen zweiten Parameter, 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) liefert dir den Wert des Providers, hier den Text Lisbon, und baut das Widget erneut, sobald sich dieser Wert ändert. Ohne ref.watch ist cityProvider nur der Provider selbst, nicht sein Wert.

Jedes Widget, das einen Wert benötigt, fragt ihn auf diese Weise ab, ganz gleich, wo es sich befindet. Nichts wird über Konstruktoren weitergegeben, und nichts benötigt context, um den Wert zu finden.

Aufgabe

Einfach

CityName und Temperature zeigen Platzhalter an. Lass sie die Provider oben in der Datei lesen:

Wandle beide in ConsumerWidgets um.
CityName zeigt den Wert von cityProvider an.
Temperature zeigt den Wert von temperatureProvider gefolgt von °C in derselben Größe an.

Probier es selbst

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