Riverpod: StateProvider

Часть раздела Управление состоянием путешествия по Flutter на Coddy. Урок 18 из 27.

Provider хранит значение, которое никогда не меняется. Для одного простого значения, которое меняется, например числа, bool или String, используйте StateProvider:

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

Читайте его так же: ref.watch(quantityProvider) возвращает число, а виджет перестраивается, когда оно меняется.

Чтобы изменить значение, получите его notifier — объект, который хранит значение, — с помощью ref.read и задайте его state:

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

Как и в Provider, используйте ref.watch в build, чтобы показать значение, а ref.read в обратных вызовах, чтобы изменить его. А изменение копии ничего не меняет: var n = ref.read(quantityProvider); n++; увеличивает n на 1, а не значение провайдера. Это происходит только при задании state.

Задание

Легко

В заказе блинов указано их количество, но кнопки пока ничего не делают.

Кнопка с плюсом увеличивает значение quantityProvider на 1.
Кнопка с минусом уменьшает его на 1, но не ниже 1.

Попробуйте сами

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