Riverpod: Notifier

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

Bir StateProvider tek bir sayı için uygundur. Durum, ekleme ve kaldırma yöntemleri olan bir liste gibi kurallar içerdiğinde, durumu ve onu değiştiren yöntemleri tutan bir sınıf olan Notifier yazın.

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, ilk durum olan boş listeyi döndürür. Sınıfın içinde state geçerli değerdir. GuestList.new, sağlayıcıya iletilen sınıfın yapıcısıdır; böylece sağlayıcı bildirimciyi oluşturabilir.

Temel kural: state'e yeni bir değer verin, eskisini asla değiştirmeyin. Riverpod, widget'lara yalnızca state farklı bir nesneye ayarlandığında bilgi verir. state.add(name) listeyi yerinde değiştirir; bu nedenle state hâlâ aynı listedir ve bundan kimsenin haberi olmaz. [...state, name] yeni bir liste oluşturur: üç nokta eski adların tümünü bu listeye yayar, ardından yeni ad sona eklenir.

Bir widget, bildirimci aracılığıyla bir yöntemi çağırır: ref.read(guestsProvider.notifier).add('Ada'). Bu sayfa, metin denetleyicisi de tuttuğu için durum bilgili tür olan bir ConsumerStatefulWidget'tır. Bunun State'i, alan olarak ref'e sahiptir.

Görev

Zor

guestsProvider içindeki adları gösteriyor, ancak Add yalnızca alanı temizliyor.

GuestList içine, state değerini adı sona eklenmiş yeni bir listeye ayarlayan add(String name) yöntemini ekle.
Add düğmesinin, alanı temizlemeden önce bu yöntemi alanın metniyle çağırmasını sağla.

Kendin dene

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