Riverpod: StateProvider

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

Provider menyimpan nilai yang tidak pernah berubah. Untuk satu nilai sederhana yang bisa berubah, seperti angka, bool, atau String, gunakan StateProvider:

final quantityProvider = StateProvider((ref) => 1);

Baca nilainya dengan cara yang sama: ref.watch(quantityProvider) memberikan angka tersebut, dan widget akan dibangun ulang saat nilainya berubah.

Untuk mengubahnya, ambil notifier-nya, yaitu object yang menyimpan nilai tersebut, dengan ref.read, lalu atur state-nya:

onPressed: () {
  ref.read(quantityProvider.notifier).state++;
},

Seperti pada Provider, gunakan ref.watch di build untuk menampilkan nilai dan ref.read di callback untuk mengubahnya. Menambah nilai pada salinan tidak mengubah apa pun: var n = ref.read(quantityProvider); n++; menambah 1 pada n, bukan pada provider. Hanya mengatur state yang akan mengubahnya.

Tantangan

Mudah

Pesanan pancake menampilkan jumlahnya, tetapi tombolnya belum melakukan apa pun.

Tombol plus menambahkan 1 ke quantityProvider.
Tombol minus mengurangi 1, tetapi jumlahnya tidak pernah kurang dari 1.

Coba sendiri

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

final quantityProvider = StateProvider((ref) => 1);

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

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

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

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final quantity = ref.watch(quantityProvider);
    return Scaffold(
      appBar: AppBar(title: const Text('Pancakes')),
      body: Center(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            IconButton(
              icon: const Icon(Icons.remove),
              onPressed: () {},
            ),
            Text('Quantity: $quantity', style: const TextStyle(fontSize: 24)),
            IconButton(
              icon: const Icon(Icons.add),
              onPressed: () {},
            ),
          ],
        ),
      ),
    );
  }
}

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