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