flutter Provider 购物车功能

使用Provider实现购物功能

下面这个demo来自flutter官网，有兴趣的小伙伴可以去看看原文。

https://flutter.cn/docs/development/data-and-backend/state-mgmt/simple

效果如下：

main.dart文件

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:provider_shopper/common/theme.dart';
import 'package:provider_shopper/models/cart.dart';
import 'package:provider_shopper/models/catalog.dart';
import 'package:provider_shopper/screens/cart.dart';
import 'package:provider_shopper/screens/catalog.dart';
import 'package:provider_shopper/screens/login.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 提供多个对象时使用 MultiProvider 很方便。
    return MultiProvider(
      providers: [
        // 在这个示例应用程序中，CatalogModel 永远不会改变，所以一个简单的 Provider 就足够了。
        Provider(create: (context) => CatalogModel()),
        // CartModel 实现为 ChangeNotifier，它要求使用 ChangeNotifierProvider。
        // 此外，CartModel 依赖于 CatalogModel，
        // 因此需要一个 ProxyProvider。
        ChangeNotifierProxyProvider<CatalogModel, CartModel>(
          create: (context) => CartModel(),
          update: (context, catalog, cart) {
            if (cart == null) throw ArgumentError.notNull('cart');
            cart.catalog = catalog;
            return cart;
          },
        ),
      ],
      child: MaterialApp(
        title: 'Provider Demo',
        theme: appTheme,
        initialRoute: '/',
        routes: {
          '/': (context) => const MyLogin(),
          '/catalog': (context) => const MyCatalog(),
          '/cart': (context) => const MyCart(),
        },
      ),
    );
  }
}

models\cart.dart文件

import 'package:flutter/foundation.dart';
import 'package:provider_shopper/models/catalog.dart';

class CartModel extends ChangeNotifier {
  /// 支持 [目录] 的私有字段。
  late CatalogModel _catalog;

  /// 购物车的内部私有状态。存储每个项目的 ID。
  final List<int> _itemIds = [];

  /// 当前目录。用