Riverpod: StateProvider

Thuộc phần Quản lý trạng thái trong hành trình Flutter của Coddy. Bài học 18 trên 27.

Provider lưu giữ một giá trị không bao giờ thay đổi. Với một giá trị đơn giản có thể thay đổi, như một số, một bool hoặc một String, hãy dùng StateProvider:

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

Đọc giá trị theo cách tương tự: ref.watch(quantityProvider) trả về số đó, và widget sẽ dựng lại khi giá trị thay đổi.

Để thay đổi giá trị, hãy lấy notifier của nó, tức đối tượng lưu giữ giá trị, bằng ref.read, rồi đặt state:

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

Như với Provider, hãy dùng ref.watch trong build để hiển thị giá trị và ref.read trong callback để thay đổi giá trị đó. Còn thay đổi một bản sao thì không có tác dụng: var n = ref.read(quantityProvider); n++; tăng n thêm 1, chứ không tăng giá trị trong provider. Chỉ khi đặt state thì giá trị mới thay đổi.

Thử thách

Dễ

Đơn bánh pancake hiển thị số lượng, nhưng các nút vẫn chưa hoạt động.

Nút cộng tăng quantityProvider lên 1.
Nút trừ giảm số lượng đi 1, nhưng không bao giờ thấp hơn 1.

Tự làm thử

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