Riverpod: ProviderScope

Termasuk bagian Pengelolaan State dalam perjalanan Flutter di Coddy. Pelajaran 16 dari 27.

Riverpod adalah package lain untuk state bersama, ditulis oleh orang yang sama dengan Provider, dengan beberapa pelajaran yang didapat. Perubahan terbesarnya: provider bukan widget di dalam tree. Provider adalah variabel final di bagian atas file, di luar semua class:

import 'package:flutter_riverpod/flutter_riverpod.dart';

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

Fungsi ini memberikan nilai kepada provider. Riverpod memanggilnya saat pertama kali sebuah widget memintanya, lalu menyimpan hasilnya.

Nilai-nilai itu harus disimpan di suatu tempat, dan itulah tugas ProviderScope. Letakkan sekali, mengelilingi seluruh app, di dalam main:

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

Sebuah widget membaca provider melalui ref. ConsumerWidget adalah StatelessWidget yang build-nya menerima satu: ref.watch(quoteProvider). Tanpa ProviderScope di atasnya, baris itu tidak punya tempat untuk mencari, dan app berhenti dengan No ProviderScope found.

Tantangan

Mudah

Aplikasi berhenti karena No ProviderScope found.

Bungkus MyApp dengan ProviderScope di dalam main.
Ubah kutipannya menjadi Small steps, every day.

Coba sendiri

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

Uji dirimu

Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.

Semua pelajaran di Pengelolaan State

Latihan sendiri: Compiler Flutter online