Riverpod : StateProvider

Fait partie de la section Gestion d’état du Journey Flutter de Coddy. Leçon 18 sur 27.

Un Provider contient une valeur qui ne change jamais. Pour une seule valeur simple qui change, comme un nombre, un bool ou une String, utilisez un StateProvider :

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

Lisez-la de la même manière : ref.watch(quantityProvider) renvoie le nombre, et le widget se reconstruit lorsqu’il change.

Pour la modifier, récupérez son notifier, l’objet qui contient la valeur, avec ref.read, puis définissez son state :

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

Comme avec Provider, utilisez ref.watch dans build pour afficher une valeur et ref.read dans les callbacks pour la modifier. Et modifier une copie ne change rien : var n = ref.read(quantityProvider); n++; ajoute 1 à n, pas au provider. Seule l’assignation de state le fait.

Défi

Facile

La commande de pancakes affiche sa quantité, mais les boutons ne font encore rien.

Le bouton plus ajoute 1 à quantityProvider.
Le bouton moins enlève 1, sans jamais descendre en dessous de 1.

Essayez vous-même

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