Riverpod: StateProvider

Fa parte della sezione Gestione dello stato del percorso Flutter di Coddy. Lezione 18 di 27.

Un Provider contiene un valore che non cambia mai. Per un semplice valore che cambia, come un numero, un bool o una String, usa un StateProvider:

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

Leggilo nello stesso modo: ref.watch(quantityProvider) restituisce il numero e il widget viene ricostruito quando cambia.

Per cambiarlo, recupera con ref.read il suo notifier, l'oggetto che contiene il valore, e imposta il suo state:

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

Come con Provider, usa ref.watch in build per mostrare un valore e ref.read nei callback per cambiarlo. E modificare una copia non cambia nulla: var n = ref.read(quantityProvider); n++; aggiunge 1 a n, non al provider. Solo impostando state lo cambi.

Sfida

Facile

L’ordine di pancake mostra la quantità, ma i pulsanti non fanno ancora nulla.

Il pulsante più aggiunge 1 a quantityProvider.
Il pulsante meno sottrae 1, ma non scende mai sotto 1.

Provalo tu

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