Riverpod: ProviderScope

Coddy'nin Flutter Journey'sinin Durum Yönetimi bölümünün bir parçası. Ders 16 / 27.

Riverpod, bazı dersler çıkaran ve Provider'ı geliştiren kişi tarafından yazılmış, paylaşılan durum yönetimi için başka bir pakettir. En büyük değişikliği şudur: sağlayıcı, ağaçta bir widget değildir. Dosyanın en üstünde, tüm sınıfların dışında bulunan bir final değişkenidir:

import 'package:flutter_riverpod/flutter_riverpod.dart';

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

İşlev, sağlayıcıya değerini verir. Riverpod, bir widget ilk kez değer istediğinde bu işlevi çağırır ve sonucu saklar.

Değerlerin bir yerde saklanması gerekir; bu da ProviderScope'un görevidir. main içinde, tüm uygulamanın çevresine bir kez eklenir:

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

Bir widget, sağlayıcıyı ref aracılığıyla okur. ConsumerWidget, build işlevine bir ref verilen bir StatelessWidget'tır: ref.watch(quoteProvider). Üstünde bir ProviderScope yoksa bu satırın bakacak yeri olmaz ve uygulama No ProviderScope found hatasıyla durur.

Görev

Kolay

Uygulama No ProviderScope found hatasıyla duruyor.

main içinde MyApp'i bir ProviderScope ile sar.
Alıntıyı Small steps, every day. olarak değiştir.

Kendin dene

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