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