Flutter實戰視頻-移動電商-51.購物車_Provide中添加商品

51.購物車_Provide中添加商品

 

新加provide的cart.dart頁面

引入三個文件。開始寫provide類。provide須要用with 進行混入

從prefs裏面獲取到數據，判斷有沒有數據，若是有數據就返轉正List<Map>

判斷是否有重複的記錄，若是有重複記錄就數量+1，若是數據不存在就加入到tempList數組中，最後把tempList數據轉成字符串，進行持久化

清空購物車的方法

清空的方法比較簡單，注意這裏是異步的

給兩個方法最後都加上通知

provide的全局依賴

在main.dart中

details_bottom.dart中

引入，

由於要獲取商品的信息，因此要引入：details_info.dart

 

import 'package:provide/provide.dart';
import '../../provide/cart.dart';
import '../../provide/details_info.dart';

 

從provide中獲取到當前商品的詳情，就能夠獲取到商品的編號 名稱 價格和圖片的地址了。

加入購物車和清空購物車的點擊事件內，調用provide內的save和remove的方法

 

糾正錯誤：

效果展現：

添加劇復的數量在增長

當即購買是清空的效果

 

最終代碼

provide/cart.dart

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'dart:convert';

class CartProvide with ChangeNotifier{
  String cartString="[]";//聲明一個變量 作持久化的存儲

  //聲明一個異步的方法,購物車操做放在前臺不在請求後臺的數據
  save(goodsId,goodsName,count,price,images) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    cartString= prefs.getString('cartInfo');//先從持久化中獲取
    var temp = cartString==null?[]:json.decode(cartString.toString());
    //聲明list 強制類型是Map
    List<Map> tempList=(temp as List).cast();//把temp轉成list
    bool isHave=false;//是否已經存在了這條記錄
    int ival=0;//foreach循環的索引
    //循環判斷列表是否存在該goodsId的商品，若是有就數量+1
    tempList.forEach((item){
      if(item['goodsId']==goodsId){
        tempList[ival]['count']=item['count']+1;
        isHave=true;
      }
      ival++;
    });
    //沒有不存在這個商品，就把商品的json數據加入的tempList中
    if(!isHave){
      tempList.add({
        'goodsId':goodsId,//傳入進來的值
        'goodsNmae':goodsName,
        'count':count,
        'price':price,
        'images':images
      });
    }
    cartString=json.encode(tempList).toString();//json數據轉字符串
    print(cartString);
    prefs.setString('cartInfo', cartString);
    notifyListeners();
  }
  remove() async{
    SharedPreferences prefs=await SharedPreferences.getInstance();
    prefs.remove('cartInfo');
    print('清空完成----------------------');
    notifyListeners();
  }
}

 

 

import 'package:flutter/material.dart';
import './pages/index_page.dart';
import 'package:provide/provide.dart';
import './provide/counter.dart';
import './provide/child_category.dart';
import './provide/category_goods_list.dart';
import './provide/details_info.dart';
import './provide/cart.dart';
import 'package:fluro/fluro.dart';
import './routers/routers.dart';
import './routers/application.dart';


void main(){
 var counter=Counter();
 var childCategory=ChildCategory();
 var categoryGoodsListProvide=CategoryGoodsListProvide();
 var detailsInfoProvide=DetailsInfoProvide();
 var cartProvide=CartProvide();
 var providers=Providers();
 //final router=Router();//Router就是咱們的Fluro
 //註冊 依賴
 providers
 ..provide(Provider<Counter>.value(counter))
 ..provide(Provider<CategoryGoodsListProvide>.value(categoryGoodsListProvide))
 ..provide(Provider<DetailsInfoProvide>.value(detailsInfoProvide))
 ..provide(Provider<CartProvide>.value(cartProvide))
 ..provide(Provider<ChildCategory>.value(childCategory)); 
  runApp(ProviderNode(child: MyApp(),providers: providers,));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    final router=Router();//Router就是咱們的Fluro
    Routes.configurreRoutes(router);//註冊router
    Application.router=router;//靜態化

    return Container(
      child:MaterialApp(
        title:'百姓生活+',
        onGenerateRoute: Application.router.generator,
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primaryColor: Colors.pink
        ),
        home: IndexPage(),
      )
    );
  }
}

main.dart

 

 

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:provide/provide.dart';
import '../../provide/cart.dart';
import '../../provide/details_info.dart';

class DetailsBottom extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var goodsInfo=Provide.value<DetailsInfoProvide>(context).goodsInfo.data.goodInfo;//當前商品的詳情
    var goodsId=goodsInfo.goodsId;
    var goodsName=goodsInfo.goodsName;
    var count=1;//默認爲1
    var price=goodsInfo.presentPrice;
    var images=goodsInfo.image1;


    return Container(
      width: ScreenUtil().setWidth(750),
      color: Colors.white,
      height: ScreenUtil().setHeight(80),
      child: Row(
        children: <Widget>[
          InkWell(
            onTap: (){},
            child: Container(
              width: ScreenUtil().setWidth(110),
              alignment: Alignment.center,
              child: Icon(
                Icons.shopping_cart,
                size:35,//圖標沒有自適應 要是設置size的大小
                color: Colors.red,
              ),
            ),            
          ),
          InkWell(
            onTap: () async{
              await Provide.value<CartProvide>(context).save(goodsId, goodsName, count, price, images);
            },
            child: Container(
              alignment: Alignment.center,
              width: ScreenUtil().setWidth(320),//750 - 110 再除以2 評分
              height: ScreenUtil().setHeight(80),
              color: Colors.green,
              child: Text(
                '加入購物車',
                style:TextStyle(color:Colors.white,fontSize: ScreenUtil().setSp(28)),
              ),
            ),
          ),
          InkWell(
            onTap: () async{
              await Provide.value<CartProvide>(context).remove();
            },
            child: Container(
              alignment: Alignment.center,
              width: ScreenUtil().setWidth(320),//750 - 110 再除以2 評分
              height: ScreenUtil().setHeight(80),
              color: Colors.red,
              child: Text(
                '當即購買',
                style:TextStyle(color:Colors.white,fontSize: ScreenUtil().setSp(28)),
              ),
            ),
          )
        ],
      ),
    );
  }
}

details_bottom.dart