Riverpod: StateProvider

Teil des Abschnitts State Management der Flutter-Journey von Coddy. Lektion 18 von 27.

Ein Provider enthält einen Wert, der sich nie ändert. Für einen einzelnen einfachen Wert, der sich ändert, etwa eine Zahl, einen bool oder einen String, verwende einen StateProvider:

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

Lies ihn auf dieselbe Weise aus: ref.watch(quantityProvider) liefert die Zahl, und das Widget wird erneut aufgebaut, wenn sie sich ändert.

Um den Wert zu ändern, hole dir mit ref.read seinen notifier, also das Objekt, das den Wert enthält, und setze dessen state:

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

Wie bei Provider verwendest du ref.watch in build, um einen Wert anzuzeigen, und ref.read in Callbacks, um ihn zu ändern. Und wenn du eine Kopie änderst, ändert sich nichts: var n = ref.read(quantityProvider); n++; addiert 1 zu n, nicht zum Provider. Nur das Setzen von state bewirkt eine Änderung.

Aufgabe

Einfach

Die Pfannkuchenbestellung zeigt ihre Menge an, aber die Schaltflächen bewirken noch nichts.

Das Plus erhöht quantityProvider um 1.
Das Minus verringert die Menge um 1, jedoch nie unter 1.

Probier es selbst

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