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

34.列表页_小BUG的修复 当高粱酒的子类没有数据返回的时候就会报错. 解决接口空数据报错的问题 没有数据的时候,给用户一个友好的提示, 我们没有数据的时候还要告诉用户,提示一下他没有数据,在我们的右侧列表的build方法内去判断 友好提示展示效果: 子类的id状态化 状态管理里面,定义小类的变量,并根据传入的id根性赋值.这样我们在点击小类的时候,需要也传入小类的id 这样我们在小类点击事件里面,传入小类的id就可以了 测试程序 点击小类进行测试 最终代码: provide/child_ca…

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

31.列表页_列表切换交互制作 博客地址:https://jspang.com/post/FlutterShop.html#toc-c42 点击左侧的大类右边的小类也跟着变化 新建provide 要改变哪里就建哪里的provide,我们现在要改变的是右边的商品列表的数组. category_goods_list.dart 这样我们的provide类就做好了 做好的provide类放到main.dart中注册 这一步叫做 把状态放入顶层 category_page.dart修改 _getGoods…

35.列表页_上拉加载更多制作 右侧列表上拉加载配合类别的切换 上拉加载需要一个page参数,当点击大类或者小类的时候,这个page就要变成1 provide内定义参数 首先我们需要定义一个page的变量 下图是我们之前在首页的时候做的上拉加载代码,之前属性noMoreText我们没有设置值,这里我也需要把这个属性加入到provide里面去. 在大类和小类的初始化的方法内,都需要把page设置为1,然后把提示信息设置为空 然后我们需要做page增加的方法,上拉刷新的时候,这个page值是不断的增…

25.列表页_使用Provide控制子类-1 主要是二级分类的UI布局 1分15秒 生成我们的右侧动态类 定义list变量 开始写里面的子项,把每一个小的写了 再拼成一个大的 这样我们的小类就写完了 开始写我的大类别:是一个横向的ListView.写横向的ListView就必须设置宽和高 ListView如果是纵向的不需要设置高度,如果是横向的就必须设置宽和高 这里使用构造器的形式,动态构造.ListView.builder() 大类的代码: 调用我们的大类 布局的划分:最外层用Row,右侧用上…

26.列表页_使用Provide控制子类-2 主要实现功能,点击一级分类,二级分类跟着变.这里主要用哦我们的provide 新建provide provide文件夹下创建:child_category.dart 事件上就是这个实体:BxMallSubDto 这样我们的Provide类就写完了. 然后在main.dart中注册provide import './provide/child_category.dart'; 继续category_page.dart 先引入我们的provide和chil…

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…

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

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

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的时候,保存了文件没有自动去下载包文件.…

27.列表页_现有Bug修复和完善 小解决小bug 默认右侧的小类没有被加载 数据加载完成后,就list的第一个子对象传递给provide进行赋值,这样右侧的小类就刷新了数据 默认加载了第一个类别 调整颜色 对比图片调整下颜色 这里的参数r:就是red红色 g:green绿色 b:blue蓝色 opacity:就是透明度 最终修改成颜色: Color.fromRGBO(, , , 1.0) 全部 点击类别的时候默认有一个全部,我们的数据里面默认是没有这个全部的.这就需要我们自己把这个子类加上 我…

28.列表页_商品列表后台接口调试 主要调试商品列表页的接口 这个接口是最难的因为有大类.小类还有上拉加载 先配置接口 config/service_url.dart //const serviceUrl='http://test.baixingliangfan.cn/baixing/';//2019-04-12失效 const serviceUrl='https://wxmini.baixingliangfan.cn/baixing/';//从群里那个github的地址找到的 const se…

32.列表页_小类高亮交互效果制作 点击大类右侧的横向的小类红色显示当前的小类别 解决之前溢出的问题: 先解决一个bug,之前右侧的这里设置的高度是1000,但是有不同的虚拟机和手机设别的问题造成了溢出的问题. Expaned是有伸缩能力的小部件,继承于Flexible 外层套一个Expanded,内部的Contaienr的高度不再设置 右侧列表没有设置高度一样显示出来了. provide的修改 使用provide来交互,左侧大类是一个,右侧上面横向的小类是一个,两个类之间交互使用provide…

33.列表页_子类和商品列表交互效果 主要实现点击小类下面的列表跟着切换 获取右侧下面的列表信息,即要传递大类的id也要传递小类的,所以需要把左侧的大类的id也要Provide化 可以看下网站上的接口说明: https://jspang.com/posts/2019/03/01/flutter-shop.html#%E5%90%8E%E7%AB%AF%E6%8E%A5%E5%8F%A3api%E6%96%87%E6%A1%A3 大类id Provide化 当我们点击左侧的大类的时候,要把当前的大…

36.FlutterToast插件使用 https://github.com/PonnamKarthik/FlutterToast fluttertoast: ^ category_page.dart页面添加引用 import 'package:fluttertoast/fluttertoast.dart'; 小类跳转到全部,没有数据的问题 本节课代码 provide/child_category.dart import 'package:flutter/material.dart'; impo…

40.路由_Fluro的全局注入和使用方法 路由注册到顶层,使每个页面都可以使用,注册到顶层就需要在main.dart中 main.dart注册路由 注入 onGenerateRoute是MaterialApp自带的路由配置项, 首页跳转到详细页 import '../routers/application.dart'; _wrapList火爆专区的商品,点击进行跳转 那么这个/detail是在哪里定义的呢?看下图,是在routers.dart中配置的 然后再传id过去 id在路由的这个地方配置…

42.详细页_UI主页面架构搭建 详细分成六大部分拆分开 body里面用FutureBuilder异步加载. FutureBuilder里面的furure属性这里用一个方法,必须返回的也是future 把我们的方法修改为返回的类型为Future.我们直接返回的是一个字符串.因为我们里面使用了provide,所以其实这里我们随便返回个字符串就没那么重要 了. 我们在页面上默认放上一个Text的widget显示传过来的id 运行页面: 点击左上角的返回可以返回到上一页 最终代码: import 'p…

44.详细页_首屏自定义Widget编写 把详细页的图片.标题.编号和价格形成一个单独的widget去引用 详情页的顶部单独封装个插件 在pages下面新建detials_page的文件件并在里面新建页面details_top_area.dart文件 添加引用,然后声明一个静态的类 返回顶部图片的方法 商品名称方法: 商品编号方法 开始写Build 最外层是一个Provide,里面model类传递的是商品详情的类 在主页内引用子组件 首先引入我们写的组件的页面文件,然后调用我们写的组件的类就可以…

45.详细页_说明区域UI编写 pages/details_page/details_expain.dart 详情页面引用组件 效果展示: 最终代码: import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; class DetailsExplain extends StatelessWidget { @override Widget build(Bui…

46.详细页_自定义TabBar Widget 主要实现详情和评论的tab provide定义变量 自己做一个tab然后用provide去控制 定义两个变量来判断是左侧选中了还是右侧选中了.并定义一个方法来接受参数,修改是左侧还是右侧选中的状态值 新建组件页面 details_page/details_tabbar.dart 然后定义方法_myTabbarLeft 左侧tab的点击事件,调用provide内的change方法传入是left 把_myTabbarLeft方法复制一个改成_myTab…

48.详细页_详情和评论的切换 增加切换的效果,我们主要是修改这个地方 这样我们的评论的内容就显示出来了 最终代码 details_web.dart import 'package:flutter/material.dart'; import 'package:provide/provide.dart'; import '../../provide/details_info.dart'; import 'package:flutter_screenutil/flutter_screenutil.…

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

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

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组件内 效果预览: 我自己打的代码又溢出了…

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…