22.JSON解析和复杂数据模型转换技巧 json转Model类 创建model文件夹,在里面新建category.dart类 主要根据这个json来分析我们要做成类的样子 { ", "message": "success", "data": [ { ", "mallCategoryName": "白酒", "bxMallSubDto": [ { "mall…

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

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

json转Model类 创建model文件夹,在里面新建category.dart类 主要根据这个json来分析我们要做成类的样子 { "code": "0", "message": "success", "data": [ { "mallCategoryId": "4", "mallCategoryName": "白酒", &…

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

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

博客地址: https://jspang.com/post/FlutterShop.html#toc-0ee 编写页面代码 创建动态组件HomePage,原来的代码是静态的我们这里就去掉就可以了. 然后使用column布局来写我们的代码 Column就是我们的列布局 TextField只有设置了controller,才能获取到文本框的值.首先我们放的是一个TextField文本框 我们在上面声明typeController.它的类型是:TextEditingController showText…

08.Dio基础_伪造请求头获取数据 上节课代码清楚 重新编写HomePage这个动态组件 开始写请求的方法 请求数据 .但是由于我们没加请求的头 所以没有返回数据 451就是表示请求错错误 创建请求头 注意这里是Request Headers这块才是请求头 把请求头全部复制过来. 然后给这些数据 都加上单引号,做成mapper的形式. 在VScode里面按住鼠标的alt键就可以多选 把这些字母的最前面和最后面都加上光标,然后鼠标再输入单引号 这样单引号就都加上了. 把这些参数都放在了单引号里面…

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

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

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

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

14.首页_url_launcher一键拨打店长电话 首页拨打电话的功能. 接收连个值,一个是店长的头像,一个是电话号码, 然后开始写我们的build方法.点击图片的时候要有一个拨打电话的动作.我们要接收一个单击的事件.这里就可以用我们InkWell()来完成 这样我们的店长模块基本就写完了. 准备下数据,看下UI的效果 从json数据中获取图片和电话.调用我们的店长电话widget展示出来 展示效果 拨打电话模块 需要用到一个插件 插件的地址: https://github.com/flutt…

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

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

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'; 上拉加载我们是要做到我们的主方法里面的.只有做…

21.分类页_类别信息接口调试 先解决一个坑 取消上面的GridVIew的回弹效果.就是在拖这个gridview的时候有一个滚动的效果 physics: NeverScrollableScrollPhysics(), 大R刷新后,点击这里的空白的地方,GridView就不会有滚动的效果了. 分类页面后端接口调试 service_url.dart配置接口的地址和名称 const serviceUrl='http://test.baixingliangfan.cn/baixing/'; const…

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…

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…

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

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化 当我们点击左侧的大类的时候,要把当前的大…

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

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…

43.详细页_补充首页跳转到详细页 首页轮播点击到详细页 修改我们轮播这里的代码:SwiperDiy这个类这里的代码 return InkWell( onTap: (){ Application.router.navigateTo(context, '/detail?id=${swiperDateList[index]['goodsId']}'); }, child: Image.network("${swiperDateList[index]['image']}",fit: BoxF…

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