flutter中可以通过RepaintBoundary widget中的toImage方法将页面中的widget转为base64. 如何使用? 首先要在全局定义一个global key,分配给RepaintBoundary.然后将要转化为图片的widget用RepaintBoundary包裹. 关键代码: RenderRepaintBoundary boundary = _globalKey.currentContext.findRenderObject(); // 获取页面渲染对象 获取到页面

一.组件分析 ui如下 根据UI分析我们需要提取哪些是动态的,可以通过传递参数得到不同的结果? 1.左侧icon 2.输入的文本 3.是否是密码框 4.输入框的控制器:如何时时得到输入框的值 二.快速创建自定义组件 vscode中使用快捷键stl快速生成一个无状态组件, class CreateMyInput extends StatelessWidget { @override Widget build(BuildContext context) { return Container( );

Dio Dio是一个强大的Dart Http请求库,支持Restful API.FormData.拦截器.请求取消等操作.视频中将全面学习和使用Dio的操作. Flutter_swiper swiper滑动插件的使用,使用Swiper插件图片的切换效果. FLURO Flutter的路由机制很繁琐,如果是小型应用还勉强,但是真实开发我们都会使用企业级的路由机制,让路由清晰可用.视频中也会使用Fluro进行路由配置.Fluro也是目前最好的企业级Flutter路由. Flutter-go 详解常用

1.Dart 面向对象语言,与java类比学习 非常适合移动和Web应用程序 1.dart官网 2.Dark2 中文文档 3.Dart语法学习 4.极客学院Dart学习 5.Flutter与Dart 入门 2.Flutter 树形布局,一切皆组件 1.flutter文档 2.社区中文资源 2.flutter中文文档(更新滞后) 3.flutter学习入门: http://jspang.com/archives/ https://juejin.im/user/59ed44cf6fb9a0451c3

Flutter社区和资源传送门 新: 慕课网<Flutter入门与案例实战>   |   中文网<Flutter实战>电子书 字体图标生成 http://fluttericon.com/ Flutter中文网  https://flutterchina.club Flutter官网 https://flutter.io Flutter中文开发者论坛 http://flutter-dev.cn/ Flutter|Dart语言中文社区 http://www.cndartlang.com

[说明]由于这些库一直在更新,请自己选择合适的稳定版本下载. 另外如果发现有问题或者你有更好的库,欢迎留言告诉我. 谷歌官方的针对Dart语言的一些实用性的功能以及扩展的库 -- Quiver Quiver是一组针对Dart的实用程序库,它使使用许多Dart库变得更容易.更方便,或者增加了额外的功能. github地址 https://github.com/google/quiver-dart 使用方式: dependencies: quiver: '>=2.0.0 <3.0.0' 根据pub

本文介绍如何在Flutter中创建HTTP网络请求和对请求的json string进行类型解析. 网络请求 官方使用的是用dart io中的HttpClient发起的请求,但HttpClient本身功能较弱,很多常用功能都不支持. 建议使用dio 来发起网络请求,它是一个强大易用的dart http请求库,支持Restful API.FormData.拦截器.请求取消.Cookie管理.文件上传/下载…… dart:io  发起HTTP请求 http支持位于dart:io,所以要创建一个HTTP

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

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

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

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

Github地址: https://github.com/flutter/plugins/tree/master/packages/image_picker packages地址: https://pub.dev/packages/image_picker 1.将其添加到包的pubspec.yaml文件中: image_picker: ^0.4.5 2.安装 flutter pub get 3.导入 import 'package:image_picker/image_picker.dart';