52.购物车_数据模型建立和Provide修改 根据json数据生成模型类 {,"price":830.0,"images":"http://images.baixingliangfan.cn/shopGoodsImg/20181229/20181229211422_8507.jpg"} https://javiercbk.github.io/json_to_dart/ model文件夹下新建类cartInfo.dart 类名叫做CartInfo…

53.购物车_商品列表UI框架布局 cart_page.dart 清空原来写的持久化的代码; 添加对应的引用,stless生成一个静态的类.建议始终静态的类,防止重复渲染 纠正个错误,上图的CartPage单词拼错了,这里改过来防止后面,运行app的时候报错 build内我们使用scaffold脚手架 创建Future方法获取购物车持久化数据 取数据需要等待时间的,所以之类使用异步async,我们的provide需要context上下文,所以方法内我们要接收一个context对象的参数 在bod…

54.购物车_商品列表子项布局 子项做成一个单独的页面 新建cartItem.dart文件 新建cart_page文件夹,在里面新建cart_item.dart页面, 页面名字叫做CartItem 定义变量,购物车的model类,构造函数接收 先做一下上下左右的边距,margin是外边距.padding是内边距 内边距,外边距,下边的边框样式 我们这里使用Row布局,把没一块都分成一个单独的Widget防止嵌套 首先编写复选按钮的样式 商品图片方法: 商品名称 因为我们还要做商品的数量的加减,所…

55.购物车_底部结算栏UI制作 主要做下面结算这一栏目 cart_bottom.dart页面 先设置下内边距 拆分成三个子元素 全选 因为有一个文本框和一个全选的text文本,所以这里也用了Row布局 合计 先用column布局,上下分成两块,然后上面一行再用Row布局 每行的宽度设置为430的宽度 结算按钮 组合三个小部件 放到页面中预览 cart_page.dart 这里我们使用stack组件,这样把原来的ListView当做子组件嵌入到Stack组件内 效果预览: 我自己打的代码又溢出了…

56.购物车_商品数量控制区域制作 主要做购物车中的数量这里 cart_page文件夹下新建cart_count.dart 减少按钮 因为会有点击事件,所以这里我们使用InkWell. child里面外层套一个Container,为什么要外层始终套一个Container呢,因为我们可以设置内边距.外边距.宽和高等等 //减少按钮 Widget _reduceBtn(){ return InkWell( onTap: (){}, child: Container( width: ScreenUti…

57.购物车_在Model中增加选中字段 先修改model类 model/cartInfo.dart类增加是否选中的属性 修改provide 修改UI部分pages/cart_page/cart_item.dart 测试效果 出现问题的原因,应该是在购物车内持久化的数据,没有isCheck这个新增加的属性,所以就报错了我们需要先点进去一个商品,把持久化的购物车数据清空掉,再重新添加购物车的持久化数据 然后重新添加几个商品到购物车内 最终代码 model/cartInfo.dart class C…

58.购物车_删除商品功能制作 主要做购物车后面的删除按钮 删除的方法写在provide里面 provide/cart.dart文件 传入goodsId,循环对比,找到后进行移除 //删除单个购物车商品 deleteOneGoods(String goodsId) async{ SharedPreferences prefs=await SharedPreferences.getInstance(); cartString=prefs.getString('cartInfo'); List<Ma…

59.购物车_计算商品价格和数量 本节课主要是加上自动计算的功能 provide/cart.dart 在provide的类里面增加两个变量 cart_bottom.dart 三个组件因为我们都需要套一层provide所以这里都传入context对象 把三个组件方法,分别都加上context 引入provide和cart.dart import 'package:provide/provide.dart'; import '../../provide/cart.dart'; 总价 从provide…

60.购物车_全选按钮的交互效果制作 主要做全选和复选框的这两个功能 provide/cart.dart 业务逻辑写到provide里面 先持久化取出来字符串,把字符串编程list.循环list cart_page/cart_item.dart 每一项的复选框的事件 单个复选框的效果预览 全部取消,价格和数量都发生了变化 全选按钮 全选单独声明一个变量, 然后我们需要在获取全部购物车列表的方法里面做一些事情 循环之前先初始化为true,循环的时候只要是有没选中的那么全选就是false cart_…

61.购物车_商品数量的加减操作 provide/cart.dart pages/cart_page/cart_count.dart 先引入provide和cartProvide 定义接收一个item对象的参数 把加减的方法都加上下文对象 添加和减少的点击事件 中间数字的数量的设置 cart_item.dart cart_item在调用CartCount的时候需要传入上篇的单个对象 效果演示: 修正一个地方provide/cart.dart 这里toString是放在外面的 最终代码: prov…

