Flutter 笔记
记录学习 Flutter 的过程
_龙衣
想到就去做,万一实现了。
展开
-
Flutter Android 端集成 JPush 推送
前提Flutter 版本:1.17.0,别用最新版本或者比较老的版本。我之前使用1.13.0版本也会出现问题。Dart版本:2.8.1使用Flutter中提供的版本ok ,在大版本相同的情况下。我能搞定的问题,你也没问题。集成异常上报集成升级功能...原创 2020-07-28 22:13:10 · 526 阅读 · 0 评论 -
Flutter 完整项目 WanAndroid 开发总结
Flutter 系列文章从19年初到现在,断断续续更新了一些 Flutter相关的文章,所有文章都在下方的专栏地址中可查。专栏地址:Flutter 专栏博文地址从刚开始研究学习Flutter-go项目,到后面慢慢学一些widget的使用,最后利用所学的所有知识点串联起来实现了FlutterWanAndroid项目。这个项目UI借鉴了Flutter-go项目的UI以及网上一些优秀源码或者博文实现的效果。项目地址:Flutter-WanAndroidflutter-goFlutterWa原创 2020-06-30 21:31:25 · 2066 阅读 · 0 评论 -
Flutter 使用 Provider 进行状态管理(主题模式切换示例)
文章目录官方推荐的 ProviderGitHub 高星阿里产物 fish-redux官方推荐的 ProviderGitHub 高星阿里产物 fish-reduxalibaba/fish-redux原创 2020-05-28 21:42:02 · 1937 阅读 · 3 评论 -
Flutter Android 端集成 Bugly 的异常上报和升级功能
前提Flutter 版本:1.17.0地址,别用最新版本或者比较老的版本。我之前使用1.13.0版本也会出现问题。Dart版本:2.8.1使用Flutter中提供的版本flutter_bugly package 地址 ok ,在大版本相同的情况下。我能搞定的问题,你也没问题。不多说了,打包这块真的是卡了好久...在 Bugly 官网注册在官网注册一个App,我这里只注册了 Android 渠道的。iOS 的不熟悉,所以以后再搞吧。注册之后会拿到androidAppId,在初始化的时候原创 2020-05-27 20:14:20 · 2088 阅读 · 0 评论 -
Flutter 方法通道 MethodChannel 使用示例
文章目录上篇文章 Flutter 路由管理 Route、Navigator 使用示例 我们了解了页面跳转的功能。但仅限于 Flutter 页面。那么Flutter 页面和原生页面之间如何跳转呢?...原创 2020-05-19 21:58:17 · 4283 阅读 · 0 评论 -
Flutter 异步编程 Future、FutureBuilder,await 与 async
文章目录Future 是什么异步函数延迟await 与 asyncFuture 是什么异步函数延迟在 Flutter 使用 dio 库实现网络请求及 Json 数据解析示例 中我们对 dio 进行了二次封装,在showLoading的时候想显示弹窗,但是这时候showDialog中的context还没获取到,所以我们需要延迟之后才显示弹窗。Future.delayed(Duratio...原创 2020-05-10 20:41:17 · 979 阅读 · 0 评论 -
Flutter dio 库封装并实现网络请求及 Json 数据解析示例
文章目录Dio基本使用封装使用Dio基本使用封装使用原创 2020-04-19 23:24:03 · 2896 阅读 · 0 评论 -
Flutter 本地数据存储(文件、SharedPreferences 、数据库 sqlite)使用示例
文章目录文件SP数据库文件SP数据库原创 2020-04-15 23:50:46 · 3912 阅读 · 1 评论 -
Flutter 动画 Hero、更多动画示例
文章目录Hero 动画效果示例更多动画效果展示Hero 动画在 Android中有共享元素动画,能够实现页面之间共享元素的切换效果。Flutter 中也提供 相应的 Hero widget 实现该效果。既然 Hero是个widget,按照惯例,我们来看看构造函数支持哪些字段:const Hero({ Key key, @required this.tag, // 共享元...原创 2020-04-12 11:55:40 · 646 阅读 · 0 评论 -
Flutter 动画 Animation、AnimationController、AnimatedWidget、AnimatedBuilder示例
文章目录动画动画原创 2020-04-09 23:53:34 · 1137 阅读 · 0 评论 -
Flutter 主题修改及语言国际化示例
文章目录颜色主题国际化颜色主题国际化原创 2020-04-08 23:51:50 · 1327 阅读 · 0 评论 -
Flutter 触摸事件监听 Listener 、手势识别示例
指针事件Listener手势识别GestureDetectorGestureRecognizer滑动冲突为了让父容器也能接收到手势,我们需要同时使用 RawGestureDetector 和 GestureFactory,来改变竞技场决定由谁来响应用户事件的结果。手势冲突只是手势级别的,而手势是对原始指针的语义化的识别,所以在遇到复杂的冲突场景时,都可以通过Listener直接识别原...原创 2020-04-04 01:14:44 · 5118 阅读 · 0 评论 -
Flutter widget 间传递数据的方案 InheritedWidget、Notification、EventBus
文章目录InheritedWidgetProviderNotificationEventBusInheritedWidgetProviderNotificationEventBus原创 2020-04-02 20:42:45 · 1812 阅读 · 0 评论 -
Flutter Dialog 及 Toast,Snackbar 示例
文章目录对话框默认框选择框列表框第三方库Toast第三方库Snackbar基本使用第三方库对话框默认框选择框列表框第三方库Toast第三方库Snackbar基本使用第三方库...原创 2020-03-29 20:53:11 · 1155 阅读 · 0 评论 -
Flutter 路由管理 Route、Navigator 使用示例
文章目录路由管理页面跳转示例页面不传参跳转页面传参跳转Navigator 的其他跳转方式无 context 页面跳转命名路由页面跳转传参页面返回传参命名路由封装404 页面处理返回按钮拦截路由管理在 Flutter 中,页面之间的跳转是通过 Route 和 Navigator 来管理。Router是页面的抽象,类似于Android中的Activity页面。该类定义了Navigator上的抽...原创 2020-03-26 22:31:12 · 1719 阅读 · 0 评论 -
Flutter 裁剪布局之 ClipRect、ClipRRect、ClipOval、ClipPath、CustomClipper
文章目录裁剪布局ClipRectClipRRectClipOvalClipPath 及 CustomClipper裁剪布局Flutter中提供了一些剪裁widget。widget作用ClipRect将 child 剪裁为给定的矩形大小ClipRRect将 child 剪裁为圆角矩形ClipOval如果 child 为正方形时剪裁之后是圆形,如果 ch...原创 2020-03-25 23:20:42 · 8533 阅读 · 0 评论 -
Flutter 多子 Widget 布之Stack、Positioned
文章目录层叠 Widget 布局StackalignmentfitoverflowPositioned上文 Flutter 多子 Widget 布局之Flex、Expanded、Wrap、Flow,介绍了弹性布局 Flex、Expanded和流式布局Wrap、Flow再上文 Flutter 多子 Widget 布局之线性布局 Row、Column,介绍了线性布局Row、Column组件本...原创 2020-03-24 17:16:38 · 703 阅读 · 0 评论 -
Flutter 多子 Widget 布局之Flex、Expanded、Wrap、Flow
文章目录弹性布局 Flex、ExpandedFlexExpanded流式布局 Wrap、FlowWrapFlow上文 Flutter 多子 Widget 布局 图文示例(一),介绍了Row、Column这两个组件,查看源码发现他俩都是继承了Flex widget,这篇来学习学习弹性布局Flex,Explanded弹性布局 Flex、ExpandedFlex 表示弹性,Expanded 表示...原创 2020-03-22 15:52:21 · 1217 阅读 · 0 评论 -
Flutter 多子 Widget 布局之线性布局 Row、Column
文章目录多子 Widget 布局线性布局 Row、ColumnRowMainAxisAlignmentCrossAxisAlignmentTextDirectionMainAxisSizeVerticalDirectionColumnMainAxisAlignmentCrossAxisAlignment主要参考:Flutter 布局(七)- Row、Column详解多子 Widget 布局...原创 2020-03-22 11:10:58 · 560 阅读 · 0 评论 -
Flutter 单子 Widget 布局之 Container、Padding 、 Center 、Align
文章目录单子 Widget 布局ContainerPaddingAlignCenter单子 Widget 布局这一类 widget,包括 Container、Padding 、 Center 、Align、MarginContainerContainer是一个结合了绘制(painting)、定位(positioning)以及尺寸(sizing)widget的widget。参考:F...原创 2020-03-21 21:01:49 · 643 阅读 · 0 评论 -
Flutter 嵌套滚动 CustomScrollView 示例
文章目录CustomScrollView添加头部视差滑动监听滑动ScrollControllerNotificationListener回到顶部功能CustomScrollView来源: CustomScrollView 是可以使用Sliver来自定义滚动模型(效果)的组件。举个例子,假设有一个页面,顶部需要一个GridView,底部需要一个ListView,而要求整个页面的滑动效果是统一的...原创 2020-03-19 18:07:03 · 7168 阅读 · 0 评论 -
Flutter 网格列表 GridView 及 瀑布流 示例
文章目录使用GridView.countGridView.extentGridView.builder第三方库推荐瀑布流效果参考:GridView使用GridView.countGridView.count( //横轴三个子widget crossAxisCount: 3, //宽高比为1时,子widget childAspectRatio: 1.0, children...原创 2020-03-19 00:47:02 · 2382 阅读 · 0 评论 -
Flutter 滚动列表 ListView 图文示例
文章目录ListView、ListView.builderListView 使用ListView.builder 使用ListTileListView.separated 分割线第三方库推荐上下拉加载数据ListView、ListView.builder这是ListView的两个构造函数,ListView构造函数在列表布局少的时候使用,ListView.builder在渲染列表数据多的时候有优...原创 2020-03-18 22:58:00 · 1477 阅读 · 0 评论 -
Flutter 输入框 TextField、表单 Form 图文示例
文章目录输入框 TextField默认效果监听内容变化,获取输入框的内容和键盘的交互美化 TextField 样式表单 Form 验证输入框内容校验输入框内容重置输入内容保存登录页面例子输入框 TextFieldTextField用于文本输入,它提供了很多属性: const TextField({ Key key, this.controller,// 控制器 th...原创 2020-03-18 15:03:48 · 2771 阅读 · 0 评论 -
Flutter 开关 Switch、复选框 Checkbox、进度条 Indicator 使用例子
文章目录开关 Switch复选框 Checkbox伪代码实现开关 Switch通过 Switch组件可以实现如下图中开关的打卡和关闭。当Switch被点击时,会触发onChanged回调。 复选框 Checkbox当Checkbox被点击时,会触发的onChanged回调 伪代码实现class _MyHomePageState extends State<MyHomePage...原创 2020-03-15 23:43:08 · 709 阅读 · 0 评论 -
Flutter 按钮 Button 参数图文理解
文章目录ButtonFloatingActionButtonRaisedButtonFlatButtonOutlineButtonIconButton带图标的按钮InkWell按钮的样式定制参考 3.4 按钮ButtonFlutter 提供了三个基本的按钮控件,即 FloatingActionButton、FlatButton 、RaisedButton、OutlineButton、Ico...原创 2020-03-14 23:52:28 · 1567 阅读 · 0 评论 -
Flutter 图片 Image 图标 Icon 参数图文理解
文章目录Image加载项目的资源图片加载系统的图片加载网络图片FadeInImage 使用Image 填充模式第三方库推荐IconIcon 的优势Icon 使用例子第三方库推荐ImageImage组件用于显示图片,而图片的来源大概可分为以下:项目的资源图片系统的图片加载网络图片加载项目的资源图片在工程根目录下创建一个images目录,并将图片p3.png拷贝到该目录。在pu...原创 2020-03-14 18:05:42 · 1372 阅读 · 0 评论 -
Flutter 文本 Text 参数图文理解
文本在Flutter中使用Text表示文本,可以查看源码中Text都有哪些属性:const Text( this.data, {// data 表示要显示的文本,不能为空 Key key, this.style,// 文本样式,如果为空则使用 DefaultTextStyle this.strutStyle,// strut 样式 this.textAl...原创 2020-03-13 23:34:19 · 1077 阅读 · 0 评论 -
Flutter 从浅入深理解生命周期
为什么需要了解生命周期?在Android开发的时候,App、Activity、Fragment是有生命周期的,熟悉了生命周期之后我们就可以在适当的时机做适当操作。比如在Android中在执行到OnDestory生命周期是需要资源释放。在Flutter中也是有生命周期的,主要有两个:Widget 的生命周期App 的生命周期Widget 的生命周期上篇文章Flutter 从浅入深...原创 2020-03-11 00:07:26 · 554 阅读 · 0 评论 -
Dart学习笔记-整合基础知识实现的 Demo
参考:(1) 为 Java 开发人员准备的 Dart 教程准备工作我们使用 dartpad 在线运行 dart 代码,当然如果你有WebStorm也可以添加dart插件运行dart代码。实现的功能是:购物车小票效果,效果图如下:分析要实现以上的购物车小票示例需要准备什么?格式化输出结果商品类:名称、单价、数量购物车类:商品、总价、结算日期...原创 2020-02-08 23:39:26 · 396 阅读 · 0 评论 -
Dart 学习笔记-异步支持
参考:https://www.dartcn.com/guides/language/language-tour#%E5%BC%82%E6%AD%A5%E6%94%AF%E6%8C%81Dart 库中包含许多返回 Future 或 Stream 对象的函数. 这些函数在设置完耗时任务(例如 I/O 操作)后, 就立即返回了,不会等待耗任务完成。 使用 async 和 await关键字实现异步编程...原创 2020-02-04 23:10:55 · 344 阅读 · 0 评论 -
Dart 学习笔记-泛型、库的使用
参考:https://www.dartcn.com/guides/language/language-tour#%E6%B3%9B%E5%9E%8B泛型在 API文档中你会发现基础数组类型 List 的实际类型是 List<E> 。<…> 符号将List标记为 泛型 (或 参数化) 类型。 这种类型具有形式化的参数。 通常情况下,使用一个字母来代表类型参数, 例如 E,...原创 2020-02-04 15:56:20 · 310 阅读 · 0 评论 -
Dart 学习笔记-类、枚举、方法
参考:https://www.dartcn.com/guides/language/language-tour#%E7%B1%BB类Dart 是一种基于类和 mixin 继承机制的面向对象的语言。 每个对象都是一个类的实例,所有的类都继承于 Object 。基于 Mixin 继承 意味着每个类(除 Object 外) 都只有一个超类, 一个类中的代码可以在其他多个继承类中重复使用。使用类的...原创 2020-02-04 13:44:34 · 2092 阅读 · 0 评论 -
Dart 学习笔记-控制流程语句及异常
参考: https://www.dartcn.com/guides/language/language-tour#callable-classes控制流程语句Dart 语言中的控制流程语句主要有以下几个:if-elseforwhilebreak-continueswitchassertif-elseDart 支持if - else 语句,其中 else 是可选的。if (...原创 2020-02-02 23:48:04 · 256 阅读 · 0 评论 -
Dart 学习笔记-函数及运算符
函数Dart 是一门真正面向对象的语言, 甚至其中的函数也是对象 。 这也意味着函数可以被赋值给变量或者作为参数传递给其他函数。 也可以把 Dart 类的实例当做方法来调用。以下是函数实现的示例:bool isNoble(int atomicNumber) { return _nobleGases[atomicNumber] != null;}如果函数中只有一句表达式,可以使用简写...原创 2020-01-31 15:58:47 · 327 阅读 · 0 评论 -
Dart 学习笔记-变量及内建类型
变量// name 变量的类型被推断为 Stringvar name = 'Bob';// name 变量的类型被声明为 动态类型dynamic name = 'Bob';// 显式声明变量的类型String name = 'Bob';提示: 局部变量建议使用 var。默认值未初始化的变量默认值是 null。即使变量是数字 类型默认值也是 null,因为在 Dart 中一切都是...原创 2020-01-30 09:15:45 · 321 阅读 · 0 评论 -
Dart 学习笔记-简介
参考:(1) Dart 编程语言中文网 | Dart为什么使用 Dart ?大厂维护Google及全球的其他开发者,使用 Dart 开发了一系列高质量、 关键的 iOS、Android 和 web 应用。 Dart 非常适合移动和 web 应用的开发。免费开源Dart 是免费的并开源于GitHub。高效Dart 语法清晰简洁,工具简单而强大。 输入检测可帮助您尽早识别细微...原创 2020-01-29 08:29:21 · 269 阅读 · 0 评论 -
阿里 Flutter-go 项目拆解笔记(〇)
本来自己也在维护一个 Flutter Widget GitHub 仓库,一是总结自己学习的过程,二是能方便随时翻看回顾。加上自己也学了一段时间的Flutter,也想实现一个客户端来检验一下学习的效果,在看到Flutter-go的时候就想着先分析Flutter-go源码学习大佬们的代码风格,以及如何去实现一个Flutter客户端然后就有了下面的一些分析文章。文章可以不用从头开始看,哪篇中有需要...原创 2019-03-25 21:27:49 · 502 阅读 · 0 评论 -
阿里 Flutter-go 项目拆解笔记(八)
Flutter-go 项目地址是:https://github.com/alibaba/flutter-go上文 我们分析了 第四个 Tab 页面,主要分析了 翻页动画的实现这篇文章主要拆解 详情页面和页面跳转。下图是整理后的 详情页面和页面跳转 有关的内容:ps: 这篇代码量有点多,看不懂代码可以先知道这个功能是如何去实现的,待后边动手实现项目的时候回继续补充讲解。页面跳转页面...原创 2019-03-20 22:49:53 · 2740 阅读 · 3 评论 -
阿里 Flutter-go 项目拆解笔记(七)
Flutter-go 项目地址是:https://github.com/alibaba/flutter-go上文 我们分析了 第三个 Tab 页面,主要分析了 组件的收藏的实现,EventBus,sqflite 的使用这篇文章主要拆解 第四个Tab页面(关于手册)。对应的welcome_page.dart文件的路径如下:'package:flutter_go/views /welcome_pa...原创 2019-03-17 22:21:38 · 1319 阅读 · 0 评论