Provider 開始理解什麼是狀態 下一步去哪?

前言

參考官方範例完成購物車實作
對於Provider或是購物車原理還不熟悉
可以參考以下文章
D-19 Provider | Flutter筆記

本文

參考上圖 shop/中

• model folder :
  1. Cart:
     1. 購物車實體,紀錄添購商品(id編號);
     2. 商品目錄產品,將Catalog存放於此;
     3. 計算總金額;添加商品/移除商品;
  2. Catalog:
     1. 商品(Item)物件創建
     2. 透過(id編號)轉換成商品 ex: 0 -> Item(id:0,name:'Spaghetti')
• screen folder :
  1. Cart:
     顯示購物車中商品以及總金額
  2. Catalog:
     顯示各個商品,點擊Add放入購物車
  3. Login :
     過場示意用(增加儀式感)

那我們先著手商品目錄,畢竟沒有商品哪來的加入購物車功能

Catalog.dart

//建立目錄
import 'package:flutter/material.dart';
import 'package:flutter_account_note/shop/model/cart.dart';

class CatalogModel {
  //商品清單
  static List<String> itemNames = [
    'Spaghetti',
    'Currying',
    'Rice',
    'Noodles',
  ];

  //透過Id轉換成商品
  Item getById(int id) => Item(id, itemNames[id]);

  Item getByPosition(int position) {
    return getById(position);
  }
}

@immutable
class Item {
  final int id;
  final String name;
  final Color color;
  final int price = 40;
  Item(this.id, this.name) : color = Colors.primaries[id % Colors.primaries.length];

  //hashCode 複寫為id
  @override
  int get hashCode => id;

  //運算符號判斷相等 == ,也複寫成比對id是否相同
  @override
  bool operator ==(Object other) => other is Item && other.id == id;
}