Giỏ hàng: Thêm vào giỏ

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

Đã đến lúc xây dựng một ứng dụng dùng chung trạng thái thực tế: một cửa hàng nhỏ. Trong các bài học tiếp theo, ứng dụng sẽ có danh sách sản phẩm kèm nút thêm, huy hiệu trên biểu tượng giỏ hàng, màn hình giỏ hàng có tổng tiền, cách xóa mặt hàng và bước thanh toán. Hai màn hình, một giỏ hàng.

Giỏ hàng là trạng thái dùng chung, vì vậy nó cần một Notifier. Trạng thái của nó là danh sách sản phẩm trong giỏ hàng và ban đầu danh sách trống. Mỗi lần thay đổi, ta gán một danh sách mới, như bạn đã học:

class Cart extends Notifier<List<Product>> {
  @override
  List<Product> build() => [];

  void add(Product product) {
    state = [...state, product];
  }
}

Bản thân danh sách sản phẩm không bao giờ thay đổi, vì vậy nó luôn là một danh sách const thông thường ở đầu tệp. Chỉ những gì thay đổi mới cần một provider.

Thử thách

Trung bình

Làm cho các nút thêm sản phẩm đưa sản phẩm vào giỏ hàng:

Viết một notifier Cart có trạng thái là List<Product>, ban đầu rỗng, với phương thức add(Product product).
Thêm final cartProvider = NotifierProvider<Cart, List<Product>>(Cart.new);
Nút trên mỗi hàng sẽ thêm sản phẩm tương ứng.
Thanh trên cùng hiển thị số sản phẩm trong giỏ hàng: Shop (0), Shop (1)...

Tự làm thử

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class Product {
  const Product(this.name, this.price);

  final String name;
  final double price;
}

const products = [
  Product('Apple', 0.5),
  Product('Bread', 2.25),
  Product('Cheese', 4),
  Product('Milk', 1.2),
];

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

class ShopPage extends ConsumerWidget {
  const ShopPage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(title: const Text('Shop')),
      body: ListView(
        children: [
          for (final product in products)
            ListTile(
              title: Text(product.name),
              subtitle: Text('\$${product.price.toStringAsFixed(2)}'),
              trailing: IconButton(
                icon: const Icon(Icons.add_shopping_cart),
                onPressed: () {},
              ),
            ),
        ],
      ),
    );
  }
}