Giter Site home page Giter Site logo

shenghy / flutter_shop Goto Github PK

View Code? Open in Web Editor NEW
1.2K 59.0 379.0 109 KB

一个Flutter的电商实战项目,包括首页、列表页、详细页、购物车页和会员中心,配有全套文字和视频教程。

Java 0.44% Objective-C 0.89% Dart 98.67%

flutter_shop's Introduction

Flutter的移动电商实战

项目和教程都在更新中............

完全模仿了百姓生活+小程序的项目,数据来自Fiddle提取,有完整的接口API文档。页面包括首页、商品列表页、商品详细页、购物车页面和会员中心。

目前项目还在开发当中,配有完整的视频和文字教程,是你Flutter进阶必备项目。

教程文章地址

教程文章地址(60节,超5万字教程,持续更新中):https://jspang.com/post/FlutterShop.html

用到的组件

  • dio:用于向后端接口作HTTP请求数据
  • flutter_swiper: 轮播插件,制作了商城首页的轮播效果
  • flutter_screenutil:用于不同屏幕的适配,一次设计,适配所有屏幕
  • url_launcher:用于打开网页和实现原生电话的拨打
  • flutter_easyrefresh:下拉刷新或者上拉加载插件,方便好用,可定制。
  • provide:谷歌最新推出的Flutter状态管理插件,亲儿子,用的爽。
  • fluttertoast:Toast轻提示插件,APP必不可少,IOS和Android通用。

图片展示

商城图片

所有项目知识点梳理

知识点梳理

更新日志:

  • 商品分类页面增加了打开详细页的功能。[2019/4/23]

  • 更新首页的分类导航,跳转到分类页面,并且可以跟随变化。[2019/4/22]

  • 商品详细页面主要UI布局完成,还有app的路由系统制作完成。[2019/4/4]

  • 第一次上传项目到GitHub上,我已经写了35课教程,把首页和商品分类页面制作完成。[2019/3/28]

知识架构图

一起学习

我建立了一个QQ群,大家一起学习:

qq群:806799257

入群问题:Flutter出自于哪个公司?

入群答案:google (注意全小写,最好用电脑端加入,移动端Bug)

flutter_shop's People

Contributors

shenghy avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

flutter_shop's Issues

packages get之后 运行模拟器报错

Compiler message:
file:///users/xxx/flutter/.pub-cache/hosted/pub.flutter-io.cn/flustars-0.2.5/lib/src/widget_util.dart:88:8: Error: No named parameter with the name 'onError'.
}, onError: (dynamic exception, StackTrace stackTrace) {
^^^^^^^
file:///users/xxx/flutter/.pub-cache/hosted/pub.flutter-io.cn/flustars-0.2.5/lib/src/widget_util.dart:115:8: Error: No named parameter with the name 'onError'.
}, onError: (dynamic exception, StackTrace stackTrace) {
^^^^^^^
file:///users/xxx/flutter/.pub-cache/hosted/pub.flutter-io.cn/cached_network_image-0.7.0/lib/src/cached_network_image_provider.dart:46:31: Error: The argument type 'Null Function(StringBuffer)' can't be assigned to the parameter type 'Iterable Function()'.

  • 'StringBuffer' is from 'dart:core'.
  • 'Iterable' is from 'dart:core'.
  • 'DiagnosticsNode' is from 'package:flutter/src/foundation/diagnostics.dart' ('file:///users/xxx/flutter/packages/flutter/lib/src/foundation/diagnostics.dart').
    Try changing the type of the parameter, or casting the argument to 'Iterable Function()'.
    informationCollector: (StringBuffer information) {
    ^
    Compiler failed on /Users/xxx/Documents/demo/flutter/flutter_deer-master/lib/main.dart
    Error launching application on iPhone Xʀ.

文档52节,稍微有问题,需要在save的方法中也获取数据赋值给定义的cartList

image

改为

 var temp=cartString==null?[]:json.decode(cartString.toString());
    //把获得值转变成List
    List<Map> tempList= (temp as List).cast();
   // 如果数据不为空,那么需要给 cartInfoList 添加数据
    if (tempList != null && tempList.length > 0) {
      tempList.forEach((item) {
        cartList.add(new CartInfoModel.fromJson(item));
      });
    }

    //声明变量,用于判断购物车中是否已经存在此商品ID
    var isHave= false;  //默认为没有
    int ival=0; //用于进行循环的索引使用
    tempList.forEach((item){//进行循环,找出是否已经存在该商品
      //如果存在,数量进行+1操作
      if(item['goodsId']==goodsId){
        tempList[ival]['count']=item['count']+1;
         //关键代码-----------------start
        cartList[ival].count++;
         //关键代码-----------------end
        isHave=true;
      }
      ival++;
    });

我的项目的代码

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

class CartProvide extends ChangeNotifier {
  String cartGoodsStr = "[]";
  List<CartInfoModel> cartInfoList = [];

  void save(String goodsId, String goodsName, int count, double presentPrice,
      String images) async {
    // 初始化SharedPreferences
    SharedPreferences prefs = await SharedPreferences.getInstance();
    // 获取数据
    cartGoodsStr = prefs.getString('cartInfo');
    debugPrint('cartGoodsStr 值  $cartGoodsStr');
    // 判断cartString是否为空,为空说明是第一次添加,或者被key被清除了。
    // 如果有值进行decode操作
    var temp = cartGoodsStr == null ? [] : json.decode(cartGoodsStr.toString());
    List<Map> tampList = (temp as List).cast();
    // 如果数据不为空,那么需要给 cartInfoList 添加数据
    if (tampList != null && tampList.length > 0) {
      tampList.forEach((item) {
        cartInfoList.add(new CartInfoModel.fromJson(item));
      });
    }

    // 判断是否存在当前商品
    bool isHaveThisGoods = false;

    // 用于进行循环的索引使用
    int ival = 0;
    // 进行循环,找出是否已经存在该商品
    tampList.forEach((item) {
      debugPrint('ival 前 $ival');
      // 如果存在,数量进行+1操作
      if (item['goodsId'] == goodsId) {
        debugPrint('有一样的数据,+1');
        tampList[ival]['count'] = item['count'] + 1;
        cartInfoList[ival].count++;
        isHaveThisGoods = true;
      }
      ival++;
    });

    debugPrint('ival 后 $ival');

    //  如果没有,进行增加
    if (!isHaveThisGoods) {
      Map<String, dynamic> newGoods = {
        'goodsId': goodsId,
        'goodsName': goodsName,
        'count': count,
        'price': presentPrice,
        'images': images
      };
      tampList.add(newGoods);
      cartInfoList.add(CartInfoModel.fromJson(newGoods));
    }

    //把字符串进行encode操作,
    cartGoodsStr = json.encode(tampList).toString();
    debugPrint('持久化数据 字符串 $cartGoodsStr');
    debugPrint('持久化数据 列表 $cartInfoList');
    prefs.setString('cartInfo', cartGoodsStr); //进行持久化
  }

  void remove() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    //prefs.clear();//清空键值对
    prefs.remove('cartInfo');
    // 置空数据
    cartInfoList = [];
    debugPrint('清空完成-----------------');
    notifyListeners();
  }

  // 得到购物车中的商品
  getCartInfoGoods() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    var cartInfoStr = prefs.getString('cartInfo');
    //把cartList进行初始化,防止数据混乱
    cartInfoList = [];

    // 判断得到的字符串是否有值,如果不判断会报错
    if (cartInfoStr == null) {
      cartInfoList = [];
    } else {
      var cartInfoJson = json.decode(cartInfoStr.toString());
      List<Map> tampList = (cartInfoJson as List).cast();
      tampList.forEach((item) {
        cartInfoList.add(new CartInfoModel.fromJson(item));
      });
    }
    notifyListeners();
  }
}

