ConsumerWidget ו־ref.watch

חלק מהיחידה ניהול מצב במסלול ה-Flutter של Coddy. שיעור 17 מתוך 27.

כל יישומון יכול לקרוא ספק ברגע שהוא יכול לקבל ref. כדי לתת לו אחד, משנים שני דברים:

extends StatelessWidget הופך ל־extends ConsumerWidget.
הפרמטר השני של build הוא 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) מחזיר לך את הערך של הספק, במקרה הזה את הטקסט Lisbon, ובונה מחדש את היישומון בכל פעם שהערך משתנה. בלי ref.watch, cityProvider הוא הספק עצמו בלבד, ולא הערך שלו.

כל יישומון שזקוק לערך מבקש אותו כך, בכל מקום שבו הוא נמצא. שום דבר לא מועבר הלאה דרך בנאים, ושום דבר לא זקוק ל־context כדי למצוא אותו.

אתגר

קל

CityName ו-Temperature מציגים מצייני מיקום. יש לגרום להם לקרוא את הספקים שבראש הקובץ:

הפכו את שניהם ל-ConsumerWidget.
CityName מציג את הערך של cityProvider.
Temperature מציג את הערך של temperatureProvider ואחריו °C, באותו גודל.

נסו בעצמכם

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