Flutter购物车管理插件fancy_cart的使用

Flutter购物车管理插件fancy_cart的使用

1. 特性

• 添加商品到购物车
• 从购物车中移除商品
• 清空购物车列表
• 增加和减少商品数量
• 获取购物车总价
• 获取购物车中商品总数
• 购物车类型

2. 工作原理

首先，我们需要定义一个CartItem类来存储购物车中的商品信息。然后初始化Hive并注册CartItemAdapter，打开cart盒子来存储购物车项目。

static initialize() async {
  await Hive.initFlutter();
  Hive.registerAdapter(CartItemAdapter());
  await Hive.openBox<CartItem>('cart');
}

3. 每个方法的解释

• addItem
  • 如果商品已经存在于购物车中，则更新其数量。
  • 否则，将其添加到购物车。

Future<void> addItem(CartItem cart) async {
  // 实现逻辑
}

• removeItem
  • 如果商品已存在且数量大于1，则更新其数量。
  • 如果数量小于1且deleteOption为true，则删除商品。
  • 如果数量小于1且deleteOption为false，则不删除商品，显示SnackBar等操作。

Future<void> removeItem(CartItem cart) async {
  // 实现逻辑
}

• fetchCart
  • 获取当前购物车中的所有商品。

Future<void> fetchCart() async {
  // 实现逻辑
}

• clearCart
  • 清空购物车中的所有商品。

Future<void> clearCart() async {
  // 实现逻辑
}

• incrementItemQuantity
  • 增加商品数量，并根据updatePrice选项更新价格。

Future<void> incrementItemQuantity(CartItem cart) async {
  // 实现逻辑
}

• decrementItemQuantity
  • 减少商品数量，并根据deleteOption和notDecrementedAction选项进行处理。

Future<void> decrementItemQuantity(CartItem cart, {bool deleteOption = false, Function? actionAfterDelete, Function? notDecrementedAction}) async {
  // 实现逻辑
}

• getTotalPrice
  • 计算购物车中的总价格。

double getTotalPrice() {
  // 实现逻辑
}

• getPriceForItem
  • 获取单个商品的价格，并根据updatePrice选项更新价格。

double getPriceForItem(CartItem cart, {bool updatePrice = false}) {
  // 实现逻辑
}

• getNumberOfItemsInCart
  • 获取购物车中的商品总数，包括数量或仅计数。

int getNumberOfItemsInCart({bool needToIncludeQuantity = true}) {
  // 实现逻辑
}

4. 示例实现

在你的项目中初始化Fancy Cart：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  /// initialize fancy cart
  initializeFancyCart(
    child: const MyApp(),
  );
}

创建一个简单的的应用程序示例：

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyPage(),
    );
  }
}

class MyPage extends StatefulWidget {
  [@override](/user/override)
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  int time = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          AddToCartButton(
            actionAfterAdding: () {
              Navigator.push(context, MaterialPageRoute(builder: (context) => const MyCart()));
              setState(() {
                time = DateTime.now().millisecondsSinceEpoch;
              });
            },
            cartModel: CartItem(
              id: time,
              name: 'Test',
              price: 100,
              image: '',
            ),
            child: Container(
              height: 50,
              margin: const EdgeInsets.all(10),
              width: double.infinity,
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.circular(10),
              ),
              child: const Center(
                child: Text(
                  "Add to cart",
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class MyCart extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Test Cart'),
        actions: [
          ClearCartButton(
            child: const Icon(Icons.delete),
            actionAfterDelete: () {
              log("cart deleted", name: "cart deleted");
            },
          ),
          TotalItemsCartWidget(totalItemsBuilder: (totalItems) {
            return Text(totalItems.toString());
          }),
        ],
      ),
      body: CartWidget(cartBuilder: (controller) {
        return Column(
          children: [
            Expanded(
              child: ListView.builder(
                itemCount: controller.cartList.length,
                itemBuilder: (context, index) {
                  final cartItem = controller.cartList[index];
                  return ListTile(
                    title: Text(cartItem.name),
                    subtitle: Text(controller.getPriceForItem(cartItem, updatePrice: true).toString()),
                    trailing: Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        IconButton(
                          onPressed: () {
                            controller.incrementItemQuantity(cartItem);
                          },
                          icon: const Icon(Icons.add),
                        ),
                        Text(cartItem.quantity.toString()),
                        IconButton(
                          onPressed: () {
                            controller.decrementItemQuantity(cartItem);
                          },
                          icon: const Icon(Icons.remove),
                        ),
                      ],
                    ),
                    leading: IconButton(
                      icon: const Icon(Icons.remove),
                      onPressed: () {
                        controller.removeItem(cartItem);
                      },
                    ),
                  );
                },
              ),
            ),
            Text("Total Price : ${controller.getTotalPrice()}"),
          ],
        );
      }),
    );
  }
}

5. 购物车类型

• Trolley Cart
  • 传统的购物车页面，展示商品列表和相关操作。

class TrolleyCartScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.only(top: 1),
          child: Column(
            children: [
              const TrolleyHeader(),
              const SizedBox(
                height: 1,
              ),
              const ShoppingCartTrolley(quantityCardDirection: Direction.vertical),
              const SizedBox(
                height: 1,
              ),
              TrolleyCheckOut(
                shippingFee: 1,
                onCheckout: () {},
              ),
            ],
          ),
        ),
      ),
    );
  }
}

• Modal Cart
  • 弹出式购物车页面，通常用于弹窗形式展示商品列表和相关操作。

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AddToCartButton(
          actionAfterAdding: () {
            BottomSheetCart.show(
              context: context,
              checkOutButton: (cartList){
                log(cartList.length.toString());
              },
              checkOutPaypalButton: (cartList){
                log(cartList.length.toString());
              }
            );
          },
          cartModel: CartModel(
            id: 9998,
            name: 'Isabella Chair',
            price: 250.00,
            image:
            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRASO0ZI6-YXskH0epPedmjRp-Ks01bfGobuYQ-pirFNjg0QOwF37pV_MHQA4bcGn3dMHk&usqp=CAU",
            additionalData: {
              "color": "pink",
            },
          ),
          child: Container(
            height: 50,
            margin: const EdgeInsets.all(1),
            width: double.infinity,
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(1),
            ),
            child: const Center(
              child: Text(
                "Add to cart",
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
      ),
    );
  }
}