07.Dio基础_POST请求的使用 越界问题解决 容器越界的问题,越界是因为键盘弹起的问题.如果键盘不弹起是不会越界 我们加一个滚动组件就可以解决. 这是技术胖视频中出现的越界的截图效果 这是我自己电脑上开发的效果,没有出现越界的问题: 我们在这里外层套一个组件:SingleChildScrollView 把原来我们的container组件放在SingleChildScrollView里面 视频中的问题就解决了. easy-mock https://easy-mock.com/login po…

这节学习一下POST请求的使用,其实POST和Get请求都是在工作中最重要的两种请求.比如我们要传递一组表单数据过去,这时候用Get请求就是不太合适的,使用POST比较好. SingleChildScrollView Widget 在学习新内容之前,先来填一个昨天的坑,其实昨天的代码在最后演示是,是由一个异常的,异常内容如下: I/flutter ( 6889): verticalDirection: down I/flutter ( 6889): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢…

这篇开始我们学习Dart第三方Http请求库dio,这是国人开源的一个项目,也是国内用的最广泛的Dart Http请求库. 1.dio介绍和引入 dio是一个强大的Dart Http请求库,支持Restful API. FormData.拦截器.请求取消.Cookie管理.文件上传/下载.超时和自定义适配器等. 我相信很多人都已经接触或者了解dio了,但是还是需要把它拿出来单独讲解一下,因为在Flutter编程工作中,每天都需要和它打交道,本套教程也会大量的使用dio库来进行接口的调用和数据交换…

上篇文章中,我们只看到了 dio 的使用方式,但并未跟应用关联起来,所以这一篇将 dio 网络请求与应用界面结合起来,当然这也是为以后的实战作基础准备,基础打牢,我们才能飞速前进. 1.案例说明 我们还是作去“大保健”选择服务对象这个例子,不过这次我们使用按钮和动态组件来实现.具体业务逻辑是这样的: 我们制作一个文本框,用于输入需要什么样的美女为我们服务 然后点击按钮,相当于去后端请求数据 后端返回数据后,根据你的需要美女就会走进房间 一图顶千言 2.生成动态组件 可以使用stful的快捷方式,…

在很多时候,后端为了安全都会有一些请求头的限制,只有请求头对了,才能正确返回数据.这虽然限制了一些人恶意请求数据,但是对于我们聪明的程序员来说,就是形同虚设.这篇文章就以极客时间 为例,讲一下通过伪造请求头,来获取极客时间首页主要数据.(不保证接口和安全措施一直可用哦,赶快练习吧) 查看极客时间的数据端口 如果你是一个前端,这套流程可能已经烂熟于心,先找出掘金的一个端口,来进行分析. 首先在浏览器端打开掘金网站(我用的是chrome浏览器::https://time.geekbang.org/,…

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

1.URL接口管理文件建立 第一步需要在建立一个URL的管理文件,因为课程的接口会一直进行变化,所以单独拿出来会非常方便变化接口.当然工作中的URL管理也是需要这样配置的,以为我们会不断的切换好几个服务器,组内服务器,测试服务器,内测服务器,公测上线服务器. 所以说一定要单独把这个文件配置出来,这也算是一个开发经验之谈吧. 在/lib/config文件夹下,建立一个service_url.dart文件,然后写入如下代码: #此端口针对于正版用户开放,可自行fiddle获取. const serv…

1.项目相关截图 2.项目知识点梳理图 Dio2.0: Dio是一个强大的 Dart Http 请求库,支持 Restful API.FormData.拦截器.请求取消等操作. Swiper: Swiper 滑动插件的使用,使用 Swiper 插件图片的切换效果. 路由Fluro:Flutter 的路由机制很繁琐,如果是小型应用还勉强,但是真实开发我们都会使用企业级的路由机制,让路由清晰可用.视频中也会使用 Fluro 进行路由配置,Fluro 也是目前最好的企业级Flutter路由. 屏幕适配…

1.引入flutter_swiper插件 flutter最强大的siwiper, 多种布局方式,无限轮播,Android和IOS双端适配. 好牛X得介绍,一般敢用“最”的一般都是神级大神,看到这个介绍后我也是吃了碗贾玲代言的方便面(一桶半),压了压我激动的心情. Flutter_swiper的GitHub地址:https://github.com/best-flutter/flutter_swiper 了解flutter_swiper后,需要作的第一件事就再pubspec.yaml文件中引入这个…

关于界面切换以及底栏的实现可参考之前写的一篇文章:Flutter实 ViewPager.bottomNavigationBar界面切换 1.新建4个基本dart文件 在pages目录下,我们新建下面四个dart文件. home_page.dart :商城首页UI页面,首页相关的UI我们都会放到这个文件里. category_page.dart: 商城分类UI页面,这个页面会有复杂的动态组件切换. cart_page.dart:商城购物车UI页面,这个页面会包括购物车的全套功能. member_p…

1.创建项目 采用AndroidStudio构建本项目,FIle>New>New Flutter Project… 创建后的项目如下图所示: 我们着重需要注意一下几个文件夹,其他的暂时不用理会 文件夹 作用 android android平台相关代码 ios ios平台相关代码 lib flutter相关代码,我们主要编写的代码就在这个文件夹 pubspec.yaml 配置文件,一般存放一些第三方的依赖. 2.编写入口文件 flutter 中的入口文件为 main.dart,该文件位于 lib…

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

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

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

当app关掉了.再进去的时候 ,购物车的内容还是存在. sqflite提供这个来操作SQLite数据库 flutter提供三种持久化的工具 今天要学的就是 shared_preferences 还有一种持久化就是:file,用流的形式去读取还是有些慢 安装shared_preferences 插件地址: https://github.com/flutter/plugins/tree/master/packages/shared_preferences 提前开好了VPN 日本节点下载还是比较快的…

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

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

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

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

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(BuildContext contex…

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

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

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

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

handler只是单个路由的配置,这节课我们要学习路由的整体配置 整体配置 新建routers.dart文件来做整体配置 detailsHandler就是我们在router_handler里面定义的detailsHandler 当路由不存在的时候,给用户一个反馈.router.notFoundHandler 这样我们的整理路由就写完了. 静态化 为了方便使用还要做一件事,做一个静态文件,把它静态化以后直接调用,不用再New 去调用了. routers/application.dart.在rout…

在main.dart中初始化Fluro 编写handler 在lib下新建routers文件夹,表示里面要很多路由相关的文件 我们声明一个Handler,在里面handlerFunc固定的两个参数 重点理解:handlerFunc 那我们要获取到goodsId 下面是我们之前定义好的DetailsPage,接收一个goodsId参数 重点理解:handlerFunc 最终代码 routers/router_handler.dart import 'package:flutter/material…

https://github.com/theyakka/fluro pages/details_page.dart新建页面 使用路由 先添加路由插件的引用 fluro: ^1.4.0 如果网络上下载不下来,可以采用这种形式去下载,使用git的地址 遇到问题,无法更新下来 fluro的引用 解决方法: 重启电脑.删除D:\Flutter\flutter\bin\cache\lockfile 然后打开科学的网,切换到日本的节点.才能更新下来. 刚开始用的香港 和美国的几点也不行,后来又用的日本节点终…

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

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

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