Flutter
关注
分享
扫一扫
文章平均质量分 90
yechaoa
优快云博客专家、掘金签约作者、infoQ 专家博主、阿里云专家博主、51CTO专家博主、华为云云享专家；现就职于阿里巴巴，研究方向包括但不限于大前端、端基础架构与中间件、性能优化等。
展开
-
Flutter版本从1.7.8到3.7.9的升级之旅
个人于2019年5月开源了WanAndroid的Flutter版本，截止目前也有660+的star，在过去的4年中，大家对Flutter的关注也越来越多，且有很多已经在商业项目中使用。这中间也陆陆续续有不少朋友问我什么时候能升级一下Flutter的版本，毕竟太老了。所以这次也是借着这个机会，把这个项目升级一下，熬了两个大夜，终于算是适配好了。原创 2023-04-03 00:31:09 · 709 阅读 · 0 评论 -
【复盘】关于我在错误的时间选错了技术这件事
我为什么这么做、错在哪里、又收获了什么、以及我的思考。复盘避免再次出错，仅以此记，望后来者顺颂商祺！原创 2022-07-22 23:59:24 · 1094 阅读 · 0 评论 -
Flutter 使用自定义字体
效果： 非常的简单。导入字体随便在网上找一个免费的字体，下载下来会得到一个后缀为.ttf的文件，即字体文件。或者自己做一个。在项目的根目录中新建一个fonts文件夹（目录、命名可以随意），并把刚才的文件拷进去。引用字体在pubspec.yaml文件中配置字体...flutter: fonts: - family: mononoki ...原创 2019-07-23 17:27:31 · 4123 阅读 · 3 评论 -
Flutter macOS环境配置
其实通读一下文档后的感觉就是 还蛮复杂的，起码比windows要复杂一下，可能也是我平时windows用的比较多吧，今天这篇文章就以最简单直接的方式引导在macOS上配置Flutter开发环境准备工具先配置一下镜像由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到用户环境变量中：export PUB_HOSTED_...原创 2019-07-11 22:59:36 · 2624 阅读 · 0 评论 -
Flutter 分享功能之Share
效果：Summons the platform’s share sheet to share text.非常简单，但也仅限于文本。 1、导入及引用share: ^0.6.1+1import 'package:share/share.dart'; 2、调用Share.share( '【玩安卓Flutter版】\n https://github.com/yechaoa/wa...原创 2019-06-28 11:45:56 · 18368 阅读 · 27 评论 -
Flutter 跳转并关闭当前页面
//跳转并关闭当前页面 Navigator.pushAndRemoveUntil( context, new MaterialPageRoute(builder: (context) => new MyHomePage()), (route) => route == null, );Flutte...原创 2019-06-20 15:49:29 · 20282 阅读 · 0 评论 -
Flutter FormatException: Unexpected character (at character 2)
异常Unhandled Exception: FormatException: Unexpected character (at character 2)分析flutter json报以上错误，我这里是请求登录的接口，登录成功data中返回个人信息，失败data为null。当出现这个异常的时候，首先的直觉就是data类型定义错误，还尝试过泛型。。实际上这个坑是dio埋下的，但是在报错...原创 2019-06-20 15:29:06 · 15939 阅读 · 5 评论 -
【开源项目】Flutter版 玩安卓
wanandroid_flutter玩安卓的flutter版本，首先感谢鸿洋提供的api，然后就是这个项目目前还在开发中，不过主体框架已经出来了，而且常用的widget也基本都用到了，后面会继续开发并完善。 先截几个图稍微看下效果：涉及到的知识点BottomNavigationBarFlutterJsonBeanFactory加载WebView网络请求ExpansionP...原创 2019-06-03 11:30:42 · 1981 阅读 · 5 评论 -
记一次升级Flutter SDK失败的光辉历史
提示：本文内容颇为复杂，涉及到的疑难杂症也颇多。一切源于一个简单的指令：flutter upgrade，然后开启了崩溃的黑色3小时。刚打开项目，看到控制台的编译log提示Flutter SDK可以更新，行吧，那就更新吧，想着应该也是一个很简单的事情，因为我Android Studio也是经常更新的。ok，编译结束，Terminal中直接执行flutter upgrade，因为之前也在官方...原创 2019-05-29 19:47:45 · 12489 阅读 · 5 评论 -
Flutter Widget显示隐藏
在Android中我们可以用visibility来控制控件的显示和隐藏，那在Flutter中我们怎么控制呢？其实，在Flutter中控制Widget显示和隐藏有3中方法：不过3种方法的核心思想都是根据变量的值去判断的，所以先定义一个变量：bool visible = true;变量的值可以在事件中去控制，比如： onPressed: () { setS...原创 2019-06-06 17:17:29 · 7830 阅读 · 1 评论 -
Flutter 状态管理之provide
什么是状态管理通俗点来讲就是，对一个数据源的统一管理。比如，列表和详情都有收藏按钮，在详情收藏之后，列表也要同步收藏状态；类似的还有签到、领红包、已读等多种业务场景。在项目小、业务简单的时候可能还不需要或者比较好管理，当项目逐渐庞大、业务也越来越复杂的时候，改起来绝对会焦头烂额，所以状态管理就应运而生了。为什么选择provide其实状态管理的框架也有好几家：BLoCScope...原创 2019-07-30 17:16:05 · 2277 阅读 · 2 评论 -
Flutter 切换主题
效果：本文是基于provide进行切换主题的，其他状态管理框架的话也大同小异。核心思想：创建一个主题色列表根据下标取值配置主题色通过状态管理动态修改主题色列表的下标，从而达到切换主题的效果保存选中的主题色下标，保持本地持久化显示引用provideprovide: ^1.0.2更多可查看：Flutter 状态管理之provide创建主题色管理类import '...原创 2019-07-31 17:04:43 · 3193 阅读 · 8 评论 -
Flutter app打包详解
Flutter app打包跟常规打包是差不多的，以android为例：配置构建信息这一步呢主要是检查配置app的基础信息：applicationIdversionCodeversionNameminSdkVersiontargetSdkVersionuses-permission打包的开发环境等签名创建keystore有keystore就跳过，没有就执行：keytoo...原创 2019-08-21 11:23:23 · 8109 阅读 · 2 评论 -
Flutter 相对布局之Stack
效果简介相对布局，类似于android中的RelativeLayout、FrameLayout。既可以相对父容器确定自己的位置，也可以多个widget重叠显示。Stack与Positioned搭配使用。源码Stack Stack({ Key key, this.alignment = AlignmentDirectional.topStart, this....原创 2019-08-12 15:50:30 · 5184 阅读 · 0 评论 -
【整理篇】Flutter 常用第三方库、插件、学习资料等
fluttertoast: ^3.0.4Toasthttps://github.com/PonnamKarthik/FlutterToastdio: ^2.1.3网络请求https://github.com/flutterchina/diocookie_jar: ^1.0.0cookie持久化等https://github.com/flutterchina/cookie_...原创 2019-08-07 17:51:56 · 5726 阅读 · 0 评论 -
Flutter 修改应用名称、图标、启动页
虽然flutter可以同时运行在android和ios设备上，但是修改名称跟logo还是需要分开配置的。修改应用名称android在项目下找到android目录，依次app》src》main》AndroidManifest.xml，打开AndroidManifest.xml文件，找到application节点，修改label参数即可 <application an...原创 2019-08-09 15:19:01 · 8850 阅读 · 4 评论 -
Flutter 下拉刷新之RefreshIndicator
效果属性RefreshIndicator 是 Material Design 风格的下拉刷新控件，所以同android中的SwipeRefreshLayout用法一样，嵌套在外层即可。先了解一下属性： const RefreshIndicator({ Key key, @required this.child, this.displacement = 40.0,...原创 2019-08-02 14:02:39 · 11581 阅读 · 2 评论 -
Flutter 滑动删除
效果构建Listbody: ListView.builder( itemCount: articleDatas.length, itemBuilder: (BuildContext context, int position) { return getRow(position); }, ),articleDa...原创 2019-08-01 17:56:10 · 2854 阅读 · 0 评论 -
Flutter 本地存储之shared_preferences
简介提供简单数据的持久性存储，同时支持Android和IOS，键值对的方式，异步存储。github：https://github.com/flutter/plugins/tree/master/packages/shared_preferences引用dependencies: shared_preferences: ^0.5.3+4import 'package:shared_p...原创 2019-07-31 17:55:30 · 2801 阅读 · 5 评论 -
Flutter TextField详解
文章目录基本属性TextFieldInputDecoration样式基础样式隐藏文本键盘类型键盘按钮大小写光标最多行数计数器图标提示文字去除下划线边框获取输入内容关闭软键盘校验异常总结github：https://github.com/yechaoa/wanandroid_flutter/blob/master/lib/pages/loginPage.dart效果：终于还是对TextFie...原创 2019-06-05 17:58:57 · 53388 阅读 · 5 评论 -
Flutter 获取屏幕宽高
屏幕宽度：MediaQuery.of(context).size.width屏幕高度：MediaQuery.of(context).size.height原创 2019-05-28 17:56:51 · 4545 阅读 · 0 评论 -
Flutter banner轮播图之Swiper
文章目录关于Swiper示例并讲解基础使用分页控制器显示样式指示器点击事件高度自适应完整代码详细属性基本参数分页指示器控制按钮控制器(SwiperController)轮播图简直是不要太常见的功能了。今天来看一下在Flutter中是怎么实现的。效果关于Swiperflutter最强大的siwiper, 多种布局方式，无限轮播，Android和IOS双端适配.github：http...原创 2019-05-28 17:23:34 · 7177 阅读 · 3 评论 -
Flutter ExpansionPanelList使用讲解
文章目录关于ExpansionPanelListExpansionPanelList是一个item可以打开合并的list控件。使用ExpansionPanelListListView.builder 用法扩展效果图：话说网上关于flutter ExpansionPanelList的学习资源还真是不多，只能对着文档一顿操作，然后自己填坑…关于ExpansionPanelListExp...原创 2019-05-20 15:56:41 · 9197 阅读 · 1 评论 -
Flutter 网络请求封装之Dio（Cookie管理、添加拦截器、下载文件、异常处理、取消请求等）
文章目录Dio相关封装开始get请求post请求post Form表单异常处理Cookie管理添加拦截器下载文件取消请求Https证书校验调用示例完整代码之所以封装，千言万语汇成一句话：方便使用。Dio相关dio是一个强大的Dart Http请求库，支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时、自定义适配器等…添加依赖...原创 2019-05-15 13:59:40 · 37885 阅读 · 14 评论 -
Flutter Json自动解析之FlutterJsonBeanFactory
在flutter中，官方也提供了解析方式，比如： Map<String, dynamic> user = json.decode(response.toString()); print('Howdy, ${user['name']}!'); print('We sent the verification link to ${user['github...原创 2019-05-09 15:07:57 · 14560 阅读 · 16 评论 -
Flutter 底部导航栏BottomNavigationBar，并关联PageView实现滑动切换
效果图：BottomNavigationBar先来看一下官方的sample code：class MyHomePage extends StatefulWidget { MyHomePage({Key key}) : super(key: key); @override _MyHomePageState createState() => _MyHomePageState...原创 2019-05-06 12:52:02 · 6846 阅读 · 8 评论 -
Flutter BottomNavigationBar不显示（显示白色）？
BottomNavigationBar 超过3个之后不显示（显示白色）？官网文档解释：The bottom navigation bar’s type changes how its items are displayed. If not specified it’s automatically set toBottomNavigationBarType.fixed when ther...原创 2019-05-05 17:49:50 · 2439 阅读 · 0 评论 -
Flutter color颜色的用法
系统自带color的使用和自定义color系统的color查看Color的源码： static const Color black = Color(0xFF000000);可以看到，这里的black也是赋值封装好的，我们可以直接调用（Colors.black 即可）。当然系统也封装了很多的color使用（查看源码轻松找到），上面我们可以看到有很多不同程度的红色，默认就是原始的...原创 2019-05-05 14:54:23 · 29335 阅读 · 2 评论 -
Flutter 环境配置
前言：下载SDK开发包地址解压环境变量测试 双击 .bat异常解决 重启顺便装插件 反正都要重启的 装flutter之前会提示先装dart原创 2019-04-10 09:25:23 · 5319 阅读 · 0 评论 -
Flutter 学习资料
Flutter官网Flutter中文网Flutter for Android 开发者Flutter github咸鱼技术掘金Flutter专栏升级 FlutterFlutter 入门三天学会Flutteralibaba/flutter-goFlutter Go 代码开发规范 0.1.0 版Flutter 环境配置...原创 2019-04-10 10:18:29 · 1248 阅读 · 0 评论 -
Flutter 流式布局之Wrap
效果：WrapA widget that displays its children in multiple horizontal or vertical runs.一个可以横向或纵向显示的流式布局的widget使用场景：一行显示不下需要换行的时候源码： Wrap({ Key key, this.direction = Axis.horizontal,//方...原创 2019-05-21 11:34:25 · 1516 阅读 · 0 评论 -
Flutter Chip详解
文章目录ChipActionChipChoiceChip示例代码：效果：Chip标签使用场景：事物的属性或标签，历史搜索记录等。 const Chip({ Key key, this.avatar,//标签左侧的Widget @required this.label, this.labelStyle, this.labelPadding, ...原创 2019-05-21 14:11:08 · 6876 阅读 · 0 评论 -
Flutter 左右菜单联动
效果：像这种左右菜单联动的效果很常见，即点击左边菜单列表右边刷新，这里演示一下在Flutter中的实现页面结构很简单，分为左右结构，左边是一个ListView，右边也是一个ListView，然后按比例显示即可 return new Row( mainAxisAlignment: MainAxisAlignment.start, children: &l...原创 2019-05-22 17:00:23 · 12397 阅读 · 0 评论 -
Horizontal viewport was given unbounded height.width.
Horizontal viewport was given unbounded height.Vertical viewport was given unbounded width.在写纵向或横向的布局的时候，一不小心就会遇到这个异常，宽度或高度溢出，导致widget不显示。比如一个简单的例子： body: Column( children: <Widg...原创 2019-05-28 16:14:05 · 13062 阅读 · 0 评论 -
Flutter PopupMenuButton使用
效果：常用属性 const PopupMenuButton({ Key key, @required this.itemBuilder,//item构建 this.initialValue,//默认值 this.onSelected,//选中回调 this.onCanceled,//取消回调 this.tooltip,//长按提示信息 ...原创 2019-05-30 19:46:43 · 6427 阅读 · 1 评论 -
Flutter Card使用
效果：代码： Card( elevation: 5,//阴影 shape: const RoundedRectangleBorder(//形状 //修改圆角 borderRadius: BorderRadius.all(Radius.circular(10)), ), colo...原创 2019-05-23 16:32:14 · 4940 阅读 · 0 评论 -
Flutter TabBar、TabBarView的使用
文章目录效果：简介TabBarTabBarViewTabBar和TabBarView联动点击更新完整代码效果：说实话，这个效果实现起来并没有我想象中的那么简单，demo跟实际开发差的还是蛮大的，一方面是学习成本，要查看源码，另一方面就是页面的布局，层级嵌套的太深了。。简介TabBar和TabBarView到底是什么关系呢，简而言之，TabBar就是导航栏，TabBarView就是导...原创 2019-05-23 15:56:28 · 19455 阅读 · 6 评论 -
Flutter SliverAppBar全解析，你要的效果都在这了！
转载请声明出处！！！先来简单看下部分效果图：本文内容可能有点多，但是都很简单，配上效果图味道更佳~ 什么是SliverAppBarSliverAppBar 类似于Android中的CollapsingToolbarLayout，可以轻松实现页面头部展开、合并的效果。与AppBar大部分的属性重合，相当于AppBar的加强版。 先从最基本的效果开始，一步一步做到全效果。 常...原创 2019-05-30 17:23:20 · 55341 阅读 · 14 评论 -
Flutter Drawer详解
文章目录简介基础属性DrawerHeaderUserAccountsDrawerHeader功能列表Drawer打开关闭完整代码效果：简介Drawer是一个抽屉控件，通常从页面的左边或右边滑出来。抽屉的内部结构通常是头部信息Header、内容区ListTiles、或以一个AboutListTile结尾。基础属性首先，Drawer是Scaffold下的一个子widget。 ...原创 2019-05-27 17:43:28 · 4975 阅读 · 5 评论 -
Flutter 加载WebView（加载网页）
文章目录1、安装插件2、使用3、简介1、安装插件安装dependencies: flutter_webview_plugin: ^0.3.5packages getImportimport 'package:flutter_webview_plugin/flutter_webview_plugin.dart';2、使用简单示例：import 'package:...原创 2019-05-13 16:09:07 · 16415 阅读 · 5 评论