Riverpod: StateProvider

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

Bir Provider, hiç değişmeyen bir değer tutar. Değişen tek bir basit değer, bir sayı, bir bool veya bir String için StateProvider kullan:

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

Değeri aynı şekilde oku: ref.watch(quantityProvider) sayıyı verir ve değer değiştiğinde widget yeniden oluşturulur.

Değeri değiştirmek için ref.read ile değeri tutan nesne olan notifier'ı al ve state'i ayarla:

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

Provider'da olduğu gibi, bir değeri göstermek için build içinde ref.watch, değiştirmek için de geri çağrılarda ref.read kullan. Bir kopyayı değiştirmek hiçbir şeyi değiştirmez: var n = ref.read(quantityProvider); n++;, sağlayıcıya değil n'ye 1 ekler. Bunu yalnızca state'i ayarlamak yapar.

Görev

Kolay

Pankek siparişi miktarını gösteriyor, ancak düğmeler henüz hiçbir şey yapmıyor.

Artı düğmesi quantityProvider değerine 1 ekler.
Eksi düğmesi 1 azaltır, ancak miktarı hiçbir zaman 1'in altına düşürmez.

Kendin dene

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