Riverpod: ProviderScope

جزء من قسم إدارة الحالة في رحلة Flutter على Coddy. الدرس 16 من 27.

Riverpod حزمة أخرى للحالة المشتركة، كتبها الشخص نفسه الذي كتب Provider، مستفيدًا من بعض الدروس المستخلصة. وأكبر تغيير فيها هو أن المزوّد ليس عنصر واجهة مستخدم في شجرة العناصر. بل هو متغيّر final في أعلى الملف، خارج جميع الأصناف:

import 'package:flutter_riverpod/flutter_riverpod.dart';

final quoteProvider = Provider((ref) => 'Small steps, every day.');

تمنح الدالة المزوّد قيمته. يستدعيها Riverpod في المرة الأولى التي يطلب فيها عنصر واجهة مستخدم القيمة، ويحتفظ بالنتيجة.

يجب الاحتفاظ بالقيم في مكان ما، وهذه هي مهمة ProviderScope. يُضاف مرة واحدة حول التطبيق بأكمله، في main:

void main() {
  runApp(const ProviderScope(child: MyApp()));
}

يقرأ عنصر واجهة المستخدم المزوّد من خلال ref. وConsumerWidget هو StatelessWidget يحصل أسلوب build فيه على مرجع: ref.watch(quoteProvider). إذا لم يكن هناك ProviderScope فوقه، فلن يجد هذا السطر مكانًا يبحث فيه، وسيتوقف التطبيق مع ظهور No ProviderScope found.

التحدي

سهل

يتوقف التطبيق مع ظهور No ProviderScope found.

أحِط MyApp بـ ProviderScope في main.
غيّر الاقتباس إلى Small steps, every day..

جرّب بنفسك

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

final appNameProvider = Provider((ref) => 'Daily Quote');
final quoteProvider = Provider((ref) => 'Write your quote here.');

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends ConsumerWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final appName = ref.watch(appNameProvider);
    final quote = ref.watch(quoteProvider);
    return Scaffold(
      appBar: AppBar(title: Text(appName)),
      body: Center(
        child: Text(quote, style: const TextStyle(fontSize: 24)),
      ),
    );
  }
}