62.购物车_首页Provide化 让跳转随心所欲 新建provide/currentIndex.dart 内容比较简单,定义一个变量当前页面的索引currentIndex,再定义一个方法改变它的值 provide全局注册main.dart index_page.dart 引入provide和currentIndexProvide 然后把首页的代码先都注释掉,之前我们这个页面是一个StateFul的widget,现在我们要改成静态的 原来的一些代码也可以用 下面开始重写index页面 写buil…

63.购物车_详细页显示购物车商品数量 购物车的图标嵌套在statck组件里面 外层套了一个stack组件 数量我们需要用Provide 返回一个container来做样式 气泡效果,中间是个数字外面 是一个圆 如果想组成一个圆的形式,内边距就必须用formLRB这种形式 点击加入购物车后,数量发生变化provide/cart.dart provide/cart.dart 效果展示: 最终代码 details_page/detail.dart import 'package:flutter/ma…

根据json数据生成模型类 {"goodsId":"2171c20d77c340729d5d7ebc2039c08d","goodsName":"五粮液52°500ml","count":1,"price":830.0,"images":"http://images.baixingliangfan.cn/shopGoodsImg/20181229/20181…

51.购物车_Provide中添加商品 新加provide的cart.dart页面 引入三个文件.开始写provide类.provide需要用with 进行混入 从prefs里面获取到数据,判断有没有数据,如果有数据就返转正List<Map> 判断是否有重复的记录,如果有重复记录就数量+1,如果数据不存在就加入到tempList数组中,最后把tempList数据转成字符串,进行持久化 清空购物车的方法 清空的方法比较简单,注意这里是异步的 给两个方法最后都加上通知 provide的全局依赖 在…

09.首页_项目结构建立和获取数据 在config下创建service_url.dart 用来配置我们后端接口的配置文件 一个变量存 接口地址,一个接口方法地址 所有后天请求数据的方法都放在这个文件夹下/lib/service文件夹 再创建serevice_method.dart文件 首先引入dio的包,再引入异步的包,再引入io的包. 最后引入service_url配置的文件 然后开始写获取首页主题内容的代码 home_page.dart页面重写 我们把请求的数据直接放在Text里面显示了.…

16.补充_保持页面状态 修正一个地方: 设置了item的高度为380 横向列表为380.最终build的高度也增加了50为430. 增加了上面的高度以后,下面那个横线划掉的价格可以显示出来了. 但是还是有超出的问题. 保持首页页面状态 每次点击底部的tab标签.再点击首页,首页的数据就会重新加载. 这里就用到了混入,在页面上进行混入:with AutomaticKeepAliveClientMixin 混入之后必须主要三点: 第一,添加混入 第二:重写wantKeepAlive方法,返回为tr…

11.首页_屏幕适配方案讲解 国人写的屏幕适配插件: https://github.com/OpenFlutter/flutter_screenutil 最新版本是0.5.1 在pubspec.yaml文件内配置包: 引入这个包: import 'package:flutter_screenutil/flutter_screenutil.dart'; 初始化我们的设计尺寸:这里为什么尺寸是750*1334呢,因为技术胖的老板当时用的是iphone6 为了老板审图方便,就用的这个尺寸.所以我们这里…

13.首页_广告Banner组件制作 主要是做这个小广告条. 其实就是读取一个图片做一个widget放到这里 使用stlessW快速生成 定义一个变量存放图片的url地址: 这样我们的广告条就写完了 这个组件我们需要准备下数据 预览效果 最终代码 import 'package:flutter/material.dart'; import '../service/service_method.dart'; import 'package:flutter_swiper/flutter_swiper…

15.首页_商品推荐模块编写 商品推荐,我们做成可以横向滚动的 分析: 上面是标题,下面是ListView,里面是一个Column, column分三层,第一是图片,第二是价格,第三是市场价格 小细节就是上面有个间距 解决一个之前留下的坑.超过屏幕出现黄色的警示黄条 解决方法加加一个SingleChildScrollView,让它单独滚动 最终效果: stlessW快捷键生成商品推荐的代码 因为是列表,所以接收List参数recommentList..然后传递给构造函数,这样我们就接收了一个li…

17.首页_楼层组件的编写技巧 博客地址: https://jspang.com/post/FlutterShop.html#toc-b50 楼层的效果: 标题 stlessW快速生成: 接收一个String类型的参数 标题的各个边上有内边距我们先设置一下 这样我们的标题组件就写完了 楼层商品内容 然后再学些每个楼层的商品.接收一个List数组 里面的每个子项拆分成item,这里我们先写个内部方法,接收一个Map类型的goods的商品子项 这样我们的子组件就写完了 商品我们分成两行,我们先写第一…

18.首页_火爆专区后台接口调试 楼层结束之后有个火爆专区.到地图有个上拉加载的效果 lib/config/service_url.dart 首先找到我们的接口配置文件,增加接口的配置 lib/service/service_method.dart 复制原来的放进行修改 最终定义完的方法: home_page.dart测试接口 我们在initState方法里面调用接口返回数据,并print打印出我们的数据 放在这里调用一下: 运行 查看测试效果 提取接口的方法 这两个方法几乎是一样的 ,所以我们…

19.首页_火爆专区界面布局编写 看一下图片的效果 一个标题栏,下面是多行两列.里面可以用column布局,外面用Warp流式布局 有得小伙伴说这里可以用网格布局,网格布局的话还是有一定的效率问题.这里就用我们的流布局,还是很顺畅的 填一下上节课的坑,设置可选参数 这里用花括号括起来就是个可先的参数了. 修改成可选参数后呢,我们在调用方法的时候就报错了. 我们只要修改为key/value的形式就可以了 上拉刷新有几种方式 火爆专区主要的代码,这是之前的,现在要删掉了 //火爆专区 定义为动态的类…

20.首页_火爆专区上拉加载效果 上拉加载的插件比较都.没有一个一枝独秀的 可以自定义酷炫的header和footer 一直在更新 推荐使用这个插件: https://github.com/xuelongqy/flutter_easyrefresh 添加依赖 首先添加引用我们的插件: pubspec.yaml.用最新的版本 页面上添加引用 import 'package:flutter_easyrefresh/easy_refresh.dart'; 上拉加载我们是要做到我们的主方法里面的.只有做…

02.Flutter实战建立项目和编写入口文件 创建项目: flutter create flutter_shop 创建完成之后呢,它会提示我们, 进入flutter_shop的目录,然后执行flutter run来运行项目 为什么起名flutter_shop用下划线的形式呢?因为在windows下不支持小驼峰和大驼峰的命名方式,官方推荐我们使用下划线的形式 做项目的时候,外层都套一个Container组件呢,这样会使你以后扩展会变的很容易 开始写入口文件main.dart 新建文件夹Pages…

03.底部导航栏制作 material是谷歌退出的 还有另外的一种:cupertino是IOS的风格 我们底部的导航栏,静态的widget是不合适的,这垃圾我们用到动态的widget 这重新改成动态的组件 依然叫做IndexPage 声明一个List来放我们底栏的图标啊 文件啊,List我们希望是不变的,是个常量 所以我们用Final来定义 我们再复制三个BottomNavigationBarItem元素 最终代码: import 'package:flutter/material.dart';…

10.首页_FlutterSwiper轮播效果制作 博客地址: https://jspang.com/post/FlutterShop.html#toc-5c2 flutter_swiper https://github.com/best-flutter/flutter_swiper pubspec.yaml内配置插件的引用.配置好以后进行保存.最好开启***工具 防止下载很慢的情况 这里还是和视频里面用一个版本的吧 1.1.4因为我在本机设置为1.1.6的时候,保存了文件没有自动去下载包文件.…

12.首页_GridView类别导航制作 首页导航区的制作 外面用一个gridview来写.里面单独提出来 新建导航组件 还是在home_page.dart里面写代码 新建一个静态的组件: 快捷键写组件的时候选择哪个stlessW的,这样把构造函数也帮你初始化好了. 定义一个内部的方法 ,返回的是一个column,内部方法名开头用下划线开头. 定义方法 _gridViewItemUI接收两个参数一个是上下文对象,一个item相当于我们每一个导航项 我们导航项点一下肯定要有页面的变化,或者是路由的…

24.Provide状态管理基础 Flutter | 状态管理特别篇 —— Provide:https://juejin.im/post/5c6d4b52f265da2dc675b407?tdsourcetag=s_pcqq_aiomsg 点击左侧的导航右侧的导航发生变化,这属于两个widget.这两个widget之间进行通讯.用setstate的形式,耦合性太强 状态管理有这么几种方案 这里我们用Provide,谷歌自己退出的 https://github.com/google/flutter…

47.详细页_Flutter_html插件的使用 详情里面是hemlt和图片组成的,但是flutter是不支持html的所以需要其他插件 flutter webview plugin:这个不太好用 flutter_html:用这个插件 先解决之前一个bug 在加载详情页面的时候,控制台输出报错了. 需要用的到异步的处理 provide/details_info.dart类的方法:getGoodsInfo html插件 https://github.com/Sub6Resources/flutte…

49.详细页_Stack制作底部工具栏 一直悬浮在最下面的 Stack层叠组件.里面用Row 可以横向布局 开始 stack如果想定位就要用position去定位. 修改return返回值的这个地方 大R刷新查看效果,可以看到固定的在左下角的测试的字样.一直固定在底部 做底部的固定栏widget 新建页面:在文件夹details_page/details_bottom.dart 在布局用三个InkWell 因为都是可以点击的. 加入购物车的InkWell 立即购买,复制购物车的InkWell改改…