Riverpod: Notifier

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

StateProvider cocok untuk satu angka. Jika state memiliki aturan, misalnya list dengan method untuk menambahkan dan menghapus, tulis Notifier: class yang menyimpan state dan method yang mengubahnya.

class GuestList extends Notifier<List<String>> {
  @override
  List<String> build() => [];

  void add(String name) {
    state = [...state, name];
  }
}

final guestsProvider =
    NotifierProvider<GuestList, List<String>>(GuestList.new);

build mengembalikan state pertama, yaitu list kosong. Di dalam class, state adalah nilai saat ini. GuestList.new adalah constructor class yang diberikan kepada provider agar dapat membuat notifier.

Aturan utamanya: berikan nilai baru kepada state, jangan pernah mengubah nilai lama. Riverpod memberi tahu widget hanya ketika state diatur ke object yang berbeda. state.add(name) mengubah list secara langsung, sehingga state tetap merupakan list yang sama dan tidak ada yang mengetahuinya. [...state, name] membuat list baru: tiga titik menyebarkan setiap nama lama ke dalamnya, lalu nama baru ditambahkan di bagian akhir.

Widget memanggil method melalui notifier: ref.read(guestsProvider.notifier).add('Ada'). Halaman ini adalah ConsumerStatefulWidget, jenis yang memiliki state, karena halaman ini juga menyimpan text controller. State-nya memiliki ref sebagai field.

Tantangan

Sulit

Daftar tamu menampilkan nama-nama di guestsProvider, tetapi Add hanya mengosongkan kolom.

Tambahkan method add(String name) ke GuestList yang mengatur state ke list baru dengan nama tersebut di bagian akhir.
Buat Add memanggilnya dengan teks dari kolom, sebelum mengosongkan kolom.

Coba sendiri

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

class GuestList extends Notifier<List<String>> {
  @override
  List<String> build() => [];
}

final guestsProvider = NotifierProvider<GuestList, List<String>>(GuestList.new);

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

class PartyPage extends ConsumerStatefulWidget {
  const PartyPage({super.key});

  @override
  ConsumerState<PartyPage> createState() => _PartyPageState();
}

class _PartyPageState extends ConsumerState<PartyPage> {
  final controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    final guests = ref.watch(guestsProvider);
    return Scaffold(
      appBar: AppBar(title: Text('Guests: ${guests.length}')),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: controller,
                    decoration: const InputDecoration(labelText: 'Guest name'),
                  ),
                ),
                const SizedBox(width: 8),
                ElevatedButton(
                  onPressed: () {
                    controller.clear();
                  },
                  child: const Text('Add'),
                ),
              ],
            ),
          ),
          Expanded(
            child: ListView(
              children: [
                for (final name in guests) ListTile(leading: const Icon(Icons.person), title: Text(name)),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Uji dirimu

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

Latihan sendiri: Compiler Flutter online

Riverpod: Notifier

Semua pelajaran di Pengelolaan State