Riverpod: StateProvider

Parte de la sección Gestión del estado del Journey de Flutter de Coddy. Lección 18 de 27.

Un Provider contiene un valor que nunca cambia. Para un valor simple que sí cambia, como un número, un bool o un String, usa un StateProvider:

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

Léelo de la misma manera: ref.watch(quantityProvider) devuelve el número, y el widget se vuelve a construir cuando cambia.

Para cambiarlo, obtén su notifier, el objeto que contiene el valor, con ref.read, y establece su state:

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

Al igual que en Provider, usa ref.watch en build para mostrar un valor y ref.read en las devoluciones de llamada para cambiarlo. Y cambiar una copia no cambia nada: var n = ref.read(quantityProvider); n++; suma 1 a n, no al proveedor. Solo lo hace establecer state.

Desafío

Fácil

El pedido de panqueques muestra su cantidad, pero los botones aún no hacen nada.

El botón más suma 1 a quantityProvider.
El botón menos resta 1, pero nunca baja de 1.

Pruébalo tú mismo

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