Riverpod: StateProvider

Parte da seção Gerenciamento de estado do Journey de Flutter da Coddy. Lição 18 de 27.

Um Provider contém um valor que nunca muda. Para um valor simples que muda, como um número, um bool ou uma String, use um StateProvider:

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

Leia-o da mesma forma: ref.watch(quantityProvider) retorna o número, e o widget é reconstruído quando ele muda.

Para alterá-lo, obtenha seu notifier, o objeto que contém o valor, com ref.read e defina seu state:

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

Assim como no Provider, use ref.watch em build para exibir um valor e ref.read em callbacks para alterá-lo. E alterar uma cópia não muda nada: var n = ref.read(quantityProvider); n++; adiciona 1 a n, não ao provider. Só definir state faz isso.

Desafio

Fácil

O pedido de panquecas mostra a quantidade, mas os botões ainda não fazem nada.

O botão de mais adiciona 1 a quantityProvider.
O botão de menos subtrai 1, mas nunca deixa a quantidade ficar abaixo de 1.

Experimente você mesmo

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