项目运行不了报错

  • What went wrong:
    Execution failed for task ':app:processDebugResources'.

Android resource linking failed
Output: D:\Android\asFlutterwork\flutter_shop-master\build\app\intermediates\incremental\mergeDebugResources\merged.dir\values\values.xml:86: error: resource android:attr/fontVariationSettings not found.
D:\Android\asFlutterwork\flutter_shop-master\build\app\intermediates\incremental\mergeDebugResources\merged.dir\values\values.xml:87: error: resource android:attr/ttcIndex not found.
error: failed linking references.

2020-10: 🔥🔥🔥 编译出错的, 可参考我这个 fork 修复分支

修复编译报错问题:

fix:

  • 指定 flutter 版本: 1.17.5 , 这个版本比较新. 适合初学.
    • flutter 1.22.0 之后的版本, 在 iOS+xcode 下, 会遇到各种奇怪编译报错. 不建议初学使用.
  • 依赖包: 修复版本报错.
  • 数据API URL: 根据 issue, 找到新的可用 API URL.

run:

  • 默认使用 flutter 1.17.5 版本.
  • 执行:
flutter run 

PR:

  • #15
  • PR 在这里.

分类的provide有问题

上拉加载到底之后改变noMoreText之后 发送provide会导致左侧的provide监听执行 然后会拉去大分类下所有数据的第一页,但是这个时候你又把noMoreText设置为 没有更多了 就会导致只显示一页

//改变noMoreText数据
changeNoMore(String text){
noMoreText=text;
notifyListeners();
}
去掉这个 notifyListeners(); (会造成第一次加载完没有提示 第二次才会提示)
或者再写一个provide监听nomoretext的改变

按照教程, 使用flutter Dio伪造请求头, 请求失败, 提示 Refused to set unsafe header "host"

网上查了资料,发现有人说现在请求头不能写某几个key?
然后看了Dio库里的Headers类,发现里面有默认支持的几个key

httpHeaders = {
Headers.acceptHeader: "application/json, text/plain, /",
Headers.contentEncodingHeader: "gzip, deflate, br, drop",
Headers.contentLengthHeader: '',
Headers.contentTypeHeader: 'application/json'
}

是不是除了这几个,其他的都不支持呢(比如'origin')

跪求解惑,拜托大家了

flutter接口挂了

技术胖 flutter 的接口怎么回事,现在重写,接口全挂了?给个回复吧,花了199买的课程,还不到一年,相应的服务就不行了,这样不行啊。胖子。有空的时候回复一下吧。

图片地址 秘钥过期

Another exception was thrown: HandshakeException: Handshake error in client (OS Error:

应该是 图片地址问题,

代码跑不起来

Error output from Xcode build:

** BUILD FAILED **

lib/routers/routes.dart:3:1: Error: 'Router' is imported from both 'package:flutter/src/widgets/router.dart' and 'package:fluro/src/router.dart'.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.