Flutter

在 Flutter Engage 预报之后，有数开发者充斥期待并且在社区中踊跃探讨交换，分享见解。明天，咱们正式公布 Flutter 2.0，并在 Flutter Engage 流动 中具体介绍了这一重大里程碑！ 为了不便国内开发者观看，咱们为大家带来本次大会的 残缺中文字幕视频，包含主题演讲和 4 场技术分享。您能够自行安排工夫观看视频，充沛理解相干技术的最新动静。 除此之外，Flutter 开发者们创立的 专属 Dash 形象 也是赚足了眼球——应用自定义 Dashatar 形象 纵情展现本人的魅力，为本次流动添上了一抹别样的色调。 精彩分享 让咱们一起来疾速理解一下本次 Flutter Engage 的精彩内容吧: Flutter Engage 主题演讲https://www.bilibili.com/vide... Flutter 2.0 的公布是 Flutter 的一次重大降级和重要里程碑，它在先前版本的推动和根底之上构建而成，为生产应用开拓了一系列新的指标平台。咱们将与您一起探讨 Flutter 在 Android 和 iOS 以及 web 和桌面设施上的应用，带您理解咱们对 Dart 的工作，如何为您的代码提供独特的技术框架，为构建利用提供可移植的高效且弱小的性能组合。 构建 Flutter web 利用https://www.bilibili.com/vide... 随着 Flutter 2.0 的公布，咱们当初能够应用稳固版本为 web 提供产品质量反对，这意味着您能够应用雷同的代码库为 iOS、Android 和浏览器构建利用。本视频将向您展现让现有的 Flutter 利用在 web 上运行的具体方法以及调试和部署技巧。 将利用迁徙至 null safetyhttps://www.bilibili.com/vide... 带您体验借助 Dart 团队打造的新迁徙工具将利用迁徙到 null safety 的过程，让您在 Flutter 中的开发工作变得更加轻松、快捷和牢靠。 ...

老孟导读：昨天期待已久的 Flutter 2.0 终于公布了，Web 端终于提正了，秋季期间我公布的一篇文章，其中的一个预测就是 Web 正式公布，曾经实现了，还有一个预测是：2021年将是 Flutter 大跃进的一年，等往年你年底总结的时候，让咱们在来验证下这个预测是否应验。前面几天会陆续公布 Flutter 2.0 更新更加具体的内容更新，敬请关注。 上面就让咱们看看 Flutter 2.0 都有哪些重磅更新，原文链接：https://developers.googleblog... 咱们针对Web，挪动端和台式机构建的下一代Flutter 明天，咱们发表Flutter 2：Flutter的重大降级，使开发人员可能为任何平台创立好看，疾速且可移植的应用程序。借助Flutter 2，您能够应用雷同的代码库将本机应用程序公布到五个操作系统：iOS，Android，Windows，macOS和Linux。以及针对Chrome，Firefox，Safari或Edge等浏览器的Web体验。Flutter甚至能够嵌入到汽车，电视和智能家电中，为环境计算世界提供最广泛和最便携式的体验。 咱们的指标是从根本上扭转开发人员对构建应用程序的认识，而不是从您要定位的平台开始，而要从您要创立的体验开始。Flutter使您能够在品牌和设计走在前列的状况下，手工发明美妙的体验。Flutter速度很快，能够将源代码编译为机器代码，然而因为咱们对有状态的热重装的反对，您依然能够进步生产力，容许您在利用程序运行时进行更改并立刻查看后果。Flutter是凋谢的，成千上万的贡献者增加了外围框架，并通过软件包生态系统对其进行了扩大。 在明天公布的Flutter 2中，咱们将Flutter从挪动框架扩大到了可移植框架，开释了您的应用程序，使其能够在各种不同的平台上运行，而简直没有扭转。仅Play商店就曾经有超过15万个Flutter应用程序，并且每个应用程序都能够通过Flutter 2收费降级，因为它们当初能够在不重写的状况下扩大到指标台式机和Web。 来自世界各地的客户正在应用扑，包含风行的应用程序，如微信， Grab, Yandex Go, Nubank, Sonos, Fastic, Betterment and realtor.com。在Google，咱们依赖Flutter，Google的一千多名工程师正在应用Dart和Flutter构建应用程序。实际上，其中许多产品曾经发货，包含Stadia，Google One和Google Nest Hub。 几个月前，Google Pay为其旗舰挪动应用程序改用Flutter，他们曾经在生产力和品质上获得了重大提高。通过对立代码库，该团队打消了平台之间的性能差别，并打消了超过一百万行代码。Google Pay还报告说，其工程师的效率要高得多，技术债权大大减少，对立公布流程（如跨iOS和Android的安全性审查和试验）得以实现。 Flutter on the webFlutter 2中最大的布告兴许是对Web的生产品质反对。 Web的晚期根底是以document为核心的。然而，Web平台已倒退为蕴含更丰盛的平台API，这些API反对具备硬件加速的2D和3D图形以及灵便的布局和绘画API的高度简单的应用程序。Flutter的Web反对基于这些翻新，提供了以应用程序为核心的框架，该框架充分利用了古代Web所提供的所有劣势。 此初始版本特地关注三种应用程序场景： 渐进式Web应用程序（PWA），将Web的拜访范畴与桌面应用程序的性能联合在一起。单页应用程序（SPA），一次加载并与Internet服务之间进行数据传输。将现有的Flutter挪动应用程序带到Web上，从而为两种体验启用共享代码。在过来的几个月中，在为稳固公布Web反对做筹备的同时，咱们在性能优化方面获得了许多停顿，增加了一个新的由WebAssembly构建的由CanvasKit驱动的渲染引擎。Flutter Plasma是由社区成员Felix Blaschke构建的演示，展现了应用Dart和Flutter构建简单的Web图形体验的简便性，这些体验也能够在桌面或挪动设施上本地运行。 咱们始终在扩大Flutter，以提供最佳的Web平台。最近几个月，咱们增加了文本主动填充性能，对地址栏URL和路由的管制以及PWA清单。而且因为台式机浏览器与挪动浏览器一样重要，因而咱们增加了交互式滚动条和键盘快捷键，减少了台式机模式下的默认内容密度，并减少了屏幕阅读器对Windows，macOS和Chrome OS上可拜访性的反对。 曾经提供了应用Flutter构建的Web应用程序的一些示例。在教育工作者中，iRobot以其风行的Root教育机器人而闻名。Flutter对网络的生产反对使iRobot能够利用其现有的教育编程环境并将其移至网络，从而将其可用性扩大到Chromebook和其余浏览器是最佳抉择的设施。iRobot的博客文章具体介绍了迄今为止的停顿以及为何抉择Flutter。 另一个例子是Rive，Rive为设计师提供了一个弱小的工具，可用于创立可公布到任何平台的自定义动画。他们的更新后的Web应用程序现已在Beta中提供，齐全由Flutter构建，并且是Flutter在此环境中能够提供的所有服务的一封情书。 您能够在咱们的Medium出版物上的专用博客文章中找到无关Flutter的更多信息。 台式机，可折叠设施和嵌入式设施上的Flutter 2除了传统的挪动设施和Web之外，Flutter越来越多地扩大到其余设施类型，咱们在明天的主题演讲中重点介绍了三个伙伴关系，这些伙伴关系证实了Flutter的便携性。 首先，Canonical与咱们单干将Flutter带入桌面，工程师们奉献了代码来反对Linux上的开发和部署。在明天的流动中，Ubuntu团队展现了由Flutter重写的新安装程序的晚期演示。对于Canonical来说，至关重要的是，它们能够在各种硬件配置上提供坚如磐石而又柔美的体验。展望未来，Flutter是Canonical创立的将来台式机和挪动应用程序的默认抉择。 其次，微软正在持续扩充对Flutter的反对。除了正在进行的单干以在Flutter中提供高质量的Windows反对外，明天微软还将公布对Flutter引擎的反对，以反对新兴的可折叠Android设施。这些设施引入了新的设计模式，其应用程序能够扩大内容或利用双屏个性提供并行体验。在Surface工程团队的博客文章中，他们展现了他们的工作，并邀请其他人退出他们，共同完成实用于Surface Duo和其余设施的高质量实现。 最初，世界上最滞销的汽车制造商丰田汽车发表了其打算，通过构建由Flutter提供能源的信息娱乐零碎，将最佳的数字体验带入车辆。应用Flutter标记着与过来开发车载软件的形式天壤之别。丰田之所以抉择Flutter，是因为其高性能和教训的一致性，疾速的迭代和开发人员的人机工程学以及智能手机层的触摸机制。通过应用Flutter的embedder API，Toyota能够针对车载零碎的独特需求量身定制Flutter。 ...

明天，Google公布了 Flutter 2.0的正式版本，至2018年Flutter 1.0版本公布以来，在最近的3年的工夫礼，Flutter进行了大量的降级以反对更多平台的开发需要。作为 Flutter 的重大降级，Flutter 2.0 减少了对桌面和 Web 应用程序的反对。 所以到目前地位，应用 Flutter 2.0 开发的利用能够公布到iOS，Android，Windows，macOS 和 Linux五个操作系统； 以及运行到 Chrome 、 Firefo， Safari 或 Edge等浏览器的 Web 版本上，甚至嵌入到 Cars， TVs 和智能家电中。能够说，把Flutter说成是一个全平台的开发框架也不为过。 Flutter 产品负责人 Tim Sneath 示意：“版本号的大晋升，次要归于对 Web 和桌面应用程序的反对。作为一个相当深远的支点，忽然领有如此宽泛的产品个性，也是相当常见的”。 得益于凋谢源代码的性质，Flutter 曾经在 Web 和桌面应用程序的反对上公开测试了有段时间，所以咱们对今日的布告也并不感到意外。 在明天公布的 Flutter 2.0 开始，Flutter 正式由一个专一于挪动开发的框架扩大到了反对全平台的开发框架。应用 Flutter 2.0，开发者能够让开发利用间接使用到各种不同的平台而简直不须要做出什么扭转。 总的来说，Flutter 2.0能够演绎成如下几点： Flutter 2.0 是 Flutter 的重要里程碑，它的指标是着重全端开发，反对Web端、挪动端和桌面端，甚至汽车、电视、智能家居设施等，细分零碎包含：iOS, Android, Windows, macOS, Linux 和 WebFlutter 2.0 使 Play Store 上 150,000 个已有的Flutter 利用，不需重写就能够反对桌面和web端Flutter 2.0 对Web端的反对进入稳固阶段，通过大量优化和减少新的渲染引擎，可用于正式产品开发Flutter 2.0 也开始发力桌面端，将与最风行的 Ubuntu Linux 开发商 Canonical 单干，使 Flutter 成为 Canonical 将来桌面端和挪动端的默认开发工具！同时，与微软的单干也将持续深刻，比方为 Surface Duo 等设施提供反对。Flutter 也在和汽车巨头丰田（Toyota) 单干，通过 embedder api 对 Flutter 进行定制，使 Flutter 成为丰田下一代车载信息娱乐零碎的开发工具Dart 语言为 Flutter 的倒退提供坚实基础，最新的 2.12 版本带来了空值平安以及稳固的 FFI 实现。Flutter WebFlutter 的Web 反对基于有硬件加速的2D和3D图形以及灵便的布局和绘画API，提供了以应用程序为核心的框架，该框架充分利用了古代Web所提供的所有劣势。在面向 Web 开发方面，Flutter 2.0 重点关注三种场景： ...

Flutter Engage 流动精彩来袭对 Flutter 团队的开发者们来说，交换的重要性显而易见，和您一样，咱们也心愿开发者们可能在不同的情境下进行互动分享。于是咱们为您筹备了一场特地的线上流动——Flutter Engage，诚邀 Flutter 开发者们的参加。 2021 年 3 月 3 日，太平洋规范工夫 9:30 (北京工夫 3 月 4 日 凌晨 1:30) 退出直播，您将有机会与寰球社区的 Flutter 开发者进行互动交换，畅谈翻新和单干，更有 "惊喜彩蛋" 等您揭晓！ 咱们也特地为中国开发者筹备了配有中文字幕的视频回放，将于流动当天公布在 Bilibili 等视频平台，敬请关注！ 您的专属 Dash 形象 欢送一起 设计您的专属 Dashatar 形象，TA 会领有何种身份，附加哪些属性，都由您决定。不消片刻，专属萌宠形象就会跃然于屏。您也能够在社区中纵情展现您 Dashatar 的魅力，听起来是不是很乏味？咱们也期待看到您的专属 Dashatar 形象，快来大展身手吧！ 期待关注心愿本次 Flutter Engage 流动能让您与 Flutter 的开发者们纵情交换，任意描述 Flutter 的倒退蓝图，实现一场欢快的交换体验，并在今后借助 Flutter 雕刻出更多精彩的作品。 Flutter 期待您的继续关注！

mixin 是 Dart 中十分重要的概念，对于未接触过此概念的Coder来说尤其重要，最近看源码的时候，因为对 mixin 不相熟导致了解呈现偏差，走了很多弯路，所以这篇文章介绍一下 mixin 概念。 Dart 及 Engine 版本： Engine • revision ae90085a84Tools • Dart 2.10.4请留神版本，不同的版本可能存在差别。 先来看下官网的定义： Mixins are a way of reusing a class’s code in multiple class hierarchies.Mixins 是一种在多个类层次结构中重用类代码的办法。 在来看下 Wiki 的解释： In object-oriented programming languages, a mixin (or mix-in) is a class that contains methods for use by other classes without having to be the parent class of those other classes. How those other classes gain access to the mixin's methods depends on the language. Mixins are sometimes described as being "included" rather than "inherited".Mixins encourage code reuse and can be used to avoid the inheritance ambiguity that multiple inheritance can cause (the "diamond problem"), or to work around lack of support for multiple inheritance in a language. A mixin can also be viewed as an interface with implemented methods. This pattern is an example of enforcing the dependency inversion principle. ...

用到的知识点Matrix4矩阵贝塞尔曲线第一步：画出指标运行大抵轨迹路线首先咱们先画一条二阶贝塞尔曲线，这样咱们能更直观的察看到指标挪动的大抵轨迹。咱们先确定二阶贝塞尔曲线的三个点：p0（开始点）、p1（控制点）、p2（完结点），像上图的红线轨迹，屏幕的中心点开始，达到屏幕的宽2/3的地位，那么p0和p2的点就能够确定了： // 二阶贝塞尔曲线 p0：开始点、p1：控制点、p2：完结点Offset p0, p1, p2;@overrideWidget build(BuildContext context) { Size _size = MediaQuery.of(context).size; if (p0 == null) { p0 = Offset(_size.width/2, _size.height/2); p1 = Offset(_size.width+_size.width/4, _size.height/4); p2 = Offset(_size.width*2/3, 0); }}复制代码失去二阶贝塞尔曲线的三个点之后就能够用 CustomPaint 把它画进去了，因为每次 setState 之后，build 会从新走一遍，所以我加了判断让它们只初始化一次就够了。 第二步：搁置纸飞机在屏幕的中心点Flutter外面应用矩阵是通过 Transform 这个 Widget 来设置的，Transform 有多个扩大构造方法，比方 Transform.rotate、Transform.translate、Transform.scale，有趣味的能够本人去理解一下，在这里咱们应用 Transform 默认的构造方法能力通过 Matrix4 来实现飞机的挪动、缩放、旋转。 // 矩阵Matrix4 _matrix4 = Matrix4.identity();// 飞机尺寸Size planeSize;@overrideWidget build(BuildContext context) { Size _size = MediaQuery.of(context).size; if (planeSize == null) { planeSize = Size(_size.width/4, _size.width/4); } return Stack( children: [ Container( alignment: Alignment.center, child: Transform( transform: _matrix4, child: SvgPicture.asset(Res.svg_paper_plane, width: planeSize.width, height: planeSize.height,), ), ), ], );}复制代码第三步：设置动画，通过动画计算飞机挪动轨迹等这一步最重要，波及到挪动轨迹、旋转角度和缩放倍数的计算，这外面波及到一些计算，我间接把代码贴出来（PS：毕竟我数学太过垃圾，这一步花了我好多工夫也没能找到挪动间隔、缩放倍数、旋转角度的最佳计算公式，只能本人一步一步缓缓调到大抵的视觉效果）。 ...

对于和我一样菜逼前端，不会 java 原生安卓的人，玩 flutter 真的好苦楚的说。 明天就谈谈我遇到的 flutter 播放器的问题 1：flutter 自带的 video_player,以及 video_player 的孙子们（ chewie，betterplayer，yoyo-player，等等）（不举荐应用） 市面上支流的大略是 video_player 和她的衍生品，然而这类播放器有几个要命的问题，1：video_player 自身对于分段源 m3u8 的播放十分不敌对，典型的问题就是某个分段在忽然网络有点不好的状况下申请失败，会导致 video_player 间接播放失败，貌似不会去反复申请，有常常下载 m3u8 视频的敌人们必定晓得，在下载的时候，太多的切片，总有那么一两个小片是会偶然超时一下，那么应用 video_player 播放就是炸胡，（播放到一半忽然呈现播放失败） 2：编译原生播放器到 flutter 应用 这一类典型的代表就是 fijkplayer，flutter_ijkplayer 。这两个播放器差不多，前者 fijkplayer 作者保护的更勤一些。不过前者 fijkplayer 作者重视播放器性能和 bug 修复，皮肤和根本应用上的欠缺作者心愿用户自行解决，说文言就是你本人去写皮肤和手势那些，会减少工夫，新人应用不是很敌对 flutter_ijkplayer 作者上一次提交代码如同是 3 月份的时候，差不多挺久了，文档貌似不全，益处是皮肤有自带的，至于想自定义皮肤，只能齐全参考源码。益处是自带有手势拖动快进，快退 3：原生播放器与 flutter 交互（我也不晓得应该怎么算这类播放器，没方法，我菜逼新人） 典型代表 flutter_tencentplayer，这款播放器，是我目前见过 flutter 这边能找到能用的最好的一款了，性能方面都很好，手势拖动都有。害处是，文档阐明不全（指的是老手用），要看源码找下。也不晓得是我太菜，还是什么起因我集体应用的时候，没有胜利的时候，说人话就是我不会用这个播放器，也没方法打包，报错哇哇的，解决不了。 不过我见过他人胜利应用 flutter_tencentplayer 打包的 app，的确成果很好。 毛病，可能上手不是很容易，打包文档方面，反正我不会。不能在模拟器预览貌似，只能真机 在绕了一圈之后，差不多一年过来了，播放器这些也没什么变动，还是那样 最初我抉择了 fijkplayer，然而 fijkplayer 没有手势快进，皮肤也就那样。据作者 github 说是有打算弄，然而一年过来了也没看到，没方法本人瞎逼改了改，进去个包，是个 fijkplayer 的简略皮肤， 性能上就是丑化了下播放器 ui，退出了手势滑动快进快退，本来打算也退出上滑下滑操作亮度和音量的，然而发现作者文档说批改音量须要批改 java 原生入口文件，所以就放弃了。 皮肤地址 https://github.com/abcd498936590/fijkplayer_skin ...

首先 Flutter 是一个十分高性能的框架，因而大多时候不须要开发者做出非凡的解决，只须要防止常见的性能问题即可取得高性能的应用程序。 重建最小化准则在调用 setState() 办法重建组件时，肯定要最小化重建组件，没有变动的组件不要重建，看上面的Demo，这是一个设置页面， import 'package:flutter/material.dart';class SettingDemo extends StatefulWidget { @override _SettingDemoState createState() => _SettingDemoState();}class _SettingDemoState extends State<SettingDemo> { Widget _item( {IconData iconData, Color iconColor, String title, Widget suffix}) { return Container( height: 45, child: Row( children: <Widget>[ SizedBox( width: 30, ), Icon( iconData, color: iconColor, ), SizedBox( width: 30, ), Expanded( child: Text('$title'), ), suffix, SizedBox( width: 15, ), ], ), ); } bool _switchValue = false; @override Widget build(BuildContext context) { return Column( children: <Widget>[ _item( iconData: Icons.notifications, iconColor: Colors.blue, title: '是否容许4G网络下载', suffix: Switch( value: _switchValue, onChanged: (value) { setState(() { _switchValue = value; }); }), ), Divider(), _item( iconData: Icons.notifications, iconColor: Colors.blue, title: '音讯核心', suffix: Text( '12条', style: TextStyle(color: Colors.grey.withOpacity(.5)), ), ), Divider(), _item( iconData: Icons.thumb_up, iconColor: Colors.green, title: '我赞过的', suffix: Text( '121篇', style: TextStyle(color: Colors.grey.withOpacity(.5)), ), ), Divider(), _item( iconData: Icons.grade, iconColor: Colors.yellow, title: '珍藏集', suffix: Text( '2个', style: TextStyle(color: Colors.grey.withOpacity(.5)), ), ), Divider(), _item( iconData: Icons.account_balance_wallet, iconColor: Colors.blue, title: '我的钱包', suffix: Text( '10万', style: TextStyle(color: Colors.grey.withOpacity(.5)), ), ), ], ); }} ...

老孟导读：这是2021年源码系列的第一篇文章，其实源码系列的文章不是特地受欢迎，一个起因是原理性的常识十分干燥，我本人看源码的时候特地有感触，二是想把源码剖析讲的通俗易懂十分艰难，本人明确 和 让他人听懂齐全是两回事。不过我仍然会保持 Flutter 源码系列的文章，进步本人的技术水平的同时，也心愿大家播种一些常识。为了使源码系列的文章不那么干燥，文章中会有很多流程图，流程图比纯文字更直观，一图胜千言。 我也是第一次写源码系列的文章，如果文章哪里有不对的中央请通知我，尽管我也不肯定听????，开个玩笑。 心愿大家来个 赞，您的 赞是我写下去的微小能源????。 所有源码系列文章都会分享到我集体博客：http://laomengit.com/ 注释留神：应用的 Flutter 版本 和 Dart 版本如下：Flutter 1.22.4 • channel stable • https://github.com/flutter/fl...Framework • revision 1aafb3a8b9 (6 weeks ago) • 2020-11-13 09:59:28 -0800Engine • revision 2c956a31c0Tools • Dart 2.10.4 不同的版本可能有所不同，请留神版本之间的区别。 首先， InheritedWidget 是一个十分重要，十分重要，十分重要的组件，重要的事件说3遍????，零碎中很多性能都是功能型组件都是通过 InheritedWidget 实现的，驰名的 Provider 状态治理框架也是基于 InheritedWidget 实现的，因而不论是工作中，还是面试，InheritedWidget 组件的原理及应用场景都是考查的重点。 此篇文章包含如下几个局部： InheritedWidget 组件简介，是什么场景下应用 InheritedWidget？InheritedWidget 根本用法。InheritedWidget 源码剖析。InheritedWidget 组件简介InheritedWidget 组件是功能型组件，提供了沿树向下，共享数据的性能，即子组件能够获取父组件(InheritedWidget 的子类)的数据，通过BuildContext.dependOnInheritedWidgetOfExactType 获取。 InheritedWidget 组件的共享数据是沿着树从上到下，是否联想到 Notification，Notification 正好与 InheritedWidget 传递方向相同，Notification 是沿着树从下到上，两者性能的实现都是子节点被动发动，InheritedWidget 组件的子节点被动查找父节点上 InheritedWidget 共享的数据，Notification 也是子节点被动发动告诉，沿着树向上告诉。 ...

老孟导读：这是2021年源码系列的第一篇文章，其实源码系列的文章不是特地受欢迎，一个起因是原理性的常识十分干燥，我本人看源码的时候特地有感触，二是想把源码剖析讲的通俗易懂十分艰难，本人明确 和 让他人听懂齐全是两回事。不过我仍然会保持 Flutter 源码系列的文章，进步本人的技术水平的同时，也心愿大家播种一些常识。为了使源码系列的文章不那么干燥，文章中会有很多流程图，流程图比纯文字更直观，一图胜千言。 我也是第一次写源码系列的文章，如果文章哪里有不对的中央请通知我，尽管我也不肯定听????，开个玩笑。 心愿大家来个 赞，您的 赞是我写下去的微小能源????。 所有源码系列文章都会分享到我集体博客：http://laomengit.com/ 注释留神：应用的 Flutter 版本 和 Dart 版本如下：Flutter 1.22.4 • channel stable • https://github.com/flutter/fl...Framework • revision 1aafb3a8b9 (6 weeks ago) • 2020-11-13 09:59:28 -0800Engine • revision 2c956a31c0Tools • Dart 2.10.4 不同的版本可能有所不同，请留神版本之间的区别。 首先， InheritedWidget 是一个十分重要，十分重要，十分重要的组件，重要的事件说3遍????，零碎中很多性能都是功能型组件都是通过 InheritedWidget 实现的，驰名的 Provider 状态治理框架也是基于 InheritedWidget 实现的，因而不论是工作中，还是面试，InheritedWidget 组件的原理及应用场景都是考查的重点。 此篇文章包含如下几个局部： InheritedWidget 组件简介，是什么场景下应用 InheritedWidget？InheritedWidget 根本用法。InheritedWidget 源码剖析。InheritedWidget 组件简介InheritedWidget 组件是功能型组件，提供了沿树向下，共享数据的性能，即子组件能够获取父组件(InheritedWidget 的子类)的数据，通过BuildContext.dependOnInheritedWidgetOfExactType 获取。 InheritedWidget 组件的共享数据是沿着树从上到下，是否联想到 Notification，Notification 正好与 InheritedWidget 传递方向相同，Notification 是沿着树从下到上，两者性能的实现都是子节点被动发动，InheritedWidget 组件的子节点被动查找父节点上 InheritedWidget 共享的数据，Notification 也是子节点被动发动告诉，沿着树向上告诉。 ...

老孟导读：此篇文章是生命周期相干文章的番外篇，在查看源码的过程中发现了这一乏味的问题，欢送大家一起探讨。Flutter 中Stateful 组件的生命周期：http://laomengit.com/blog/20201227/Stateful%E7%BB%84%E4%BB%B6%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F.html Flutter 中与平台相干的生命周期：http://laomengit.com/blog/20201227/%E7%9B%B8%E5%85%B3%E5%B9%B3%E5%8F%B0%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F.html 博客中还有更多精彩文章，也欢送退出 Flutter 交换群。 灵活性将 build 办法放在 State 中比放在 StatefulWidget 中更具灵活性，比如说，AnimatedWidget 是 StatefulWidget 的子类，AnimatedWidget 是一个抽象类，其中有一个 Widget build(BuildContext context) 的形象办法，此办法须要子类重写，AnimatedWidget 源代码如下： abstract class AnimatedWidget extends StatefulWidget { ... /// Override this method to build widgets that depend on the state of the /// listenable (e.g., the current value of the animation). @protected Widget build(BuildContext context); /// Subclasses typically do not override this method. @override _AnimatedState createState() => _AnimatedState(); ...}删除了一些代码，保留了重点代码。 ...

老孟导读：此文介绍一个自定义组件，欢送大家到 Github 上给个小星星，Github 还有很多我整顿的 Flutter 资源。 WriteText 组件是一个文本步进组件，即字符一个一个显示，就像手写一样。 pub 地址：https://pub.dev/packages/write_textGithub 地址：https://github.com/781238222/flutter-do/tree/master/write_text 引入软件包在 pubspec.yaml 中增加如下依赖： dependencies: write_text: ^0.0.1执行命令： flutter pub get应用WriteText(data: 'StepText 是一个步进文本组件，即字符一个一个显示，就像手写一样。'), 默认状况下，每个字符呈现时长是 300 ms，设置时长为 1 秒： WriteText( data: 'StepText 是一个步进文本组件，即字符一个一个显示，就像手写一样。', perMillSeconds: 1000,) 设置字体款式 WriteText( data: 'StepText 是一个步进文本组件，即字符一个一个显示，就像手写一样。', textStyle: TextStyle(fontSize: 20, color: Colors.red),) 设置不显示光标： WriteText( data: 'StepText 是一个步进文本组件，即字符一个一个显示，就像手写一样。', showCursor: false,),设置自定义光标： WriteText( data: 'StepText 是一个步进文本组件，即字符一个一个显示，就像手写一样。', cursor: Container( width: 2, height: 16, color: Colors.red, ),) 被动管制组件的启动和暂停： WriteTextController _controller = WriteTextController();bool starting = false;RaisedButton( onPressed: () { if (starting) { starting = false; _controller.stop(); } else { starting = true; _controller.start(); } setState(() {}); }, child: Text('${starting ? '暂停' : '启动'}'), ), WriteText( data: _data, controller: _controller, autoStart: false, ), ...

老孟导读：这是官网颁布的2021年路线图，向咱们展现了2021年 Flutter 的次要工作及打算。原文地址：https://github.com/flutter/flutter/wiki/Roadmap。 Null safetyFlutter 将反对 Dart 的 sound null safety（空平安），并将插件和软件包生态系统的迁徙扩大到反对空平安，包含Flutter团队间接保护的软件包和插件。 在此过程中，Flutter 团队打算提供迁徙工具，示例和文档，以帮忙迁徙现有代码。 Null safety 曾经公布了 beta 版本，2021年将会迁徙到稳固版本，此个性无效的防止了空指针异样，kotlin 和 swift 中都蕴含此个性，如果以前接触过，根本没有学习老本。Android and iOS反对从商店增量下载资源和代码（受每个平台的限度），从而容许应用程序的初始下载比残缺下载小得多，并能够按需获取数据。 努力提高将Flutter嵌入Android和iOS上现有应用程序的性能和人体工程学，并缩小其开销。 此外，与平常一样，咱们打算减少对iOS和Android操作系统新性能的反对。 当看到反对增量下载资源和代码，我第一想法就是Flutter反对热更新了？而后我又仔仔细细的读了很多遍，发现并不是热更新，原文中有一个限定条件从商店（from the stores），版本的更新仍然依赖利用商店，大概率后期只有 google 的利用商店反对此性能。前面两点就是比拟惯例的性能优化和零碎新版本性能的反对。 反对Web and Desktop咱们2021年的指标是，除了iOS和Android外，还为Web，macOS，Windows和Linux提供生产品质的反对，使开发人员能够应用同一SDK在六个不同的平台上创立应用程序。 特地是对于Web，随着咱们一直证实Flutter能够在Web上提供高质量的体验，咱们的重点将放在保真度和性能上，而不是新性能上。 对于台式机，除了确保高质量的体验外，咱们还将在可拜访性层上实现工作，并减少对显示多个独立窗口的反对。 这个相对是最重磅的更新了，往年 Flutter 公布Web、macOS、Windows、Linux正式稳固版本（据小道消息 Flutter 将在往年3月3日，Flutter流动中正式公布 Web 版本），此时 Flutter 将实现前所未有的大一统，集体预计，后半年Flutter将会迎来爆炸式增长。改善开发人员体验咱们将持续致力于优化开发体验。 缩小实现Flutter所需的样板代码。研发 Null safety 的迁徙工具。钻研创立可能使重大更改更易于开发人员治理的工具，这将使咱们可能对咱们领有的API进行一些长期冀望的改良。生态系统在2021年，咱们将持续与社区合作开发Flutter-team反对的插件。 指标是使预发行插件达到生产品质。 咱们还专门打算对WebView插件进行重大改良。 品质咱们将基于Flutter的理论应用程序的教训，致力改善Flutter的内存使用率，应用程序下载大小的开销，运行时性能，电池使用率和耗电量。 这些可能采取引擎或框架修复的模式，以及形容最佳实际的文档或视频的模式。 咱们还打算改良工具，以帮忙调试无关内存应用状况的问题。 此外，咱们将持续解决Bug。 2020年，咱们全年解决了17,000多个问题，咱们的指标是至多在2021年达到这一程度。 新性能在2020年，咱们次要专一于修复谬误，而在2021年，咱们打算还增加重要的新性能。 下面列出了一些。 咱们还打算对表格（Table） 进行改良，并引入一些树（Tree）组件，以反对大量的列，行和/或树级别，以及跨列或跨行的单元格。 公布渠道和节奏Flutter将持续提供四个“渠道”，别离是：master, dev, beta and stable。 咱们打算每月（通常在本月初）公布一个beta版本，并在全年中公布大概四个稳固版本。 咱们建议您对公布给最终用户的应用程序应用稳固的渠道。 无关公布过程的更多详细信息，请参见Flutter构建公布渠道Wiki页面。 交换老孟Flutter博客（330个控件用法+实战入门系列文章）：http://laomengit.com ...

老孟导读：对于生命周期的文章共有2篇，一篇（此篇）是介绍 Flutter 中Stateful 组件的生命周期。第二篇是 Flutter 中与平台相干的生命周期， 博客地址：http://laomengit.com/blog/20201227/%E7%9B%B8%E5%85%B3%E5%B9%B3%E5%8F%B0%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F.html 博客中还有更多精彩文章，也欢送退出 Flutter 交换群。 此篇文章所说的生命周期与 StatefulWidget 组件的生命周期是不同的，这里平台相干的生命周期指的是特定平台相干操作所产生的生命周期，比方 Android 中 App 退到后盾后的onPause等。 有人下场景，App正在播放视频，此时回到手机桌面或者切换到其余App，那么此时视频应该暂停播放，Flutter 中应用 AppLifecycleState 实现： class AppLifecycle extends StatefulWidget { @override _AppLifecycleState createState() => _AppLifecycleState();}class _AppLifecycleState extends State<AppLifecycle> with WidgetsBindingObserver { @override void initState() { super.initState(); WidgetsBinding.instance.addObserver(this); } @override void didChangeAppLifecycleState(AppLifecycleState state) { if (state == AppLifecycleState.resumed) { //TODO } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('App 生命周期'), ), body: Center( child: Text(''), ), ); } @override void dispose() { WidgetsBinding.instance.removeObserver(this); super.dispose(); }}重点是重写 didChangeAppLifecycleState 办法，AppLifecycleState 中的状态包含：resumed、inactive、paused、detached。 ...

本文来自OPPO互联网技术团队，转载请注名作者。同时欢送关注咱们的公众号：OPPO_tech，与你分享OPPO前沿互联网技术及流动。Flutter是目前风行的高性能跨平台UI框架，图形库skia是其跨平台的基石。本文将深入分析skia的图形、字体、图片的渲染原理，如何开掘硬件个性，为UI性能优化提供思路。 1. 引言Flutter是目前十分风行的跨平台UI开发框架，不仅反对Android、iOS，还反对Windows、Linux等操作系统。Flutter的性能十分高，领有120fps的刷新率。那么flutter是如何实现在不同平台上高性能绘制图形图像的呢？首先咱们剖析下Flutter App和原生Android App、原生iOS App的UI绘制原理。 挪动App的整体UI框架大抵分成上面4个档次： 1）UI库 跟Android、iOS原生开发相似，Flutter用dart语言实现一整套UI控件。Flutter先将控件树转成渲染树，而后交由skia库绘制界面。 2）图形库 Skia图形库跟iOS平台的CoreAnimation等库性能相似，不仅提供了图形渲染性能，还提供文字绘制和图片显示性能。高级图形图像库将须要绘制的图形转成点、线、三角形等图元，再调用底层图形接口实现绘制。 3）低级图形接口 OpenGL是应用最广的低级图形接口，兼容性最好，基本上反对市面上的所有GPU。Vulkan是最近几年新推出的图形API，除了iPhone的GPU，其余厂家的GPU根本都反对。Metal是苹果新推出的图形API，只反对自家GPU。 4）硬件设施层 目前的挪动设施出于性能思考，大部分图形都是通过GPU渲染，多数状况也会应用CPU渲染，后文会介绍skia应用CPU和GPU渲染的具体场景。 iPhone 在A11芯片以前应用power vr系列GPU，之后采纳自研GPU。安卓手机大部分采纳高通Adreno GPU或ARM mail GPU。GPU渲染完一帧图像后送FrameBuffer，最初在适合的机会展现在屏幕上。 Skia利用宽泛并且跨平台，不仅用于Flutter和Android操作系统，还用于Google Chrome浏览器，同时反对windows、Mac、iOS操作系统。Skia由C++编写，代码开源，通过钻研skia有助于了解图形图像的绘制原理，为UI性能优化提供思路。 2. skia 框架剖析2.1 Skia内部组件依赖Skia依赖的第三方库泛滥，包含字体解析库freeType,图片编解码库libjpeg-turbo、libpng、libgifocode、libwebp和pdf文档解决库fpdfemb等。Skia反对多种软硬件平台，既反对ARM和x86指令集，也反对OpenGL、Metal和Vulkan低级图形接口。 2.2 Skia 档次剖析Skia在结构上大抵分成三层：画布层，渲染设施层和封装适配层。 2.2.1 画布层画布层能够了解成提供给开发者在一个设施无关的画布，能够在下面绘制各种图形，且不必关怀硬件细节，性能如下： 类别函数名含意画图形drawPoints画点画图形drawRect画矩形画图形drawVertices画多边形画图形drawRoundRect画圆角矩形画图形drawArc画圆弧画图形drawOval画椭圆画图形drawPath画矢量图绘制文字drawText显示文字显示图片drawBitmap显示位图2.2.2 渲染设施层渲染设施层负责画布层的硬件实现，skia将设施封装成上面三个类： 1）SKBitmapDevice CPU渲染模式绘图，用于没有显卡或者显卡驱动的设施。此模式下，最初会将须要绘制的图形转成位图数据（RGB）写入指定内存，故称为BitmapDevice。写内存操作通过AVX或者NEON指令集实现。 2）SKGPUDevice GPU渲染形式绘图。目前大部分挪动设施和个人电脑都有GPU，GPU比CPU的运算单元多，并行计算能力强，通过GPU绘图可升高CPU占用，性能更好。Flutter、最新版本的chrome和android零碎默认设置为GPU渲染模式。Chrome中的配置截图如下，可看到默认采纳GPU渲染。 3）SKPDFDevice 选用此设施时，渲染后果不是输入到显示器的画面，而是输入为pdf文件。 能够通过skia官网在线体验不同设施的渲染后果：https://fiddle.skia.org/c/@sh... 2.2.3封装适配层Skia为了屏蔽不同依赖库的接口差别，对依赖库进行了封装和适配。例如基于图片编解码库libjpeg-turbo、libpng、libwebp 封装了类SKJpegCodec、SKPngCodec、SKWebpCodec。基于底层图形库OpenGL、Metal、Vulkan封装了GrGLOpsRenderPass， GrMTOpsRenderPass, GrVKOpsRenderPass三个类。基于苹果平台CoreText字体库和开源字体FreeType封装了类SkScalerContext_Mac和SkScalerContext_FreeType。 Skia的内部依赖和层级构造解说结束，上面重点解说skia的图形、文字和图片的绘制原理。 3. 图形绘制原理Skia反对绘制的图形泛滥，包含圆形、椭圆、矩形、贝塞尔曲线等。下文重点剖析图形的CPU和GPU两种渲染模式的原理。 3.1 图形CPU渲染原理曲线的绘制波及的数学知识较多，本文不再开展，上面以绘制实心矩形为例阐明原理进行分析。 1）调用画布的绘图API 应用层调用画布SKCanvas的drawRect函数，传入左上角和右下角顶点坐标。 2）选用对应的设施的绘图API 因为抉择的是CPU渲染模式，故调用SKBitmapDevice的矩形绘图函数drawRect实现。 3）图形示意 所有的图形可分解成上面几种根本矢量图形的组合，矩形可示意成四条直线的组合。 曲线类型参数用处直线（一次贝塞尔曲线）终点坐标，起点坐标可示意绘制三角形、四边形等多边形圆锥曲线终点坐标，起点坐标，椭圆参数示意椭圆、圆弧、圆形二次贝塞尔曲线三个控制点示意TrueType字体、抛物线等曲线三次贝塞尔曲线四个控制点示意OpenType字体和其余曲线4）绘制算法实现 矢量图转成位图的过程称为光栅化。带填充的矩形光栅化过程比较简单，能够分解成绘制多条横线。 5）横线线绘制算法 每条横向的画法通过SKBlitter:: blitH实现。接口定义如下： ...

flutter提醒AndroidStudio4.1没有装置flutter插件，理论曾经装置 android studio4.1曾经装置flutter和dart 谬误起因通过一番查问，android studio 4.1降级过程中，扭转了plugin folder的门路：From : ~/Library/Application Support/AndroidStudio4.1To: ~/Library/Application Support/Google/AndroidStudio4.1/plugins具体各平台参见google链接: 点我（请确定能关上google）导致flutter doctor 1.22版本不能检测到插件。目前flutter曾经修复此问题在1.23版本（dev 分支）。 解决方案如果是windows零碎，能够通过更新flutter版本来解决，具体命令如下： flutter channel devflutter upgrade` upgrade中可能会遇到running pub upgrade始终运行，无奈进入下一步。依据官网的提醒： 官网中文网，须要配置国内镜像，具体如下：1、计算机->属性->高级零碎设置->环境变量，在环境变量下增加上面两个：PUB_HOSTED_URL https://pub.flutter-io.cnFLUTTER_STORAGE_BASE_URL https://storage.flutter-io.cn2、重启电脑3、将flutter SDK->bin目录->cache4、关上命令行，从新输出 flutter doctor，会主动降级 降级胜利后，再次运行flutter doctor 作者：杨小码

TextField根本属性const TextField({ Key key, this.controller, // 管制正在编辑文本 this.focusNode, // 获取键盘焦点 this.decoration = const InputDecoration(), // 边框装璜 TextInputType keyboardType, // 键盘类型 this.textInputAction, // 键盘的操作按钮类型 this.textCapitalization = TextCapitalization.none, // 配置大小写键盘 this.style, // 输出文本款式 this.textAlign = TextAlign.start, // 对齐形式 this.textDirection, // 文本方向 this.autofocus = false, // 是否主动对焦 this.obscureText = false, // 是否暗藏内容，例如明码格局 this.autocorrect = true, // 是否主动校对 this.maxLines = 1, // 最大行数 this.maxLength, // 容许输出的最大长度 this.maxLengthEnforced = true, // 是否容许超过输出最大长度 this.onChanged, // 文本内容变更时回调 this.onEditingComplete, // 提交内容时回调 this.onSubmitted, // 用户提醒实现时回调 this.inputFormatters, // 验证及格局 this.enabled, // 是否不可点击 this.cursorWidth = 2.0, // 光标宽度 this.cursorRadius, // 光标圆角弧度 this.cursorColor, // 光标色彩 this.keyboardAppearance, // 键盘亮度 this.scrollPadding = const EdgeInsets.all(20.0), // 滚动到视图中时，填充边距 this.enableInteractiveSelection, // 长按是否展现【剪切/复制/粘贴菜单LengthLimitingTextInputFormatter】 this.onTap, // 点击时回调}) InputDecoration属性详解InputDecoration({ this.icon, //位于装璜器内部和输入框后面的图片 this.labelText, //用于形容输入框，例如这个输入框是用来输出用户名还是明码的，当输入框获取焦点时默认会浮动到上方， this.labelStyle, // 管制labelText的款式,接管一个TextStyle类型的值 this.helperText, //辅助文本，位于输入框下方，如果errorText不为空的话，则helperText不会显示 this.helperStyle, //helperText的款式 this.hintText, //提醒文本，位于输入框外部 this.hintStyle, //hintText的款式 this.hintMaxLines, //提示信息最大行数 this.errorText, //错误信息提醒 this.errorStyle, //errorText的款式 this.errorMaxLines, //errorText最大行数 this.hasFloatingPlaceholder = true, //labelText是否浮动，默认为true，批改为false则labelText在输入框获取焦点时不会浮动且不显示 this.isDense, //扭转输入框是否为密集型，默认为false，批改为true时，图标及间距会变小 this.contentPadding, //内间距 this.prefixIcon, //位于输入框外部起始地位的图标。 this.prefix, //事后填充的Widget,跟prefixText同时只能呈现一个 this.prefixText, //预填充的文本，例如手机号后面事后加上区号等 this.prefixStyle, //prefixText的款式 this.suffixIcon, //位于输入框前面的图片,例如个别输入框前面会有个眼睛，管制输出内容是否明文 this.suffix, //位于输入框尾部的控件，同样的不能和suffixText同时应用 this.suffixText,//位于尾部的填充文字 this.suffixStyle, //suffixText的款式 this.counter,//位于输入框右下方的小控件，不能和counterText同时应用 this.counterText,//位于右下方显示的文本，罕用于显示输出的字符数量 this.counterStyle, //counterText的款式 this.filled, //如果为true，则输出应用fillColor指定的色彩填充 this.fillColor, //相当于输入框的背景色彩 this.errorBorder, //errorText不为空，输入框没有焦点时要显示的边框 this.focusedBorder, //输入框有焦点时的边框,如果errorText不为空的话，该属性有效 this.focusedErrorBorder, //errorText不为空时，输入框有焦点时的边框 this.disabledBorder, //输入框禁用时显示的边框，如果errorText不为空的话，该属性有效 this.enabledBorder, //输入框可用时显示的边框，如果errorText不为空的话，该属性有效 this.border, //失常状况下的border this.enabled = true, //输入框是否可用 this.semanticCounterText, this.alignLabelWithHint, }) Flutter TextField 文本输入框的根本属性及详解

老孟导读：对于生命周期的文章共有2篇，第一篇是介绍 Flutter 中Stateful 组件的生命周期。博客地址：http://laomengit.com/blog/20201227/Stateful%E7%BB%84%E4%BB%B6%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F.html第二篇是 Flutter 中与平台相干的生命周期， 博客地址：http://laomengit.com/blog/20201227/%E7%9B%B8%E5%85%B3%E5%B9%B3%E5%8F%B0%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F.html 博客中还有更多精彩文章，也欢送退出 Flutter 交换群。 此篇文章介绍 StatefulWidget 组件的生命周期， StatefulWidget 组件的生命周期时十分重要的知识点，就像 Android 中 Activity 的生命周期一样，不仅在当前的工作中常常用到，面试也会常常被问到。 在 Flutter 中所有皆 组件，而组件又分为 StatefulWidget（有状态） 和 StatelessWidget（无状态）组件 ，他们之间的区别是 StatelessWidget 组件发生变化时必须从新创立新的实例，而 StatefulWidget 组件则能够间接扭转以后组件的状态而无需从新创立新的实例。 留神：应用的 Flutter 版本 和 Dart 版本如下：Flutter 1.22.4 • channel stable • https://github.com/flutter/fl...Framework • revision 1aafb3a8b9 (6 weeks ago) • 2020-11-13 09:59:28 -0800Engine • revision 2c956a31c0Tools • Dart 2.10.4 不同的版本 StatefulWidget 组件的生命周期会有差别。 上面的 StatefulWidget 和 State 结构图是StatefulWidget 组件生命周期的概览，不同版本的差别也能够比照此结构图。 ...

老孟导读：对于生命周期的文章共有2篇，第一篇是介绍 Flutter 中Stateful 组件的生命周期。博客地址：http://laomengit.com/blog/20201227/Stateful%E7%BB%84%E4%BB%B6%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F.html第二篇是 Flutter 中与平台相干的生命周期， 博客地址：http://laomengit.com/blog/20201227/%E7%9B%B8%E5%85%B3%E5%B9%B3%E5%8F%B0%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F.html 博客中还有更多精彩文章，也欢送退出 Flutter 交换群。 此篇文章介绍 StatefulWidget 组件的生命周期， StatefulWidget 组件的生命周期时十分重要的知识点，就像 Android 中 Activity 的生命周期一样，不仅在当前的工作中常常用到，面试也会常常被问到。 在 Flutter 中所有皆 组件，而组件又分为 StatefulWidget（有状态） 和 StatelessWidget（无状态）组件 ，他们之间的区别是 StatelessWidget 组件发生变化时必须从新创立新的实例，而 StatefulWidget 组件则能够间接扭转以后组件的状态而无需从新创立新的实例。 留神：应用的 Flutter 版本 和 Dart 版本如下：Flutter 1.22.4 • channel stable • https://github.com/flutter/fl...Framework • revision 1aafb3a8b9 (6 weeks ago) • 2020-11-13 09:59:28 -0800Engine • revision 2c956a31c0Tools • Dart 2.10.4 不同的版本 StatefulWidget 组件的生命周期会有差别。 上面的 StatefulWidget 和 State 结构图是StatefulWidget 组件生命周期的概览，不同版本的差别也能够比照此结构图。 ...

1 什么是Stream?Stream是Dart用来解决异步的API，和同样用来解决异步的Future不同的是，Stream能够异步的返回多个后果，而Future只能返回一个，如果你对Future有疑难，能够参考作者的上一篇文章，Dart根底——Dart异步Future与事件循环Event Loop。 2 如何创立Stream?1.1应用Stream的构造方法Stream periodicStream = Stream.periodic(Duration(seconds: 2), (num) { return num;});periodic构造方法次要有两个参数，第一个参数类型为Duration（工夫距离），第二个参数类型为Function，Function每隔一个Duration（工夫距离）会被调用一次,参数num为事件调用的次数，从0开始顺次递增。 翻阅源码 Stream.periodic是应用Timer.periodic加_SyncStreamController实现的 1.2将办法的返回值申明为StreamStream<String> timedCounter(Duration interval, [int maxCount]) async* { int i = 0; while (true) { //提早interval（工夫距离）执行一次 await Future.delayed(interval); //返回i i++ yield "stream返回${i++}"; if (i == maxCount) break; }}看到这里你可能会有一些疑难什么是async*和yield? yield为一个用async *润饰返回值为Stream的函数返回一个值，它就像return,不过他不会完结函数 Stream asynchronousNaturalsTo(n) async* { int k = 0; while (k < n) yield k++;}这里波及到了Dart的生成器函数概念，在这里你只须要简略了解yield的作用就能够了 1.3应用StreamController var _controller = StreamController<int>(); var _count = 1; createStream() { //函数每隔一秒调用一次 Timer.periodic(Duration(seconds: 1), (t) { _controller.sink.add(_count); _count++; }); }咱们次要应用_controller的两个属性，应用_controller.Stream获取流，应用_controller.sink.add向流中增加数据，下面的例子应用定时器，每隔一秒向流中增加数据_count。 ...

2020年是我经验的最不平庸的一年，这一年有遗憾、有播种，有感概，也有庆幸，庆幸本人还活着。 用一句话总结本人的2020，忙并播种着，累并高兴着。 《Flutter 实战入门》《Flutter 实战入门》是我第一本出版的书籍，往年6月上线。此书消耗了极大的精力，当然对本人的进步也是十分大的。 此书上架2个月后，因为对 Flutter 的理解更加深刻了，感觉其中有很多写的不是很好的中央，于是开始了重写之路，目前整个系列曾经重写实现，共16个章节。 全副分享到了集体博客：http://laomengit.com/guide/introduction/mobile_system.html 330个 Flutter 组件使用手册整顿实现了330+组件的具体用法，不仅蕴含UI组件，还蕴含了功能性的组件。 尽管整顿了 330+的组件根本用法，但并不是让你每一个都学习一遍，任何技术根本都是把握 20%就能够解决 80%的问题，因而只需学会根底组件就能够上手我的项目了，至于其余的控件只需大略浏览一下，做我的项目的时候遇到一些性能可能想起 Flutter 曾经提供了此组件就能够了。 因而不要看到330+个组件就心生恐怖，这不是一篇让你从入门到放弃的文章，而是一篇让你更快入门的文章。心愿你把此当成一本工具书，当用到的时候再来查阅。 在线查看地址：http://laomengit.com/flutter/widgets/widgets_structure.html Github 开源flutter-do目前 flutter-do 蕴含350多个组件用法、组件继承关系图、40多个 loading 组件，App降级、验证码、弹幕、音乐字幕 4个插件，一个小而全残缺的App我的项目。此开源我的项目将来也会持续保护。 地址： https://github.com/781238222/flutter-do Flutter 交换群创立微信交换群是为了让大家有一个能够交换Flutter技术的中央，意识更多的人，随着工夫的推移，人也越来越多，目前曾经有8个交换群，每个群300人左右，为了不便初学者，每隔一段时间会将初学者邀请到老群，心愿初学者的问题和疑难能有人及时答复。群里除里聊技术、也会聊人生、吹水，甚至游戏开黑????。 如果你也想退出交换群，请到我的博客或者Github中，外面有退出交换群的形式。 博客：http://laomengit.com/guide/introduction/mobile_system.html Github： https://github.com/781238222/flutter-do 总结这一年新了一本书、整顿了330多个组件用法手册，共 20多万字，开源了多个Flutter 插件。这一年过的十分空虚。 记得整顿330多个组件的时候，每天只睡4个小时左右，保持了3个多月，忙并播种着，累并高兴着。简直所有的业余时间都用在了这下面。 2021 瞻望马上进入2021年了，新的一年也给本人立一个flag吧，新的一年心愿实现 Flutter 源码剖析 和 进阶 系列文章，最近有读者问我文章更新的频率怎么变低了啊？ 一是正在整顿 Flutter 源码剖析 和 进阶 系列文章，每一篇文章破费的工夫更多了，所以将来一年很可能由以前的一周3、4篇文章变为每周一篇。 二是我要抽出更多的工夫陪我的小棉袄了，她正是成长的时候，心愿她衰弱高兴的成长起来????。 最初也祝大家2021年 恋情事业双丰收。 交换老孟Flutter博客（330个控件用法+实战入门系列文章）：http://laomengit.com 欢送退出Flutter交换群（微信：laomengit）、关注公众号【老孟Flutter】：

零碎版本：MacOS 10.15.61、装置AndroidStdiohttps://developer.android.goo...以后版本为4.1.1新建demo并能运⾏ 2、装置Xcode，间接在App Store装置，版本12.2新建demo并能运⾏ 3、装置vscode官网下载https://code.visualstudio.com版本1.49.1 4、装置Flutter4.1 终端中输⼊以下指令克隆项⽬，如果克隆失败须要挂代理git clone -b beta https://github.com/flutter/fl...4.2 导出到Flutter保留门路export PATH=pwd/flutter/bin:$PATH4.3执⾏ flutter doctorflutter doctor 是 flutter 对mac本机的环境配置诊断脚本，脚本后果会间接放出flutter 环境有哪些须要持续配置的。依照提醒执⾏脚本即可第一次执行提醒Android licenses 有问题，须要执⾏: flutter doctor --android-licenses⼀直输⼊“Y”执⾏，直到所有Android licenses 装置完，再执⾏⼀次flutter doctor。配置⽂件增加：export PATH=${PATH}:/Users/mac/FlutterSDK/flutter/bin:PATH 5、VScode 配置VS code的Flutter配置也很简略：关上VS code -> Extentions治理在搜寻框中搜寻 Flutter搜寻到Flutter, 点击装置即可Dart环境也是⾃动会装置好 6、创立第一个Flutter我的项目切换到项⽬⽬录下view -> Command Palette ，输⼊Flutter-> NewProject，而后输⼊项⽬名称（⼩写），选择项⽬门路。这期间须要设置之前下载好的SDK门路，之后重启。执⾏：export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"到这⼀步在android零碎曾经能失常运⾏demo了，但ios装置demo时失败。 7、装置CocoaPods，否则⽆法运⾏iOS程序,我间接装置的是1.8.4版本，装置最新版本须要降级ruby,否则装置失败sudo gem install cocoapods -v 1.8.4

Flutter Inkwell应用详解该文章属于【Flutter每周一组件】系列，其它组件能够查看该系列下的文章，该系列会不间断更新；所有组件的demo曾经上传值Github: https://github.com/xj124456/f... 欢送Star应用场景当须要给一个元素点击事件的时候，你能够用InkWell来包裹这个元素，它外面有罕用交互事件和点击成果，能够简略实现想要的成果 预览 组件参数阐明const InkWell({ Key key, Widget child, //子组件 GestureTapCallback onTap, //单击事件 GestureTapCallback onDoubleTap, //双击事件 GestureLongPressCallback onLongPress, //长按事件 GestureTapDownCallback onTapDown, //手指按下 GestureTapCancelCallback onTapCancel, //勾销点击事件 ValueChanged<bool> onHighlightChanged, //突出显示或进行突出显示时调用 ValueChanged<bool> onHover, //当指针进入或退出墨水响应区域时调用 MouseCursor mouseCursor, Color focusColor, //获取焦点色彩 Color hoverColor, //指针悬停时色彩 Color highlightColor, //按住不放时的色彩 MaterialStateProperty<Color> overlayColor, Color splashColor, //溅墨色彩 InteractiveInkFeatureFactory splashFactory, //自定义溅墨成果 double radius, //溅墨半径 BorderRadius borderRadius, //溅墨元素边框圆角半径 ShapeBorder customBorder, //笼罩borderRadius的自定义剪辑边框 bool enableFeedback = true, //检测到的手势是否应该提供声音和/或触觉反馈，默认true bool excludeFromSemantics = false, //是否将此小部件引入的手势从语义树中排除。默认false FocusNode focusNode, bool canRequestFocus = true, ValueChanged<bool> onFocusChange, bool autofocus = false, })案例代码Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter InkWell'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ InkWell( onTap: () { print('点击了'); }, child: ListTile( title: Text('InkWell的子组件是ListTile'), trailing: Icon(Icons.chevron_right), ), ), Divider(), InkWell( onTap: () { print('点击了'); }, highlightColor: Colors.blue, autofocus: true, child: Text('InkWell的子组件是Text'), ), Divider(), InkWell( onTap: () { print('必须要绑定事件，不然没成果'); }, borderRadius: BorderRadius.all(Radius.circular(50.0)), splashColor: Colors.red, child: Container( padding: EdgeInsets.all(10.0), child: Container( width: 200.0, height: 200.0, decoration: BoxDecoration( borderRadius: BorderRadius.all(Radius.circular(300.0))), padding: EdgeInsets.all(10.0), child: Text('InkWell的子组件是Container'), ), ), ), ], )), ); }感觉有用 ？喜爱就珍藏，顺便点个赞吧，你的反对是我最大的激励！微信搜 [DX前端框架知识库]，发现更多Vue, React, Flutter, Uniapp, Nodejs, Html/Css等前端常识和实战.DX前端，分享前端框架知识库，文章详见：dxong.com

作者 | 弗拉德起源 | 弗拉德（公众号：fulade_me) Text咱们先来看Text的构造函数都有哪些参数： const Text( this.data, { //data 就是咱们须要展现的文字 是字符串类型，这个是必传字段，其余的都是可选 Key key, //widget的标识 this.style, //文本款式，类型是TextStyle this.strutStyle, //用来设置最小行高的参数 this.textAlign, //文本的对齐形式，类型是TextAlign this.textDirection, // 文字方向，类型是TextDirection this.locale, //抉择用户语言和格局的标识符，类型是Locale，次要用于国际化 this.softWrap, //bool 类型 ，false标识文本只有一行，程度方向有限 this.overflow, //超出显示区域后的展现形式，类型是TextOverflow this.textScaleFactor, //double类型 示意文本绝对于以后字体的缩放系数，默认为1.0 this.maxLines, // int 类型，显示的最大行数 this.semanticsLabel, //String 类型，给文本加上一个语义标签 this.textWidthBasis, //一行或多行文本宽度的不同形式，类型是TextWidthBasis }) Text咱们重点介绍上面几个参数:data、style、textAlign、maxLines、overflow。1. 最简略的示例 Text("Fulade");2. 放大和放大 Text("文字放大1.5倍",textScaleFactor: 1.5);textScaleFactor是缩放参数，默认是1.0，设置小于1的参数是放大，设置大概1的参数是放大。3. 居中、居左和居右 Text( "居右显示" * 10, textAlign: TextAlign.right,);textAlign是地位参数，常见的枚举值有TextAlign.right、TextAlign.left和TextAlign.center。4. 单行显示 Text( "最多一行显示超过局部显示..." * 10, maxLines: 1, overflow: TextOverflow.ellipsis,);maxLines示意文字须要几行来显示，如果超过了要显示的行数，文字会被切断。应用overflow来设置切断文字的款式，overflow有以下几个枚举值： ...

如何应用异步Future什么是异步如果你的程序中有两个办法，这两个办法桉程序执行，第一个办法执行须要五秒，如果是同步代码，第二个办法会期待第一个办法执行完，才会被调用， 如果第一个办法是异步的，程序在执行第一个办法时，不会期待它执行完结，而是接着执行第二个办法，这样第二个办法就无需在第一个办法执行完之后被调用。 在客户端异步是十分有用的，如果你在初始化时有一个十分耗时，但又不须要它在ui画面响应前执行实现的办法，你就能够应用异步。 Dart异步解决库Future理解了异步的概念后，咱们来看一看如何在Dart中应用异步。 testFuture(); testFuture2(); Future testFuture() { //上面是一个耗时三秒的工作 return Future.delayed(Duration(seconds: 3), () => print('异步办法')); } testFuture2() { print("一般办法"); }控制台输入 将一个办法的返回值申明为Future这样这个办法就是异步的了。 Future的构造方法你也能够应用Future类的构造方法来应用异步 Future(() { print('异步办法'); });Future类的构造方法如下 一般的Future类结构Future(FutureOr<T> computation())创立一个提早几秒执行的Future duration参数来管制提早多久Future.delayed(Duration duration, [FutureOr<T> computation()])通过微工作队列解决的FutureFuture.microtask(FutureOr<T> computation())立刻返回后果的FutureFuture.sync(FutureOr<T> computation())Future.value([FutureOr<T>? value])Future.error(Object error, [StackTrace? stackTrace])构造方法演示 Future.delayed(Duration(seconds: 3), () => print('异步办法1'));Future(() { print('异步办法2');});Future.microtask(() => print('异步办法3'));Future.sync(() => print('异步办法4'));控制台输入如下 看到不同构造方法的执行程序，想必你曾经对不同的构造方法有所理解 值得一提的是Future所有的构造方法返回的都是Future对象，咱们能够进行链式调用 Future的链式调用当 future 执行实现后，then() 中的代码会被执行。 Future(() { print('异步办法');}).then((value) => print('异步办法2'));期待多个 Future有时代码逻辑须要调用多个异步函数， 并期待它们全副实现后再继续执行。 应用 Future.wait() 静态方法治理多个 Future 以及期待它们实现： ...

[Flutter配置防踩坑指南]() 这个镜像不保护了，换成清华的，把原来的环境配置替换成新的就行 清华flutter镜像 FLUTTER_STORAGE_BASE_URL="https://mirrors.tuna.tsinghua.edu.cn/flutter" PUB_HOSTED_URL="https://mirrors.tuna.tsinghua.edu.cn/dart-pub"或者以下几个也能够试试 上海交大 Linux 用户组应用反向代理形式建设的 Flutter 镜像，数据与站源实时同步。 Pub API 返回值未做解决，可能造成无法访问的状况。 PUB_HOSTED_URL=https://dart-pub.mirrors.sjtug.sjtu.edu.cnFLUTTER_STORAGE_BASE_URL=https://mirrors.sjtug.sjtu.edu.cnCNNIC基于 TUNA 协会的镜像服务，数据策略与 TUNA 统一，通过非教育网的域名拜访。 PUB_HOSTED_URL=http://mirrors.cnnic.cn/dart-pubFLUTTER_STORAGE_BASE_URL=http://mirrors.cnnic.cn/flutter腾讯云开源镜像站定时（每天凌晨）与 TUNA 协会镜像同步，数据有提早，访问速度有待反馈。 PUB_HOSTED_URL=https://mirrors.cloud.tencent.com/dart-pubFLUTTER_STORAGE_BASE_URL=https://mirrors.cloud.tencent.com/flutter

作者 | 弗拉德起源 | 弗拉德（公众号：fulade_me) 类Dart是一种面向对象的语言，所有对象都是一个类的实例，而所有的类都继承自Object类。每个除了Object类之外的类都只有一个超类，一个类的代码能够在其它多个类继承中重复使用。 类的实例变量上面是申明实例变量的示例： class Point { double x; // 申明 double 变量 x 并初始化为 null。 double y; // 申明 double 变量 y 并初始化为 null double z = 0; // 申明 double 变量 z 并初始化为 0。}所有未初始化的实例变量其值均为null。 所有实例变量均会隐式地申明一个Getter 办法，非final类型的实例变量还会隐式地申明一个Setter办法 class Point { double x; double y;}void main() { var point = Point(); point.x = 4; // 应用 x 的 Setter 办法。 assert(point.x == 4); // 应用 x 的 Getter 办法。 assert(point.y == null); // 默认值为 null。}如果你在申明一个实例变量的时候就将其初始化（而不是在构造函数或其它办法中），那么该实例变量的值就会在对象实例创立的时候被设置，该过程会在构造函数以及它的初始化器列表执行前。 ...

作者 | 弗拉德起源 | 弗拉德（公众号：fulade_me) 运算符运算符是一种通知编译器执行特定的数学或逻辑操作的符号。Dart语言内置了丰盛的运算符，并提供了以下类型的运算符：算术运算符、关系运算符、类型判断运算符、赋值运算符、逻辑运算符、按位和移位运算符、条件表达式、级联运算符以及其余运算符。 算数运算符算数运算符形容+加-减- 表达式一元负, 也能够作为反转（反转表达式的符号）*乘/除~/除并取整%取模示例： assert(2 + 3 == 5);assert(2 - 3 == -1);assert(2 * 3 == 6);assert(5 / 2 == 2.5); // 后果是一个浮点数assert(5 ~/ 2 == 2); // 后果是一个整数assert(5 % 2 == 1); // 取余assert('5/2 = ${5 ~/ 2} r ${5 % 2}' == '5/2 = 2 r 1');Dart 还反对自增自减运算符： 自增自减运算符形容++ varvar = var + 1 (表达式的值为 var + 1)var ++var = var + 1 (表达式的值为 var)-- varvar = var – 1 (表达式的值为 var – 1)var --var = var – 1 (表达式的值为 var)示例： ...

作者 | 弗拉德起源 | 弗拉德（公众号：fulade_me) 函数Dart 同样也是一种面向对象的语音。所以即使函数也是一个对象。类型为 Function，这意味着函数可做作为变量，也也能够作为函数的参数。上面是定义一个函数的例子： isEmpty(List aList) { return aList.length == 0;}为了标准其实咱们须要在函数的头部申明一下返回值类型，当然如果不申明也能够运行， bool isEmpty(List aList) { return aList.length == 0;}如果函数体内只蕴含一个表达式，你能够应用简写语法： bool isEmpty(List aList) => aList.length == 0;=> 表白的 是 { return 表达式; } 的简写，有时=>也称之为胖箭头语法。 参数函数能够有两种模式的参数：必选参数 和 可选参数。必选参数定义在参数列表后面，可选参数肯定是定义在必要参数前面。 可选的命名参数当你调用函数时，能够应用 参数名: 参数值 的模式来指定命名参数。例如： enableFlags(bold: true, hidden: false);已命名的参数是可选参数了，除非他们被特地标记为 required。 定义函数时，应用 {param1, param2, …} 来指定命名参数： /// 设置 [bold] 和 [hidden] 标识……void enableFlags({bool bold, bool hidden}) {...}尽管命名参数是可选参数的一种类型，然而你依然能够应用 @required 注解来标识一个命名参数是必须的参数，此时调用者则必须为该参数提供一个值。例如： ...

作者 | 弗拉德起源 | 弗拉德（公众号：fulade_me) 管制语句Dart语言的管制语句跟其余常见语言的管制语句是一样的，根本如下： if 和 elsefor 循环while 和 do-while 循环break 和 continueswitch 和 caseassert文章首发地址 If 和 ElseDart 反对 if - else 语句，其中 else 是可选的，比方上面的例子。 int i = 0;if (i == 0) { print("value 0");} else if (i == 1) { print("value 1");} else { print("other value");}如果要遍历的对象实现了 Iterable 接口，则能够应用 forEach() 办法，如果不须要应用到索引，则应用 forEach 办法是一个十分好的抉择： Iterable接口实现了很多办法，比如说 forEach()、any()、where()等，这些办法能够大大精简咱们的代码，缩小代码量。var callbacks = [];for (var i = 0; i < 2; i++) { callbacks.add(() => print(i));}callbacks.forEach((c) => c());像 List 和 Set 等，咱们同样能够应用 for-in 模式的 迭代： ...

问题Apple M1的确性能很强，开发flutter体验也很好，然而在打adhoc包时会报错： IPA processing failed这个问题如果去搜寻的话，根本就是让你移除framework里的x86架构，然而点进去log就会看到： 所以其实还是M1的兼容性的问题。 解决有两个计划 计划一：改设置把这个设置改到iOS 13+ Xcode –>Build Settings –>iOS Deployment Target–>iOS 13.0 or later计划二：移除问题库关上Xcode的 Window > Organizer右键你的App > 在Finder显示右键第一个 .xcarchive 文件 > 显示包内容右键点 /Products/Applications > 显示包内容移除所有的： lib*.dylib再点distribute app 即可完结如果有帮到你，欢送给我点个赞，谢谢。

导读： 在《会展云技术解读》专题中，咱们先发推出了 5 篇文章，别离从平安、设计、智能举荐零碎、挪动监控、视频直播等维度深刻解读会展云背地的技术能力： 平安篇——多重平安保障护航云上会展 设计篇——基于服务设计的线上展览 智能举荐篇——深度解读智能举荐零碎搭建之路 挪动监控篇——面对突发事变，APP如何做好解体剖析与性能监控？ 后疫情时代的会展云，如何打造一场完满视频直播？ 本篇文章咱们将持续介绍会展云中的Flutter技术利用。 会展云解决方案笼罩了业务，技术，平台，利用四个层面，业务层面提供科技感十足的云上展厅、多种模式的论坛会议等；利用层面有多种解决方案，直播解决方案、视频会议解决方案、挪动研发解决方案等；技术层面依靠海量弹性云计算能力和短缺可扩大的云存储及带宽资源，集成了多种京东中台平台的能力，有技术中台、数据中台、智能中台及业务中台能力，可疾速响应前台利用的需要。 作为云上展会，最终出现给宽广参会者的对外窗口必然是网站、APP、H5、小程序等线上零碎，挪动开发必然是重中之重。 家喻户晓，Flutter是谷歌公司提供的跨平台UI工具包，反对跨Android、iOS等多个平台复用代码，同时容许应用程序间接与根底平台的服务交互。其设计目标是使开发人员可能在不同平台上尽量复用代码，交付高性能的利用。 作为可扩大的分层零碎，Flutter有一系列独立的库，每一个库都依赖于更底层的库。对于操作系统来说，Flutter利用和其余的原生利用的打包形式雷同。平台特定的嵌入器提供一个入口点，和底层操作系统进行协商，拜访诸如渲染界面、输入输出、音讯事件循环等服务。通过嵌入器，能够将Flutter代码作为模块集成到现有应用程序，也能够作为一个残缺的利用。 作为Flutter的外围组成部分，Flutter Engine次要由C++编写，提供了外围API的低级实现，包含图像，文本布局，文件和网络I/O，插件架构以及Dart运行时和编译工具链。开发人员通过Flutter Framework与Flutter交互，该框架提供了一种以Dart语言编写的响应式框架，包含一系列丰盛的组件、根底库。 不久前胜利举办的中国国内服务贸易交易会（简称服贸会）首次采取新模式——线上线下展会交融，而服贸会APP作为云上展会对外运维的重要窗口，为来自寰球不同规模、不同行业的参展商、采购商提供展览展现、论坛会议、洽谈签约的数字平台。 在本次服贸会APP开发中，局部功能模块采纳Flutter开发，咱们将Flutter实现的性能以一个模块的形式嵌入到主APP中运行。Android以AAR（Android Archive）的形式嵌入，iOS以Framework的形式嵌入。集成形式非常简单，以Android为例：进入Flutter module目录，执行flutter build aar，依照命令的输入后果进行集成。 Flutter module和原生模块之间通过Platform Channel进行通信。Flutter定义了三种不同类型的Channel, 别离如下：  三种Channel尽管互相独立，设计上很类似，都蕴含如下重要的变量： 音讯在发送方先通过 codec进行编码，而后通过messenger发送，最初在接管方通过codec解码。 目前咱们的混合开发只进行了页面级别的实际，一次展现一个残缺的Flutter页面，不存在原生页view和Flutter view在同一页面混合展现的状况。原生和Flutter之间只须要反对页面跳转，没有大量的数据传输要求。基于此咱们只采纳了MethodChannel进行通信。代码如下： flutter端： Android： 编辑 删除 对于混合开发的老本，在刚接入时存在肯定的学习和试错老本，相熟之后会顺利很多。一套代码通过适配能够运行在两个平台上，对开发效率是很大的晋升。 欢送点击【京东智联云】，理解开发者社区 更多精彩技术实际与独家干货解析 欢送关注【京东智联云开发者】公众

作者 | 弗拉德起源 | 弗拉德（公众号：fulade_me) 2011年10月10日的GOTO大会上，谷歌的两位工程师公布了“Dart”；Dart是一种全新的编程语言，旨在帮忙开发者构建Web应用程序。Dart 1.0于2013年11月14日公布。咱们日常开发Flutter应用的就是Dart语言，所以咱们有必要理解一下Dart语言的应用办法。文章首发地址 类型平安的语言Dart 语言是类型平安的语言，然而因为其反对类型推断，因而大多数变量不须要显式地指定类型：例如 /// 初始化一个字符串var name = 'Fulade';/// Int类型var year = 1995;/// 浮点数类型var antennaDiameter = 3.7;/// 数组var list = ['Java', 'Python', 'C++', 'C'];/// 字典类型var image = { 'tags': ['土星'], 'url': '//path/to/saturn.jpg'};变量上面的示例代码将创立一个变量并将其初始化： var name = 'Fulade';变量仅存储对象的援用。这里名为 name 的变量存储了一个 String 类型对象的援用，'Fulade' 则是该对象的值。name 变量的类型被推断为 String，然而你能够为其指定类型。如果一个对象的援用不局限于繁多的类型，能够将其指定为 Object 或 dynamic 类型。 dynamic name = 'Bob';除此之外你也能够指定类型： String name = 'Bob';默认值在 Dart 中，未初始化的变量领有一个默认的初始化值：null。即使数字也是如此，因为在 Dart 中所有皆为对象，数字也不例外。 int lineCount;if(lineCount == null) { print("line is null");}Final 和 Const如果你不想更改一个变量，能够应用关键字 final 或者 const 润饰变量，这两个关键字能够代替 var 关键字。须要留神的是：final 变量只能够被赋值一次；const 变量是一个编译时常量。（const 变量同时也是 final）被final润饰的变量在第一次应用的时候被初始化。上面的示例中咱们创立并设置两个 final 变量： ...

先调用模拟器的adb，关上连贯D:/program/common/mumu/emulator/nemu/vmonitor/bin/adb_server.exe connect 127.0.0.1:7555运行 adb connect 127.0.0.1:7555

Flutter我的项目构造理解Flutter的目录构造，能够帮忙咱们更好的治理和开发我的项目。这样咱们在开发的过程中就会很分明的晓得，iOS代码该放在那里，Android代码该放在那里，Flutter代码该放在哪里，测试代码放在哪里等等。 咱们以上一节中创立的flutter_app为例，咱们用VSCode关上它。 如图，咱们看到了上面这些目录： 文件或目录阐明.dart_tool记录了一些dart工具库所在的地位和信息.ideaandroid studio 是基于idea开发的，.idea 记录了我的项目的一些文件的变更记录androidAndroid我的项目文件夹iosiOS我的项目文件夹liblib文件夹内寄存咱们的dart语音代码test用于寄存咱们的测试代码.gitignoregit疏忽配置文件.metadataIDE 用来记录某个 Flutter 我的项目属性的的暗藏文件.packagespub 工具须要应用的，蕴含 package 依赖的 yaml 格局的文件flutter_app.iml工程文件的本地门路配置pubspec.lock以后我的项目依赖所生成的文件pubspec.yaml以后我的项目的一些配置文件，包含依赖的第三方库、图片资源文件等README.mdREADEME文件比拟重要的四个文件夹是 android、ios、lib、testlib咱们日常开发的dart语言代码都放在这里，能够说是咱们的“外围工作文件夹” ios这外面蕴含了iOS我的项目相干的配置和文件，当咱们的我的项目须要打包上线的时候，须要关上该文件内的Runner.xcworkspace文件进行编译和打包工作。 android与ios文件夹一样，在android我的项目须要打包上架的时候，也须要应用此文件夹外面的文件。同样的如果咱们须要原生代码的反对，原生代码也是放在这里。 test这里寄存了咱们在我的项目开发过程中的测试代码，良好的测试习惯是保障代码品质的必要伎俩，心愿大家在test文件里写更多的代码！

老孟导读：目前 loading 库中蕴含41个动画组件，还会持续增加，同时也欢送大家提交本人的 loading 动画组件或者间接微信发给我也能够。Github 地址：https://github.com/781238222/flutter-do/tree/master/m_loading_sample 成果如下： 在我的项目的 pubspec.yaml 文件中增加依赖： dependencies: m_loading: ^0.0.1执行命令： flutter pub get所有 loading 动画组件的用法大同小异，都有 duration（动画时长） 和 curve（动画曲线）参数，以及外观款式的设置，上面是一些 loading 动画组件的用法。 小球类的动画组件中有 BallStyle 类型的参数，此参数示意小球款式，用法如下： BallCircleOpacityLoading( ballStyle: BallStyle( size: 5, color: Colors.red, ballType: BallType.solid, ),) size：小球大小color：小球色彩ballType：小球类型，hollow：空心，solid：实心borderWidth：边框宽borderColor：边框色彩设置空心球： BallCircleOpacityLoading( ballStyle: BallStyle( size: 5, ballType: BallType.hollow, borderWidth: 1, borderColor: Colors.red ),) 设置动画时长和动画曲线： Ring2InsideLoading( color: Colors.blue, duration: Duration(milliseconds: 1200), curve: Curves.bounceInOut,) 非小球类的组件应用： PacmanLoading( mouthColor: Colors.blue, ballColor: Colors.red,) ...

创立我的项目创立Flutter我的项目有很多种办法，各个IDE工具也都集成了创立Flutter我的项目的快捷操作。咱们这里列举三种形式：应用命令行创立、应用Android Studio创立和应用VSCode创立。 应用命令行创立在Flutter装置完之后，咱们就曾经配置好了命令行工具，命令行工具很弱小，能够满足咱们日常开发Flutter的所有操作（如果你还没有装置好Flutter环境，能够参考这里来装置）。咱们只须要关上命令行工具 输出: flutter create flutter_app其中 `flutter_app`是咱们我的项目的名字。应用 Android Studio 创立咱们关上 Android Studio，点击左上角 File->New->New Flutter Project 即可。 应用 VSCode创立点击VSCode上方按钮 View->Command Palette..而后在弹出的输入框内输出关键字flutter回车就能够了创立我的项目了。 应用Android Studio 运行 计数器我的项目用 Android Studio关上咱们刚刚创立的我的项目flutter_app关上之后咱们先抉择一下模拟器，而后间接点击运行就能够了。 应用VSCode 运行 计数器我的项目用VSCode关上我的项目flutter_app，找到目录下的 main.dart文件关上而后点击右上角运行按钮就能够了。 视频教程https://www.bilibili.com/vide...

VSCode是什么Visual Studio Code（简称VS Code）是一个由微软开发，同时反对Windows 、 Linux和macOS等操作系统的收费代码编辑器，它反对测试，并内置了Git 版本控制性能，同时也具备开发环境性能，例如代码补全（相似于 IntelliSense）、代码片段和代码重构等。该编辑器反对用户个性化配置，例如扭转主题色彩、键盘快捷方式等各种属性和参数，同时还在编辑器中内置了扩大程序管理的性能。VSCode同样反对Flutter开发，在我的日常开发中会更多的应用VSCode，而不是Android Studio。<!--more--> 下载和装置VSCode关上VSCode官方网站下在实现后双击exe文件进行装置并关上。关上后找到Extensions或应用快捷键Ctrl+Shift+X关上扩大核心。在扩大核心输出flutter，显示的第一个便是咱们要装置的Flutter扩大程序，点击装置。 新建我的项目装置实现之后顺次点击View->Command Palette...(或者是应用快捷键Ctrl+Shift+P)在弹出的输入框中输出关键字flutter而后回车，抉择我的项目要放弃的目录，输出项目名称就能够了。留神：创立我的项目实现之后，VSCode会帮忙咱们来装置Dart语言相干的依赖。这样咱们在VSCode下配置Flutter环境就算实现了。 视频教程https://www.bilibili.com/vide...

文章首发地址 呈现这个问题的起因Android模拟器须要计算器的处理器必须反对以下虚拟化扩大技术之一： Intel 虚拟化技术（VT、VT-x 和 vmx）扩大AMD 虚拟化（AMD-V 和 SVM）扩大大部分处理器都会反对，这里就以Intel处理器为例。 在BOIS内开启如果之前没有开启过虚拟化，须要咱们进入到BIOS开启，各个主板进入BIOS的形式不同，这里就不一一列举了。 编辑VMWare 虚拟机配置关上VMware Workstation Pro，找到要编辑的虚拟机，顺次点击编辑虚拟机->处理器->虚拟化 Intel VT-x/EPT 或 AMD V/RVI(V)编辑后放弃一下，重启虚拟机就能够了。 HAXM is not installed接下来在装置模拟器的时候还有可能会遇到HAXM is not installed谬误这里就间接点击上面的 Install Haxm就能够了！

在 Windows 10下装置Flutter+Dart+Android Studio 配置Flutter开发环境配置环境变量因为局部网站被墙的起因，咱们须要先配置Flutter国内镜像地址，这两个地址是由Flutter官网保护的，能够放心使用首先咱们找到此电脑点击右键，而后点击属性 而后点击高级零碎设置 点击高级而后找到上面的环境变量并点击点击新建变量名输出PUB_HOSTED_URL 变量值输出 https://pub.flutter-io.cn 而后点击确定持续点击 新建变量名输出FLUTTER_STORAGE_BASE_URL 变量值输出 https://storage.flutter-io.cn 而后点击确定到这里须要的环境变量就配置实现了 开始装置Flutter下载安装文件并解压缩点击进入官网下载须要的版本如果不能关上该网站，可去我的网盘去取版本是1.22.0 提取码: awjy下载实现后在新建一个文件夹解压缩，我这里选的是C:\src\flutter解压胜利之后，咱们须要将Flutter也配置到环境变量中，flutter文件夹下的bin目录门路(我这里是C:\src\flutter\bin)配置到环境变量中。关上配置环境变量的步骤参考 下面的步骤配置环境变量双击Path来增加将C:\src\flutter\bin配置进去 运行 flutter doctor将门路配置之后咱们关上 终端工具PowerShell 输出 flutter doctor查看还有哪些须要配置。flutter doctor是Flutter官网提供的用来检测以后Flutter配置环境的工具，能够疾速的帮咱们发现问题。运行之后咱们会看到输入如下: 很显著咱们还须要装置 Android Studio，Andriod Studio是Flutter官网反对的IDE工具。去Andriod Studio 官网下载下载实现后，一路Next装置实现，而后启动Android Studio，第一次装置默认会装置很多依赖，这个等缓缓装置就能够了。启动之后点击File->Settings 找到Plugins在输入框内输出Flutter点击装置装置Flutter的时候默认会要求装置Dart装置后重启 Andriod Studio 而后咱们把Android SDK门路配置到零碎变量外面咱们先找到File->Other Settings->Default Project Structure..并点击找到SDK的门路进入到文件下找到SDK文件夹有一个platform-tools的文件夹，复制这个门路增加到零碎Path中 变量名是ANDROID_HOME 这时候咱们再执行一次 flutter doctor当初咱们只须要再执行一次 flutter doctor --android-licenses 弹出的提醒抉择y或者是间接回车即可。而后再运行一次flutter doctor曾经没有谬误提醒了。这样咱们的Flutter的环境就配置实现了。 装置Android 模拟器关上Android Studio 找到右上角的AVD Manager并点击 点击Create Virtual Device... 抉择一个咱们须要须要装置的模拟器，而后点击Next在配置页面抉择Hardware - GLES 2.0 新建Flutter我的项目并运行点击Android Studio 外面的 File->New->New Flutter Project新建我的项目并关上抉择咱们刚刚装置好的模拟器，并且点击运行 就能够看到成果啦！ ...

让咱们一起来理解Flutter与其余跨平台框架的劣势，以及这些劣势在开发流程中的作用。 Flutter是什么Flutter的劣势1. 跨平台应用雷同的UI和业务逻辑2. 节俭开发工夫3. 更快的迭代速度4. 有限靠近原生的交互体验5. 丰盛的UI动画6. 独立的渲染引擎7. 可能很容易与原生进行交互8. 不只是能运行在挪动端从业务层来看，Flutter是一个好的抉择吗？为什么要尝试应用Fultter?Flutter是什么就我目前的职业开发生涯中，目击了太多太多我的项目不晓得该抉择哪种跨平台计划的例子。这些我的项目都是不同的，然而咱们都心愿这些我的项目可能运行在更多平台和更多设施上，常见的作法就是在不同的客户端招聘不同的开发人员来进行开发工作，比方手机端有iOS程序员和Android程序员等等。我记得在2013年，我第一次看到了比较完善的跨平台游戏开发计划，那时候我就在想，为什么App端没有这种工具能够满足咱们跨平台的需要呢？然而，当初咱们有了，它就是Flutter！我将在上面介绍我应用Flutter做了些什么，心愿能对你有所帮忙或启发。我有过一些iOS开发教训，也有过一些游戏开发教训，能够说Flutter就是我始终在寻找的跨平台解决方案。它不仅应用简略，还能放弃跨平台UI的一致性时，并且很容易的与原生进行交互。是十分好的体验。 Flutter的劣势你之前可能会理解到，所有的跨平台框架都会在节约开发工夫上有所帮忙。然而，Flutter在有些中央跟其余框架有很多不同，让咱们来看看，到底Flutter比其余跨平台框架在哪些地方做的更好。 1. 跨平台应用雷同的UI和业务逻辑咱们晓得，基本上所有的跨平台框架都提供了一种在指标平台之间共享代码的实现形式。然而没有任何一个平台像Flutter这样容许共享UI代码以及UI自身。为了阐明这一点，上面咱们来看一下其中一个跨平台框架UI的实现逻辑： React Navite 的渲染过程看起来像是在每个平台上都很简略。然而从图中咱们不难发现，这种渲染过程须要仍然各个平台原生组件来进行渲染，React Native 就是帮咱们实现了对各个平台应用层UI控件的映射。这就须要将每个动画每个UI映射到各个平台的动画和UI上，显然这比拟繁琐。相比之下，Flutter不须要依赖热任何平台的UI组件就能生成UI界面。Flutter惟一须要的就是一个画布，也就是咱们常说的Canvas。上面是Flutter的渲染过程: Flutter可能在任何平台上构建齐全截然不同的的UI，这种独特的渲染形式是它怀才不遇的要害。简而言之，应用Flutter来实现UI和业务逻辑可能节省时间和精力，并且同时不影响最终产品的性能。原来iOS、Android须要每个平台都要装备相应的程序员，应用Flutter只须要一组程序员就能够了，还节俭了程序员！ 2. 节俭开发工夫根据我集体的开发教训，从编译到运行一个Android App至多须要40秒的工夫。同时，在调试UI的过程中须要不停的编译和运行，这就须要耗费大量的工夫。诚然，Android Studio是具备布局预览性能的，然而总有一点有余的是：Android Studio 不能每次都像预期那样运行，特地是在自定义View的时候。Flutter的 “热重载”性能能够让咱们实时看到利用的变动，并且不会失落以后应用程序的状态。这就是应用Flutter节俭开发工夫的根本原因。此外，Flutter个人还付出了很多致力来提供各种控件。这些控件大多数都能够自定义，这就在构建UI上给咱们节俭了不少工夫。除了泛滥的外围控件外，Flutter还提供了大量的Material(Android格调)和Cupertino(iOS格调)的控件能够满足不同的设计格调。如下图： 总而言之，应用Flutter来开发，咱们能够绕过几个程序开发过程中比拟耗时的步骤，这样使整个开发过程更快，更简略且更省心。 3. 更快的迭代速度应用Flutter来开发迭代产品会更快。在大多数状况下，咱们研发一个App须要Android端和iOS端都须要进行开发和保护，而Flutter只有一组人员就能够实现这个工作。在开发工夫上至多节俭了一倍。起因很简略，咱们只须要编写一套代码就能够失去在各个利用平台雷同的交互成果。任何基于2D的UI都能够在Flutter中实现，且不须要调用原生代码。除此之外，Flutter应用申明式语法构建UI，依据我的教训，它能够显著进步开发速度。当波及到UI成果调整时这是最显著的。 4. 有限靠近原生的交互体验咱们晓得，App的性能是好的用户体验的要害。只管很难说出确切的数字，然而能够必定地说，在大多数状况下，Flutter应用程序的性能与本机应用程序没有区别，甚至在简单的UI动画场景中体现的更好。为什么呢？与大多数跨平台框架不同的是，Flutter不依赖任何中间代码做映射。Flutter利用间接调用了底层代码，这就极大的进步了性能。咱们同样能够应用Flutter齐全编译和公布应用程序。 5. 丰盛的UI动画Flutter的一个最大的劣势就是能够随时批改屏幕上的任何控件，无论这个控件有多简单。同样也反对间接应用原生控件来做UI动画。上面是一个简略的自定义动画的示例： 同样的，应用Flutter生成动画更加灵便和通用，并且不会额定减少工作量。过渡动画、圆角、色彩、暗影、变换等，Flutter都能轻松实现。这里给大家提供更多的Demo。让咱们更好的相熟这些动画。 6. 独立的渲染引擎与其余框架相比，Flutter应有更多的能力。显然，这须要框架自身十分弱小，且须要框架自身是一个高性能的框架。Flutter是应用Skia作为底层的渲染引擎。有了Skia的反对，UI层能够在任何平台上进行渲染，且放弃一致性。换句话说，咱们不须要调整任何代码就能够将UI出现在其余平台上，这极大的简化了开发过程。 7. 可能很容易与原生进行交互除了UI之外，咱们还有很多性能须要依赖原生的反对，比方获取GPS信息，蓝牙通信，传感器，照相机，相册等等。这些性能都能够通过Flutter的插件来实现。当然有些时候这些插件也是不足以满足咱们的需要。然而不必放心，Flutter应用的开发语言（Dart语言）与原生代码通信非常简单。只须要几行代码咱们就能够实现原生与Flutter之间的交互，就能够实现任何你想调用原生性能的需要。交互流程如下图： 8. 不只是能运行在挪动端Flutter不仅是能够在挪动设施上应用，还反对Web端和桌面端。在2018年的I / O会议上，Google展现了Flutter Web的技术，这使得在浏览器中运行纯Flutter应用程序成为可能，且不须要批改任何源代码。上面是演示视频： https://www.bilibili.com/vide... 不能关上视频的能够点击这里查看官网的这一操作，意味着Flutter从挪动开发框架降级到了全平台开发框架的行列。如果咱们不须要在挪动端做部署和应用，技术娴熟的Flutter程序员能够让Flutter在热门平台上运行，包含但不限于Android、iOS、Web浏览器、Windows、macOS、Linux甚至是嵌入式设施。同样的代码能够在这些任何平台上运行，且不须要批改任何Dart代码。 从业务层来看，Flutter是一个好的抉择吗？是的！是的！是的！软件产品能保障性能和稳定性、人员容易招聘、产品可能疾速的迭代和开发这些劣势都可能给企业带来微小的价值。一旦技术计划呈现缺点和存在任何方面的问题，都会给企业带来间接或间接的损失。从这个角度来看，Flutter都是能够升高咱们的危险的： 目前Google正在研发Fuchsia OS(与Flutter配合应用)，因而Flutter会持续投入研发人员保护和降级，不会中断。应用Flutter的门槛并不高，因为社区中曾经有了很多的人气很高的Android开发人员都在提倡和应用Flutter。曾经有很多大公司在应用，例如：阿里巴巴，Google Ads，AppTree，Reflectly和My Leaf等等，这是Flutter实力的证实。为什么要尝试应用Fultter?让咱们总结一下Flutter的最突出长处： UI和业务逻辑代码在各个平台出现成果始终更快的开发速度更快的迭代速度和更快的上线速度有限靠近原生的交互体验更容易的自定UI和动画性能独立的渲染引擎不依赖于任何平台的UI组件实用于更多的平台商业危险管制在最小所以说，想开发跨平台的，性能低劣的利用，Flutter是不二抉择。Flutter正式成为最终的跨平台UI框架只是工夫问题。

前言零碎自带的Dialog实际上就是Push了一个新页面，这样存在很多益处，然而也存在一些很难解决的问题 必须传BuildContext loading弹窗个别都封装在网络框架中，多传个context参数就很头疼；用fish_redux还好，effect层间接能拿到context，要是用bloc还得在view层把context传到bloc或者cubit外面。。。无奈穿透暗色背景，点击dialog前面的页面 这个是真头痛，想了很多方法，都没能在自带的dialog下面解决这个问题零碎自带Dialog写成的Loading弹窗，在网络申请和跳转页面的状况，会存在路由凌乱的状况 情景复盘：loading库个别封装在网络层，某个页面提交完表单，要跳转页面，提交操作实现，进行页面跳转，loading敞开是在异步回调中进行（onError或者onSuccess），会呈现执行了跳转操作时，弹窗还未敞开，延时一小会敞开，因为用的都是pop页面办法，会把跳转的页面pop掉下面是一种很常见的场景，波及到简单场景更加难以预测，解决办法也有：定位页面栈的栈顶是否是Loading弹窗，选择性Pop，实现麻烦下面这些痛点，几乎个个都能造成很大困扰，当然，还存在一些其它的解决方案，例如： 页面顶级应用Stack应用Overlay很显著，应用Overlay可移植性最好，目前很多Toast和dialog三方库便是应用该计划，应用了一些loading库，看了其中源码，穿透背景解决方案，和预期想要的成果天壤之别、一些dialog库自带toast显示，然而toast显示却又不能和dialog共存（toast属于非凡的信息展现，理当能独立存在），导致我须要多依赖一个Toast库 SmartDialog基于下面那些难以解决的问题，只能本人去实现，花了一些工夫，实现了一个Pub包，根本该解决的痛点都已解决了，用于理论业务没什么问题 成果体验一下 引入Pub：查看flutter_smart_dialog插件版本dependencies: flutter_smart_dialog: any应用主入口配置 在主入口这中央须要配置下，这样就能够不传BuildContext应用Dialog了只须要在MaterialApp的builder参数处配置下即可void main() { runApp(MyApp());}class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: SmartDialogPage(), builder: (BuildContext context, Widget child) { return Material( type: MaterialType.transparency, child: FlutterSmartDialog(child: child), ); }, ); }}应用FlutterSmartDialog包裹下child即可，上面就能够欢快的应用SmartDialog了 应用Toast msg：必传信息time：可选，Duration类型alignment：可选，管制toast地位如果想应用花里胡哨的Toast成果，应用show办法定制就行了，炒鸡简略喔，懒得本人写的，抄下我的ToastWidget，改下属性就行了哈SmartDialog.showToast('test toast');应用Loading msg：可选，loading动画上面的文字信息（默认：加载中...）//open loadingSmartDialog.showLoading();//delay offawait Future.delayed(Duration(seconds: 2));SmartDialog.dismiss();自定义dialog 应用SmartDialog.instance.show()办法即可，外面含有泛滥'Temp'为后缀的参数，和下述无'Temp'为后缀的参数性能统一非凡属性isUseExtraWidget：是否应用额定笼罩浮层，可与主浮层独立开；可与loading，dialog之类独立开，自带的showToast便是开启了该配置，可与loading共存SmartDialog.show( alignmentTemp: Alignment.bottomCenter, clickBgDismissTemp: true, widget: Container( color: Colors.blue, height: 300, ),);SmartDialog配置参数阐明 为了防止instance外面裸露过多属性，导致应用不便，此处诸多参数应用instance中的config属性治理参数性能阐明alignment管制自定义控件位于屏幕的地位<br/>Alignment.center: 自定义控件位于屏幕两头，且是动画默认为：渐隐和缩放，可应用isLoading抉择动画<br/>Alignment.bottomCenter、Alignment.bottomLeft、Alignment.bottomRight：自定义控件位于屏幕底部，动画默认为位移动画，自下而上，可应用animationDuration设置动画工夫<br/>Alignment.topCenter、Alignment.topLeft、Alignment.topRight：自定义控件位于屏幕顶部，动画默认为位移动画，自上而下，可应用animationDuration设置动画工夫<br/>Alignment.centerLeft：自定义控件位于屏幕右边，动画默认为位移动画，自左而右，可应用animationDuration设置动画工夫<br/> Alignment.centerRight：自定义控件位于屏幕右边，动画默认为位移动画，自右而左，可应用animationDuration设置动画工夫isPenetrate默认:false；是否穿透遮罩背景,交互遮罩之后控件，true：点击能穿透背景，false：不能穿透；穿透遮罩设置为true，背景遮罩会主动变成通明（必须）clickBgDismiss默认：false；点击遮罩，是否敞开dialog---true：点击遮罩敞开dialog，false：不敞开maskColor遮罩色彩animationDuration动画工夫isUseAnimation默认：true；是否应用动画isLoading默认：true；是否应用Loading动画；true:内容体应用渐隐动画 false：内容体应用缩放动画，仅仅针对两头地位的控件isExist默认：false；主体SmartDialog（OverlayEntry）是否存在在界面上isExistExtra默认：false；额定SmartDialog（OverlayEntry）是否存在在界面上返回事件，敞开弹窗解决方案应用Overlay的依赖库，根本都存在一个问题，难以对返回事件的监听，导致触犯返回事件难以敞开弹窗布局之类，想了很多方法，没方法在依赖库中解决该问题，此处提供一个BaseScaffold，在每个页面应用BaseScaffold，便能解决返回事件敞开Dialog问题 ...

前言零碎自带的Dialog实际上就是Push了一个新页面，这样存在很多益处，然而也存在一些很难解决的问题 必须传BuildContext loading弹窗个别都封装在网络框架中，多传个context参数就很头疼；用fish_redux还好，effect层间接能拿到context，要是用bloc还得在view层把context传到bloc或者cubit外面。。。无奈穿透暗色背景，点击dialog前面的页面 这个是真头痛，想了很多方法都没在自带dialog下面解决零碎自带Dialog写成的Loading弹窗，在网络申请和跳转页面的状况，会存在路由凌乱的状况 情景复盘：loading库封装在网络层，某个页面提交完表单，要跳转页面，提交操作实现，进行页面跳转，loading敞开是在异步回调中进行（onError或者onSuccess），会呈现执行了跳转操作时，弹窗还未敞开，延时一小会敞开，因为用的都是pop页面办法，会把跳转的页面pop掉下面是一种很常见的场景，波及到简单场景更加难以预测，解决办法也有：定位页面栈的栈顶是否是Loading弹窗，选择性Pop，实现麻烦下面这些痛点，几乎个个致命，当然，还存在一些其它的解决方案，例如： 每个页面顶级应用Stack应用Overlay很显著，应用Overlay可移植性最好，目前很多Toast和dialog三方库便是应用该计划，应用了一些loading库，看了其中源码，穿透背景解决方案，和预期想要的成果天壤之别、一些dialog库自带toast显示，然而toast显示却又不能和dialog共存（toast属于非凡的信息展现，理当能独立存在），导致我须要多依赖一个Toast库 SmartDialog基于下面那些难以解决的问题，只能本人去实现，花了一些工夫，实现了一个Pub包，根本该解决的痛点都已解决了，用于理论业务没什么问题 成果点我体验一下 引入Pub：flutter_smart_dialogdependencies: flutter_smart_dialog: ^1.0.1应用主入口配置 在主入口这中央须要配置，这样就能够不传BuildContext应用Dialog只须要在MaterialApp的builder参数处配置下即可void main() { runApp(MyApp());}class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: SmartDialogPage(), builder: (BuildContext context, Widget child) { return Material( type: MaterialType.transparency, child: FlutterSmartDialog(child: child), ); }, ); }}应用FlutterSmartDialog包裹下child即可，上面就能够欢快的应用SmartDialog了 应用Toast msg：必传信息time：可选，Duration类型alignment：可管制toast地位如果想应用花里花哨的Toast成果，应用show办法定制就行了，炒鸡简略喔，懒得写，抄下我的ToastWidget，改下属性即可SmartDialog.instance.showToast('test toast');应用Loading//open loadingSmartDialog.instance.showLoading();//delay offawait Future.delayed(Duration(seconds: 2));SmartDialog.instance.dismiss();自定义dialog 应用SmartDialog.instance.show()办法即可，外面含有泛滥'Temp'为后缀的参数，和下述无'Temp'为后缀的参数性能统一SmartDialog.instance.show( alignmentTemp: Alignment.bottomCenter, clickBgDismissTemp: true, widget: Container( color: Colors.blue, height: 300, ),);SmartDialog配置参数阐明 为了防止instance外面裸露过多属性，导致应用不便，此处诸多参数应用instance中的config属性治理参数性能阐明alignment管制自定义控件位于屏幕的地位<br/>Alignment.center: 自定义控件位于屏幕两头，且是动画默认为：渐隐和缩放，可应用isLoading抉择动画<br/>Alignment.bottomCenter、Alignment.bottomLeft、Alignment.bottomRight：自定义控件位于屏幕底部，动画默认为位移动画，自下而上，可应用animationDuration设置动画工夫<br/>Alignment.topCenter、Alignment.topLeft、Alignment.topRight：自定义控件位于屏幕顶部，动画默认为位移动画，自上而下，可应用animationDuration设置动画工夫<br/>Alignment.centerLeft：自定义控件位于屏幕右边，动画默认为位移动画，自左而右，可应用animationDuration设置动画工夫<br/> Alignment.centerRight：自定义控件位于屏幕右边，动画默认为位移动画，自右而左，可应用animationDuration设置动画工夫isPenetrate默认:false；是否穿透遮罩背景,交互遮罩之后控件，true：点击能穿透背景，false：不能穿透；穿透遮罩设置为true，背景遮罩会主动变成通明（必须）clickBgDismiss默认：false；点击遮罩，是否敞开dialog---true：点击遮罩敞开dialog，false：不敞开maskColor遮罩色彩animationDuration动画工夫isUseAnimation默认：true；是否应用动画isLoading默认：true；是否应用Loading动画；true:内容体应用渐隐动画 false：内容体应用缩放动画，仅仅针对两头地位的控件isExist默认：false；主体SmartDialog（OverlayEntry）是否存在在界面上isExistExtra默认：false；额定SmartDialog（OverlayEntry）是否存在在界面上返回事件，敞开弹窗解决方案应用Overlay的依赖库，根本都存在一个问题，难以对返回事件的监听，导致触犯返回事件难以敞开弹窗布局之类，想了很多方法，没方法在依赖库中解决该问题，此处提供一个BaseScaffold，在每个页面应用BaseScaffold，便能解决返回事件敞开Dialog问题 ...

挪动开发技术手段从原始的原生利用开发，到 Google 和 Apple 各自推出新的语言 Kotiln、Swift，而后又倒退到各种跨平台Hybrid App 开发，如 React Native、Weex、小程序等等。不过这些计划或多或少都有一些局限性和毛病，于是 Google 推出了新的跨平台挪动利用开发技术：Flutter。Flutter 最出色的中央就是自建了绘制引擎，使得跨平台开发一套代码能够发明出和原生利用雷同的体验。并且 Flutter 开发效率十分高，SDK 里所有的布局、控件都组件化，采纳 React 形式。Flutter 的开发不仅仅局限于挪动跨平台，目前曾经反对 Web 开发、后端开发、PC 桌面利用开发（内测中）、嵌入式开发（内测中）。 这也是 Flutter 变得越来越受关注，越来越多大公司和开发者进行应用的起因之一。 Flutter 岂但做到了一套代码逻辑实现 Android 和 iOS 平台的跨平台运行，而且无需像 React Native 等技术那样，局部和原生交互的逻辑须要写两套代码逻辑，Flutter 只需写一套代码，大部分性能官网 SDK 里曾经反对，并在不断更新拓展。而且如果须要一些与原生交互的局部，都是通过插件化模式应用，仍然是一套代码逻辑多平台兼容。 Dart语言Dart 反对的几种根本数据类型：numbers(num)、String、bool、List 汇合、Map 汇合、runes（用于在字符串中示意 Unicode 字符）、symbol。umbers（num）类型是示意数值型的数据类型，包含 int 和 double 类型两种。1、下载sdk配置国内镜像UB_HOSTED_URL，变量值：https://pub.flutter-io.cnFLUTTER_STORAGE_BASE_URL，变量值：https://storage.flutter-io.cn

此篇文章为英文翻译，原文地址 1.你是否须要更好，更简洁的日志 当你在开发Flutter应用程序时，难以了解的日志是一个大问题，因为没有疾速的办法来依据问题的重大水平过滤你的日志。抛出异样或记录一条简略的调试音讯?他们看起来都一样。 如果你的Flutter app须要更好的日志零碎，Logger 软件包相对是个好货色。 Logger包地址：https://pub.dev/packages/logger 它受到Java分级日志的启发，容许您向日志增加级别。 日志级别，目前有： logger.v("Add more detailed debug messages, " "can contain sensitive information, never enable it in production");logger.d("Fine grained information to debug an application");logger.i("Track the flow of the application");logger.w("A potential but expected problem");logger.e("A real failure that may impact the application state");因为某些起因，另外一个特地的是 logger.wtf("WTF logs??")不仅如此，你还能够晃动你的设施来查看屏幕上的日志。(PS：须要导入logger_flutter包) 2.API还没有从后端筹备好，或者基本没有API ?应用程序靠本人硬编数据?如果你还在艰巨的coding,全是本人硬编数据因为后盾没有筹备好他们的API或者基本没有任何API,如果你依然心愿UI有意义,您能够应用faker包——Jesper Hakansson为应用程序生成有意义的数据。 受Python包faker和Ruby包ffaker的启发，这个包能够提供各种类型的数据，从虚伪的人名到虚伪的日期，甚至是随机的虚伪url。 只需创立一个简略的对象，像这样- var faker = new Faker();上面是应用faker对象的例子 faker.date.month();faker.conference.name();faker.company.position();faker.lorem.sentences(8);faker.internet.httpsUrl();faker.currency.name();faker.sport.name()在这个包下还有更多品种的数据可用，这是本人硬编数据的一个很好的替代品，当我的项目变得更简单时，本人硬编数据是很难替换的。 faker包地址：https://pub.dev/packages/fake... 3.当API返回的数据结构简单，你须要疾速构建model?尽管我在2018年曾经分享过这篇解析简单JSON的文章，在明天它依然十分风行。 https://medium.com/flutter-co... 值得一提的是，这篇文章是对Dart解析json的一个很好的实践回顾，但我不倡议在构建理论简单我的项目时进行手动解析。 为什么不倡议? ...

Flutter Materia 框架，以状态栏黑字白底为例。 这是Flutter 默认的blue格调 AppBarbrightnessBrightness.light批改状态栏色彩格调backgroundColorColors.white批改appbar背景色批改后成果

此动画成果是我在浏览文章时发现的一个十分酷炫的成果，于是就应用 Flutter 实现了。更多动画成果及Flutter资源：https://github.com/781238222/flutter-do 增加依赖在我的项目的 pubspec.yaml 文件中增加依赖： dependencies: wheel_switch: ^0.0.1执行命令： flutter pub get应用WheelSwitch( value: false,) 组件默认的宽高别离是80、30，也能够指定宽高： WheelSwitch( value: false, width: 150, height: 50,)开关发生变化回调： WheelSwitch( value: false, onChanged: (value){ print('WheelSwitch : $value'); },)设置其轨道色彩，分为激活（开）和未激活（关）状态的色彩： WheelSwitch( value: false, width: 150, height: 50, activeTrackColor: Colors.red, inactiveTrackColor: Colors.green,) 设置滑块的色彩： WheelSwitch( value: false, width: 150, height: 50, activeTrackColor: Colors.red, inactiveTrackColor: Colors.green, activeThumbColor: Colors.blue, inactiveThumbColor: Colors.green,)未激活状态（关）： 激活状态（开）： 设置文字和文字款式： WheelSwitch( value: false, width: 150, height: 50, activeText: '开', inactiveText: '关', activeTextStyle: TextStyle(color: Colors.white,fontSize: 20), inactiveTextStyle: TextStyle(color: Colors.cyanAccent,fontSize: 10),) ...

交换老孟Flutter博客（330个控件用法+实战入门系列文章）：http://laomengit.com 欢送退出Flutter交换群（微信：laomengit）、关注公众号【老孟Flutter】：

最近筹备应用融云的 Flutter SDK，所以顺便记录一下。 融云 Flutter IM SDK 地址：传送门 融云的 Flutter SDK 是基于 融云 IMLib 层做的封装，封装了 IMLib 的局部接口提供给 Flutter 开发者应用。此文章只介绍了 Flutter 层做的一些操作。 目录构造 整体 SDK 的构造规规矩矩，核心内容参考红色箭头即可。 SDK 层蕴含 三个目录： android：此目录蕴含了和原生 SDK 交互的所有 Java 文件 ios：此目录蕴含了和原生 SDK 交互的所有 oc 文件 lib: 此目录为应用 dart 编写的 Flutter SDK 文件 其余目录： doc：次要是融云开发者提供的一些文档相干 example：是融云开发者基于此 SDK 提供的一个简略示例，整体较为简陋，且有轻微 bug，仅供参考 FunctionList.md 是融云开发者提供的一个性能清单， 大体如下： # RongCloud IM Flutter SDK 性能清单## 连贯初始化连贯断开连接连贯状态兼容## 配置设置服务器地址( im 服务；文件服务)## 会话获取会话列表，反对全量获取，分页获取获取单个会话删除指定会话## 音讯以后仅反对 文本音讯，语音音讯，图片音讯，小视频音讯收发音讯(能够携带 pushContent)自定义音讯获取批量本地历史音讯获取单条本地历史音讯获取批量远端历史音讯插入音讯删除批量本地音讯获取未读数革除指定会话未读数## 免打搅设置会话免打搅获取会话免打搅## 会话置顶设置会话置顶备注：获取会话是能够获取到会话置顶状态## 黑名单退出黑名单移除黑名单获取黑名单列表查看特定用户的黑名单状态## 聊天室退出聊天室退出聊天室获取聊天室信息 ...

Flutter 开发从 0 到 1今天开始又要下班了，你的假期工作实现如何啊？因为平时加班太多了，切实挤不出更多工夫，从开始想用 Flutter 《Flutter 开发从 0 到 1（一）需要与筹备》写一个残缺的 APP 曾经过来三个月了，然而我没有遗记，这个国庆工夫我终于实现了。Flutter 的确弱小，不止跨平台，还反对桌面利用，包含 Window、macOS、Linux，以及 Web 利用，真正一套代码，全平台反对，野心可见一斑。 以上我尝试过了，打包成了 APK、macOS 桌面利用、Web 利用没问题，只能用两个字形容 Flutter：牛皮，明天先分享这个 APP 源码。 大体性能如下： 页面知识点成果预览框架1、右滑菜单；2、我的珍藏博客列表1、布局；2、ListView 下拉刷新好和加载更多博客详情1、Markdown 渲染；2、代码高亮、3、膨胀 FloatingActionButton、4、珍藏评论列表1、布局；2、评论账户1、登录、2、注册源码公号「吴小龙同学」回复关键字“AndBlog”获取源码下载链接。 后续更新，这个链接都能够拜访，来，咱们一起持续探讨 Flutter。 如何运行拿到源码，能够以 Web Server (web) 或 Chrome (web)运行代码， 如果你是 MacBook Pro，你还能够以 iPhone 11 Pro Max (mobile)或 macOS (desktop)运行，运行到 Android 手机，开发的时候卡在了 Running Gradle task ‘assembleDebug’…或者‘assembleRelease’，这里记录下，这时候个别在下载 Gradle 并配置我的项目，所以可能呈现的问题个别有两种： 报错一： > Failed to apply plugin [id 'com.android.internal.version-check'] > Minimum supported Gradle version is 6.1.1. Current version is 5.6.2. If using the gradle wrapper, try editing the distributionUrl in /Users/wuxiaolong/AndroidStudioProjects/flutter_andblog/android/gradle/wrapper/gradle-wrapper.properties to gradle-6.1.1-all.zipGradle 目录 windows 个别在C:\\Users\\用户名\\.gradle\\ 下，macOS 个别在/Users/用户名/.gradle下。 ...

fish_redux应用注：该我的项目为Flutter + fish_redux，页面根本均是fish_redux搭建fish-redux应用 教程：掘金：fish_redux应用详解---看完就会用！ 备用：博客园：fish_redux应用详解---看完就会用！代码demo地址阐明多谢铁子们给我点的小星星，为了对得起你们的反对，我重写了第一版所有模块，第二版的坑填完了 初版的fish_redux的玩Android是我刚学flutter时写的，代码写的比拟凌乱，重构代码也是为了让大家更清晰理解fish_redux构造，也给出TabBar控制器在fish_redux初始化的解决方案，大家能够看看 重构的所有模块，有限弱化了reducer层作用 在日程应用fish_redux和flutter_bloc后，理论能粗浅领会reducer实际上只是相当于bloc中yield或emit关键字的作用，职能齐全能够弱化为，仅仅作为状态刷新；这样能够大大简化开发流程，只须要关注view -> action -> effect (reducer: 对立刷新事件)view模块中，页面应用widget组合的形式去结构的，只传入必要的数据源和保留一些点击回调 为什么用widget组合形式结构页面：非常复杂的界面，必须将页面分成一个个小模块，而后再将其组合每个小模块Widget外部该当对本身的的职能，能逻辑自洽的解决- 组合widget关键点：一般来说，咱们并不关注widget外部页面的实现，只须要关怀的是widget须要的数据源，以及widget对交互的反馈；例如：我点击widget后，widget回调事件，并传播一些数据给我；至于外部怎么实现，内部并不关怀，请勿将dispatch传递到封装的widget外部，这会使咱们关注的事件被封装在外部第一版[x] 首页banner展现，首页文章分页加载，实现下拉刷新，上拉加载[x] 实现常识体系和体系详情模块[x] 实现导航模块[x] 实现我的项目模块[x] 侧栏布局实现，性能留坑，不便增加第二版[x] 搜寻性能[x] 热搜词[x] 珍藏，查看珍藏性能[x] 登录性能（这个理论就是登拿个参数，去申请珍藏的信息等）[x] 用户注册[x] 侧栏的一列性能填坑打包操作android（敞开R8压缩） flutter build apk --no-shrinkios（生成 .app ，而后 在 XCode 执行 打包 操作） flutter build ios --release --target=lib/app/main_dev.dartAPP装置地址android ios 下载我的项目，间接跑吧app成果

前言怎么将一个Callback回调转化成Future同步办法（Callback to Future），能够配套async / await去应用呢？ 集体感觉，这是一个很常见的景象，不晓得为啥，很多人在阐明Future用法的时候，都没提到这个场景，奇怪+懵逼，只能本人去苟解决方案了。 历程为什么我要将Callback转成Future办法？ 大家晓得，Flutter在加载页面的时候，有个渲染的过程，在没渲染实现的时候，你去显示一些View的操作，会报错的，例如：加载loading弹窗解决办法可能大家都晓得，Lifecycle.initState / iniState 生命周期外面做个延时操作或者应用WidgetsBinding//延时操作await Future.delayed(Duration(milliseconds: 200));//上面能够加载弹窗//应用WidgetsBindingWidgetsBinding.instance.addPostFrameCallback((timeStamp) { //此处能够加载弹窗});当然，应用WidgetsBinding是更靠谱和精确的，然而这个Callback就让我很方了，而且，这名字太长，也不太记的住，这就须要将它封装了封装WidgetsBinding 蛋筒了，这玩意怎么封装呢class ViewUtil { ///界面初始化实现 static Future<Void> initFinish() async { WidgetsBinding.instance.addPostFrameCallback((timeStamp) { }); }}首先我想到了：Future.delayed() 进去看下他的源码有戏，能够看到，这外面显著蕴含了一个Timer中的Callback回调，但最初转换成了，Future办法factory Future.delayed(Duration duration, [FutureOr<T> computation()?]) { if (computation == null && !typeAcceptsNull<T>()) { throw ArgumentError.value( null, "computation", "The type parameter is not nullable"); } _Future<T> result = new _Future<T>(); new Timer(duration, () { if (computation == null) { result._complete(null as T); } else { try { result._complete(computation()); } catch (e, s) { _completeWithErrorCallback(result, e, s); } } }); return result;}剖析下 ...

场景h5页面要从cookie外面取数据，所以须要在flutter webview的cookie外面塞一些数据，设置的数据多达十几条；依照网上查的应用形式来设置，通过fiddler抓包发现，只能失效一条，来来回回试了很屡次都只有一条，心态崩了 起初看到cookie设置数据也是相似键值对外面套键值对，眉头一皱;计上心来，变换下后就胜利了，记录下正确的写法吧 正确姿态引入 应用的是flutter官网保护的webview插件webview_flutter: ^0.3.22+1谬误示例 这是最坑的一个，widget都都没写全，就写了俩个回调，这么写只会失效一条WebViewController _controller;onWebViewCreated: (WebViewController wvc) { _controller = wvc;}onPageFinished: (String value) { _controller.evaluateJavascript( 'document.cookie = "SESSIONID=612bc4822b6996d6f335a963c20eb541fba72985; path=/"')}这个只写了一条cookie，这个是没问题的，和下面的区别就是，这个应用双引号包住单引号，只写了一条的应用也是让人肝痛setSessionID() async { String sessionID = await LocalStorage.get("sessionID"); if (Platform.isIOS) { _controller.evaluateJavascript("document.cookie = 'sessionID=${sessionID}'").then<String>((res) { print("webViewController.evaluateJavascript========>${res}"); _onListCookies(_controller, context); }); } else { _controller.evaluateJavascript('document.cookie = "sessionID=${sessionID};"').then<String>((res) { print("webViewController.evaluateJavascript========>${res}"); _onListCookies(_controller, context); }); }}多条cookie增加正确写法 推敲半天试出来的正确写法，cookie的设置须要在页面加载完之后设置///webview控制器WebViewController _controller;String _url = "写入你的链接";WebView( initialUrl: _url, javascriptMode: JavascriptMode.unrestricted, onWebViewCreated: (controller) { _controller = controller; }, onPageFinished: (url) { //页面加载完结 String cookie = "document.cookie = 'name=IAmDaShuaiBi';document.cookie = 'id=233'"; _controller.evaluateJavascript(cookie); }, userAgent: "test;app/1.0.0",)最重要的变动就是每条cookie都要用document.cookie作为key，这是最最最要害的优化写法 ...

说句心里话，这篇文章，来来回回批改了很屡次，如果认真看完这篇文章，还不会写fish_redux，请在评论里喷我。 前言来学学难搞的fish_redux框架吧，这个框架，官网的文档真是一言难尽，比flutter_bloc官网的文档真是逊色太多了，然而一旦晓得怎么写，页面堆起来也是十分爽呀，构造明显，逻辑也会错落有致。 其实在过后搞懂这个框架的时候，就始终想写一篇文章记录下，然而因为忙（lan），导致始终没写，当初感觉还是必须把应用的过程记录下，毕竟刚上手这个框架是个蛋痛的过程，必须要把这个过程做个记录。 这不仅仅是记录的文章，文中所给出的示例，也是我从新构思去写的，过程也是力求论述分明且具体。 几个问题点页面切换的转场动画页面怎么更新数据fish_redux各个模块之间，怎么传递数据页面跳转传值，及其承受下个页面回传的值怎么配合ListView应用ListView怎么应用adapter，数据怎么和item绑定怎么将Page当做widget应用（BottomNavigationBar，NavigationRail等等导航栏控件会应用到） 这个间接应用：XxxPage.buildPage(null) 即可如果你在应用fish_redux的过程中遇到过上述的问题，那就来看看这篇文章吧！这里，会解答下面所有的问题点！ 筹备引入fish_redux相干地址 GitHub地址：https://github.com/alibaba/fish-reduxPub地址：https://pub.dev/packages/fish_redux我用的是0.3.X的版本，算是第三版，绝对于前几版，改变较大 引入fish_redux插件，想用最新版插件，可进入pub地址外面查看fish_redux: ^0.3.4#演示列表须要用到的库dio: ^3.0.9 #网络申请框架json_annotation: ^2.4.0 #json序列化和反序列化用的开发插件此处咱们须要装置代码生成插件，能够帮咱们生成大量文件和模板代码在Android Studio外面搜寻”fish“就能搜出插件了，插件名叫：FishReduxTemplate BakerJQ编写：Android Studio的Fish Redux模板。huangjianke编写：VSCode的Fish Redux模板创立这里我在新建的count文件夹上，抉择新建文件，抉择：New ---> FishReduxTemplate 此处抉择：Page，底下的“Select Fils”全副抉择，这是规范的redux文件构造；这边命名倡议应用大驼峰：Count Component：这个个别是可复用的相干的组件；列表的item，也能够抉择这个Adapter：这里有三个Adapter，都能够不必了；fish_redux第三版推出了性能更弱小的adapter，更加灵便的绑定形式 创立胜利后，记得在创立的文件夹上右击，抉择：Reload From Disk；把创立的文件刷新进去 创立胜利的文件构造 page：总页面，注册effect，reducer，component，adapter的性能，相干的配置都在此页面操作state：这中央就是咱们寄存子模块变量的中央；初始化变量和承受上个页面参数，也在此处，是个很重要的模块view：次要是咱们写页面的模块action：这是一个十分重要的模块，所有的事件都在此处定义和直达effect：相干的业务逻辑，网络申请等等的“副作用”操作，都能够写在该模块reducer：该模块次要是用来更新数据的，也能够写一些简略的逻辑或者和数据无关的逻辑操作 OK，至此就把所有的筹备工作搞定了，上面能够开搞代码了 开发流程redux流程下图是阮一峰老师博客上放的redux流程图 fish_redux流程在写代码前，先看写下流程图，这图是凭着本人的了解画的 能够发现，事件的传递，都是通过dispatch这个办法，而且action这层很显著是十分要害的一层，事件的传递，都是在该层定义和直达的这图在语雀上调了半天，就在下面加了个本人的github水印地址 通过俩个流程图比照，其中还是有一些差异的 redux外面的store是全局的。fish_redux外面也有这个全局store的概念，放在子模块外面了解store，react；对应fish_redux里的就是：state，viewfish_redux外面多了effect层：这层次要是解决逻辑，和相干网络申请之类reducer外面，实践上也是能够解决一些和数据相干，简略的逻辑；然而简单的，会产生相应较大的“副作用”的业务逻辑，还是须要在effect中写范例阐明这边写几个示例，来演示fish_redux的应用 计数器 fish_redux失常状况下的流转过程fish_redux各模块怎么传递数据页面跳转 A ---> B（A跳转到B，并传值给B页面）B ---> A（B返回到A，并返回值给A页面）列表文章 列表展现-网络申请列表批改-单item刷新多样式列表列表存在的问题+解决方案全局模块 全局切换主题全局模式优化 大幅度晋升开发体验Component应用 page中应用component播送开发小技巧 弱化reducerwidget组合式开发计数器效果图 这个例子演示，view中点击此操作，而后更新页面数据；下述的流程，在effect中把数据处理好，通过action直达传递给reducer更新数据 view ---> action ---> effect ---> reducer（更新数据）留神：该流程将展现，怎么将数据在各流程中相互传递规范模式main 这中央须要留神，cupertino，material这类零碎包和fish_redux里蕴含的“Page”类名反复了，须要在这类零碎包上应用hide，暗藏零碎包里的Page类对于页面的切换格调，能够在MaterialApp中的onGenerateRoute办法中，应用相应页面切换格调，这边应用ios的页面切换格调：cupertino///须要应用hide暗藏Pageimport 'package:flutter/cupertino.dart'hide Page;import 'package:flutter/material.dart' hide Page;void main() { runApp(MyApp());}Widget createApp() { ///定义路由 final AbstractRoutes routes = PageRoutes( pages: <String, Page<Object, dynamic>>{ "CountPage": CountPage(), }, ); return MaterialApp( title: 'FishDemo', home: routes.buildPage("CountPage", null), //作为默认页面 onGenerateRoute: (RouteSettings settings) { //ios页面切换格调 return CupertinoPageRoute(builder: (BuildContext context) { return routes.buildPage(settings.name, settings.arguments); })// Material页面切换格调// return MaterialPageRoute<Object>(builder: (BuildContext context) {// return routes.buildPage(settings.name, settings.arguments);// }); }, );}state ...

flutter 集成融云 sdk前言1.集成 flutter 融云 sdk ，须要一个稳固的 flutter 环境，能失常的创立和运行我的项目。2.后期筹备融云官网申请开发者账号通过治理后盾的 "根本信息"->"App Key" 获取 AppKey3.通过治理后盾的 "IM 服务"—>"API 调用"->"用户服务"->"获取 Token"，通过用户 id 获取 IMToken4.我晓得没图是骗不到人的。先放图，大家看一下最终实现的成果。 集成 sdk依赖 IM Flutter plugin在我的项目的 pubspec.yaml 中写如下依赖。dependencies: flutter: sdk: flutterrongcloud_im_plugin: ^4.0.3而后在我的项目门路执行 flutter packages get 来下载 Flutter Plugin。咱们写 2 个 button 和 2 个 text ，别离用来实现 init 和 connect 的事件和状态。4.初始化 SDK RongIMClient.init(RongAppKey);5.连贯 IM RongIMClient.connect(RongIMToken, (int code, String userId) { print('connect result ' + code.toString()); EventBus.instance.commit(EventKeys.UpdateNotificationQuietStatus, {});if (code == 31004 || code == 12) { Navigator.of(context).pushAndRemoveUntil(new MaterialPageRoute(builder: (context) => new LoginPage()), (route) => route == null);} else if (code == 0) { print("connect userId" + userId); // 连贯胜利后关上数据库 // _initUserInfoCache();}全副代码参考import 'package:flutter/material.dart';import 'package:rongcloud_im_plugin/rongcloud_im_plugin.dart' as prefix;void main() { runApp(MyApp());}class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); }}class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState();}class _MyHomePageState extends State<MyHomePage> { var _isInit ; var _isConnect ; void _init() { setState(() { prefix.RongIMClient.init("pvxdm17jpof6r"); _isInit="曾经初始化"; }); } void _connect() { setState(() { prefix.RongIMClient.connect("rbdI/5jrPxR4aQ2078HhWnHte7+VrAhsnSjOcYQ3SKOCXhodQlcZYZ5acv4syCtN0dsYRNvxZh44fo4VR5s+6A==", (code, userId){ if(code == 0 ){ _isConnect="连贯胜利"; }else{ _isConnect="连贯失败"; } }); }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( // Here we take the value from the MyHomePage object that was created by // the App.build method, and use it to set our appbar title. title: Text(widget.title), ), body: Center( // Center is a layout widget. It takes a single child and positions it // in the middle of the parent. child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( '$_isInit', style: Theme.of(context).textTheme.headline4, ), Text( '$_isConnect', style: Theme.of(context).textTheme.headline4, ), MaterialButton( minWidth: 250.0, onPressed: () {_init();}, colorBrightness: Brightness.dark, color: Colors.deepPurpleAccent, elevation: 20.0, splashColor: Colors.green, //highlightColor: Colors.red, highlightElevation: 1.0, child: Text("初始化"), ), MaterialButton( minWidth: 250.0, onPressed: () {_connect();}, colorBrightness: Brightness.dark, color: Colors.deepPurpleAccent, elevation: 20.0, splashColor: Colors.green, //highlightColor: Colors.red, highlightElevation: 1.0, child: Text("连贯"), ), ], ), ), ); }}

老孟导读：本文介绍6种极大晋升Flutter开发效率的工具包。[1] 弱小的日志软件包在开发 Flutter 的过程中打印日志是罕用的调试形式之一，但 Flutter 内置的日志打印非常简单，上面介绍一个弱小的软件包：logger。 Logger 是一款易于应用且可扩大的日志记录器，可打印精美的日志。 受到Android记录器的启发，将日志分为不同的级别： logger.v("Verbose log");logger.d("Debug log");logger.i("Info log");logger.w("Warning log");logger.e("Error log");logger.wtf("What a terrible failure log"); 公布内侧版本时，测试人员不会将手机始终连贯你的电脑，因而呈现bug时无奈通过控制台打印日志，logger_flutter这个插件能够解决这个问题，此插件通过摇摆手机或者调用 LogConsole.open(context) 在手机上间接显示日志。 Logger pub地址：https://pub.dev/packages/logger logger_flutter pub地址： https://pub.dev/packages/logger_flutter [2] 转换 Json 数据为 model通常状况下，服务器接口返回的数据是 json 格局，将 json 格局的数据转换为实体类是十分繁琐的工作，尤其是简单的 json 数据，这里举荐大家应用 JsonToDart 插件，Android Studio 和 VS Code 编辑器上都能够装置此插件，它能够帮咱们将 json 格局的数据转换为实体类。 具体用法及装置：http://laomengit.com/guide/data_storage/Json2Model.html [3] 在不同分辨率的手机上查看UI成果Flutter 开发最大的劣势就是其跨平台，当开发实现时，想在不同分辨率的手机查看其成果，那是否要每一款手机都买一个来进行测试？ 2019年的 Flutter Interact，像咱们展现了同时在多个平台和设施上调试应用程序 上面这款工具包 device_preview 能够让您在一台设施上查看不同分辨率设施上UI的成果。 不止如此，它还有其余酷炫的性能： 更改设施方向动静系统配置：语言，暗模式，文本缩放比例可自在调整分辨率和平安区域的设施放弃应用程序状态截图device_preview 地址：https://pub.dev/packages/device_preview ...

背景在开发过程中，服务端通常返回的是JSON格局的数据，对于Web开发人员(JavaScript、TypeScript)中,能够间接拿到JSON数据来做咱们的逻辑。 JSON自身起源于JavaScript，JavaScript解析解决JSON有人造的劣势但在像 Java、Dart 等强类型语言中，咱们须要将JSON数据转模型对象来应用。 个别状况下，咱们会应用一些第三方库来动静转化Model,然而Flutter中没有像Java的GSON/Jackson这类JSON序列化库。因为Flutter中禁用运行时反射。官网解释是运行时反射会烦扰Dart的Tree Shaking,应用Tree Shaking能够在Release版中去除未应用的代码，这能够显著优化应用程序的大小。因为反射会默认利用到Dart的反射性能，而正因如此也就无奈实现动态化转Model的性能。序列化的几种计划Flutter官网举荐的有两种序列化计划：https://flutterchina.club/json/ 小我的项目手动序列化，这种计划比较简单，比拟适宜小我的项目简略的JSON转换，但我的项目宏大，或者多人单干，容易出错，也不易保护。 Flutter有一个内置dart:convert库应用 dart:convert手动序列化JSON在大中型我的项目中应用代码生成，须要用到以下三个依赖包，通过代码主动生成的形式，生成模型。这种计划易保护，因为序列化数据代码不再须要手动编写或者保护，你能够将序列化 JSON 数据在运行时的异样危险降到最低； json_annotation json_serializable build_runner 转换流程在pubspec.yaml中增加依赖json_annotation: ^3.1.0json_serializable: ^3.5.0build_runner: ^1.0.0 在Android Stuido中执行Pub get 新建模型类(mode/demo_model.dart)class DemoModel{ }在网页上把后端申请到的JSON数据转换成Model：https://czero1995.github.io/json-to-model/:网站转换反对有限档次嵌套简单对象的转换 比方将以下JSON数据复制到网页上(右边):{ "code": 0, "data": { "avatar": "xxx.png", "id": 7, "float":0.1, "is_deleted": false, "nickname": "nickName", "openId": null, "phone": "13641418383", "store_ids": [1,2], "updated": "2020-11-05 11:53:10", "more":[{"a":1,"b":"b","c":{"c1":0.2,"c2":2}}] }}而后转换成Model数据(左边)import 'package:json_annotation/json_annotation.dart';part 'demo_model_data.g.dart'; @JsonSerializable(explicitToJson: true)class DemoModelModel { DemoModelData data; DemoModelModel({ this.data, this.code, this.message }); factory DemoModelModel.fromJson(Map<String, dynamic> json) => _$DemoModelModelFromJson(json); Map<String, dynamic> toJson() => _$DemoModelModelToJson(this);}@JsonSerializable(explicitToJson: true)class DemoModelData { String avatar; int id; double float; bool is_deleted; String nickname; var openId; String phone; List<int> store_ids; String updated; List<MoreData> more; DemoModelData({ this.avatar, this.id, this.float, this.is_deleted, this.nickname, this.openId, this.phone, this.store_ids, this.updated, this.more, }); factory DemoModelData.fromJson(Map<String, dynamic> json) => _$DemoModelDataFromJson(json); Map<String, dynamic> toJson() => _$DemoModelDataToJson(this);}@JsonSerializable(explicitToJson: true) class MoreData{ int a; String b; CData c; MoreData({ this.a, this.b, this.c, }); factory MoreData.fromJson(Map<String, dynamic> json) => _$MoreDataFromJson(json); Map<String, dynamic> toJson() => _$MoreDataToJson(this);}@JsonSerializable(explicitToJson: true) class CData{ double c1; int c2; CData({ this.c1, this.c2, }); factory CData.fromJson(Map<String, dynamic> json) => _$CDataFromJson(json); Map<String, dynamic> toJson() => _$CDataToJson(this);}再将转换之后的数据复制进去笼罩到demo_model.dart文件上 ...

Skia 是什么？要想理解 Flutter，你必须先理解它的底层图像渲染引擎 Skia。因为，Flutter 只关怀如何向 GPU 提供视图数据，而 Skia 就是它向 GPU 提供视图数据的好帮手。 为什么是 Dart？Google 公司给出的起因很简略也很间接：Dart 语言开发组就在隔壁 Flutter 的原理 布局、绘制、合成和渲染。 学习 Flutter 须要把握哪些常识？

老孟导读：pubspec.yaml 文件是 Flutter 中十分重要的配置文件，上面就让咱们看看外面各个配置的含意。pubspec.yaml 是 Flutter 我的项目的配置文件，相似于 Android 中的 Gradle 配置文件，上面咱们就看看 pubspec.yaml 中各个属性的配置。 创立一个新的我的项目（Flutter Application），pubspec.yaml 位于根目录，如图： 我的项目中默认配置，去掉正文局部，剩下如下： name: flutter_appdescription: A new Flutter application.publish_to: 'none' version: 1.0.0+1environment: sdk: ">=2.7.0 <3.0.0"dependencies: flutter: sdk: flutter cupertino_icons: ^1.0.0dev_dependencies: flutter_test: sdk: flutterflutter: uses-material-design: true上面咱们一个一个的具体介绍下。 name此属性示意包名（package name），此属性是十分重要的，引入其余文件时须要应用此包名： import 'package:flutter_app/home_page.dart';如果你批改包名为 ，那么相应的引入也须要批改: import 'package:flutter_app_demo/home_page.dart';如果你创立了一个 Flutter 插件并公布到 pub.dev，那么此属性将会作为题目显示，同时其他人援用也须要应用此属性。 descriptiondescription 属性是一个可选配置属性，是对以后我的项目的介绍。如果作为插件公布到 pub.dev 上，此值显示在如下地位： version此属性应用程序的版本和外部版本号，格局为 x.x.x+x，例如：1.0.0+1，这个版本号称为 语义版本号（semantic versioning ），semantic versioning 相干常识请参考此处。 版本号 + 后面到局部，叫做 version number，由 2 个小点隔开，前面的局部叫做 build number。 ...

string_num_calculate一个用于计算数字字符串算式的库。Calculate mathematical formula result from string. 可不便用于app制作虚构键盘，虚构计算器。With this package, You can easily make virtual keyboard or virtual calculator for your APP. 已通过测试，可放心使用。All tests passed, enjoy :) APICalculate// Main Class static Map<String, Function> funs定义的办法映射 static List<String> toNumberList把字符串中的数字和算式符号提取为listExtract numbers and operators from the string into a list static List<String> formatList把数字和算式符号列表中反复的符号去除Remove redundant operators from list static num LinierCalculate间接计算字符串式算式Calculate directly from string static num ListCalculate计算list式算式Calculate for list static num plus加法plus ...

视频https://www.bilibili.com/vide... 关注点目录文件构造是否合乎官网的包治理标准， 组件拆分页面、组件、通用、业务 工具类设计通信、长久化、平安、字符、数字、浮点 第三方组件流媒体、播放器、编辑器、图片、Web 视图、原生扩大 状态治理bloc、provider 云服务firebase、google cloud、AWS、serverless 业务完整性可运行、业务全 ★ Prism 壁纸 ★https://github.com/Hash-Studi... ★ Flutter-Movies4U 电影资讯 ★https://github.com/webaddicte... ★ anytime_podcast_player podcast 播放器 ★https://github.com/amugofjava... ★ gcloud-dota-app dota 游戏资讯 全栈我的项目 ★flutter + react + go + firebase + google cloud https://github.com/alvarowolf... ★ LunaSea 多媒体网盘治理 ★https://github.com/CometTools... ★ passwall-mobile 明码治理 全栈我的项目 ★flutter + electron + go https://github.com/aeosmanogl...https://github.com/passwall/p...https://github.com/passwall/p...https://passwall.io restofinder 美食https://github.com/yusriltake... SongTube-App 音乐播放下载https://github.com/SongTube/S... ...

Flutter 1.22版本新增了3个按钮，TextButton、OutlinedButton、ElevatedButton，尽管以前的Button没有被废除，但还是倡议应用新的Button。为什么会新增 Button？因为想要将以前的按钮调整为对立的外观比拟麻烦，因而以前常常应用自定义的按钮，而新增的按钮解决了此类问题，能够十分不便的设置整体外观。 1.22版本前的按钮主题1.22版本后的按钮主题FlatButtonButtonThemeTextButtonTextButtonThemeOutlineButtonButtonThemeOutlinedButtonOutlinedButtonThemeRaisedButtonButtonThemeElevatedButtonElevatedButtonTheme款式比照： 外观上并没有很大的不同，但TextButton、OutlinedButton、ElevatedButton 将外观属性汇合为一个 ButtonStyle，十分不便对立管制。 TextButton、OutlinedButton、ElevatedButton 这3个按钮的用法和属性完全相同，上面以 TextButton 为例。 简略应用： TextButton( child: Text('TextButton'),) 当 onPressed 不设置或者设置为 null 时，按钮为不可用状态。 TextButton( child: Text('TextButton'), onPressed: (){},) onPressed 为点击回调，onLongPress 为长按回调。 上面是最重要的属性 ButtonStyle，所有外观都是通过这个属性进行管制，属性如下： const ButtonStyle({ this.textStyle, //字体 this.backgroundColor, //背景色 this.foregroundColor, //前景色 this.overlayColor, // 高亮色，按钮处于focused, hovered, or pressed时的色彩 this.shadowColor, // 暗影色彩 this.elevation, // 暗影值 this.padding, // padding this.minimumSize, //最小尺寸 this.side, //边框 this.shape, //形态 this.mouseCursor, //鼠标指针的光标进入或悬停在此按钮的[InkWell]上时。 this.visualDensity, // 按钮布局的紧凑水平 this.tapTargetSize, // 响应触摸的区域 this.animationDuration, //[shape]和[elevation]的动画更改的持续时间。 this.enableFeedback, // 检测到的手势是否应提供声音和/或触觉反馈。例如，在Android上，点击会产生咔哒声，启用反馈后，长按会产生短暂的振动。通常，组件默认值为true。});这些属性的用法也和以前的不一样，比方 textStyle 并不是间接设置 TextStyle，上面设置字体： ...

Flutter 混合开发系列 蕴含如下： 嵌入原生View-Android嵌入原生View-iOS与原生通信-MethodChannel与原生通信-BasicMessageChannel与原生通信-EventChannel增加 Flutter 到 Android Activity增加 Flutter 到 Android Fragment增加 Flutter 到 iOS每个工作日分享一篇，欢送关注、点赞及转发。 Flutter 能够作为 frameworks 增加到 iOS 我的项目，iOS我的项目引入Flutter module须要装置Xcode，另外Flutter反对iOS8及以上。 创立 Flutter module因为 Xcode 无奈像 Android Studio 一样装置插件，因而只能通过命令创立 Flutter module，关上终端，输出如下： cd ios 我的项目根目录flutter create --template module my_flutter 执行结束后，Flutter module将会创立在 ios我的项目/my_flutter目录下，目录构造如图： .ios 是暗藏目录，能够独自运行Flutter module，测试此模块的性能，iOS代码增加到现有应用程序的我的项目或插件中，而不是增加到模块的.ios /目录中。 因为.ios /目录是主动生成的，因而请勿对其进行源代码管制。在新机器上构建模块之前，请先在my_flutter目录中运行flutter pub get来从新生成.ios /目录，而后再应用Flutter模块构建iOS我的项目。 将Flutter模块嵌入到现有应用程序中将Flutter模块嵌入到现有iOS应用程序中有两种形式： 应用CocoaPods和已装置的Flutter SDK（举荐）。为Flutter引擎，已编译的Dart代码和所有Flutter插件创立 frameworks。手动嵌入 frameworks，并在Xcode中更新现有应用程序的构建设置。应用程序无奈在 Release 模式下的模拟器上运行，因为Flutter尚不反对为Dart代码提前输入x86 / x86_64二进制（AOT）二进制文件。在模拟器或实在设施上以调试模式运行，而在实在设施上以Release模式运行。上面的两种形式是将 Release frameworks 增加到 iOS 应用程序，因而编译的时候设施不能抉择模拟器，否则编译失败。 ...

1.筹备好keyName.jks（Apk签名文件）后才进行如下动作:（如果不晓得怎么筹备能够看我上一篇文章 flutter打包签名文件筹备）新建文件夹key在 我的项目/android/app下将keyName.jks复制到该文件夹下（此时我的我的项目中为：flu_app/android/app/key/sign.jks ，我的签名文件命名为sign.jsk，当前内容我全副以该sign.jsk指apk签名文件）如图： 2.在我的项目/android文件夹下新增 key.properties文件文件内容：storePassword=123456keyPassword=123456keyAlias=signstoreFile=key/sign.jks重要事件说三遍：没有''引号、没有//正文，没有''引号、没有//正文，没有''引号、没有//正文 （掉坑不解释v_v!!!）内容对应为我上一篇文章的 storePassword=>第一次设置的明码，keyPassword=>第二次设置的明码，keyAlias=>第一次设置的别名（flutter打包签名文件筹备）， storeFile=>后面操作复制的apk签名文件门路地位。如下图： 3.配置我的项目/android/build.gradle文件：找到andriod {xxxx} 模块 1.在后面新增: def keystorePropertiesFile = rootProject.file("key.properties")def keystoreProperties = new Properties()keystoreProperties.load(new FileInputStream(keystorePropertiesFile)) 2.屏蔽原有buildTypes：{} ： 3.buildTypes同级新增： signingConfigs { release { keyAlias keystoreProperties['keyAlias'] keyPassword keystoreProperties['keyPassword'] storeFile file(keystoreProperties['storeFile']) storePassword keystoreProperties['storePassword'] }}buildTypes { release { signingConfig signingConfigs.release }}signingConfigs.release 中 keystoreProperties['xxx']，xxx内容为后期第二步中key.properties 内对应Key字符串此时对应文件设置曾经配置结束。 4.我的项目下运行 flutter build apk命令：如果没有报错就能够胜利打包apk 如果谬误未知(可能是Icon有问题 我就遇到这个悲伤的问题v_v!!!)能够尝试运行 flutter build apk --no-tree-shake-icons 命令。如果你脸比我黑，祝贺你！ 本人翻Bug去吧。（提供两个命令:1.flutter doctor -v 查看是否有问题。2.flutter build apk --release -vv 认真翻bug所在）。 ...

1.终端运行命令生成秘钥文件keytool -genkey -v -keystore c:/sign.jks -keyalg RSA -keysize 2048 -validity 10000 -alias sign c:/sign.jks为秘钥生成地位运行后须要配置对应信息输出密钥库口令:再次输出新口令:您的名字与姓氏是什么? zqr您的组织单位名称是什么? uxh您的组织名称是什么? uxh您所在的城市或区域名称是什么? gz您所在的省/市/自治区名称是什么? gz该单位的双字母国家/地区代码是什么? cnCN=zqr, OU=uxh, O=uxh, L=gz, ST=gz, C=cn是否正确? y正在为以下对象生成 2,048 位RSA密钥对和自签名证书 (SHA256withRSA) (有效期为 10,000 天): CN=zqr, OU=uxh, O=uxh, L=gz, ST=gz, C=cn输出 <sign> 的密钥口令(如果和密钥库口令雷同, 按回车):再次输出新口令: 这里我是统一的此时就生成完结了运行:keytool -list -v -keystore c:/sign.jks -alias sign -storepass android -storepass 123456能够查看对应信息（我的明码是：123456）别名: sign创立日期: 2020-10-31条目类型: PrivateKeyEntry证书链长度: 1证书[1]:所有者: CN=zqr, OU=uxh, O=uxh, L=gz, ST=gz, C=cn发布者: CN=zqr, OU=uxh, O=uxh, L=gz, ST=gz, C=cn序列号: 28dc45d8有效期开始日期: Sat Oct 31 14:56:03 CST 2020, 截止日期: Wed Mar 18 14:56:03 CST 2048证书指纹: ...

问题应用dart计算每个月多少天。 代码竟然这么简略的问题还常常有人问……间接贴代码 for (var month = 1; month <= 12; month++) { // 年份，轻易哪一年 var year = DateTime.now().year; // 计算下个月1号的前一天是几号，得出后果 var dayCount = DateTime(year, month + 1, 0).day; print('$month' '月:$dayCount' '天');}其实就是计算下个月1号的前一天是几号。 总之很简略。

Flutter 混合开发系列 蕴含如下： 嵌入原生View-Android嵌入原生View-iOS与原生通信-MethodChannel与原生通信-BasicMessageChannel与原生通信-EventChannel增加 Flutter 到 Android Activity增加 Flutter 到 Android Fragment增加 Flutter 到 iOS每个工作日分享一篇，欢送关注、点赞及转发。 EventChannelFlutter 端Flutter 端创立 EventChannel 通道，用于与原生端通信： var _eventChannel = EventChannel('com.flutter.guide.EventChannel');com.flutter.guide.EventChannel 是 EventChannel 的名称，原生端要与之对应。 监听原生端发送的音讯： var _data; @override void initState() { super.initState(); _eventChannel.receiveBroadcastStream().listen(_onData); } _onData(event){ setState(() { _data = event; }); }Flutter 端残缺代码： class EventChannelDemo extends StatefulWidget { @override _EventChannelDemoState createState() => _EventChannelDemoState();}class _EventChannelDemoState extends State<EventChannelDemo> { var _eventChannel = EventChannel('com.flutter.guide.EventChannel'); var _data; @override void initState() { super.initState(); _eventChannel.receiveBroadcastStream().listen(_onData); } _onData(event){ setState(() { _data = event; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(), body: Center( child: Text('$_data'), ), ); }}Android 端android 下创立 EventChannelDemo： ...

老孟导读：这是一个读者面试时被问到的问题，这个问题前段时间我也在VIP交换群和大家一起探讨过。这个问题波及引擎的相干常识，如果不理解相干常识，很难答复正确，因为不论说调用几次都是谬误的，上面来看一下引擎的相干常识。 创立一个 Flutter 我的项目，而后运行，main入口函数 只会执行一次，上面批改我的项目的 MainActivity ， class MainActivity : Activity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) findViewById<Button>(R.id.button).setOnClickListener { startActivity(Intent(this, FlutterActivity::class.java)) } }}将其批改为一个一般的 Activity（原来是 FlutterActivity），增加一个按钮，跳转到 FlutterActivity，加载 Flutter 页面。 在 flutter 的 main 入口函数处增加日志： void main() { runApp(MyApp()); print('===main====');}运行，点击跳转，跳转到了Flutter 页面，返回，再次点击跳转： 日志如下： 发现执行了2次main 入口函数。 应用缓存引擎跳转： val flutterEngine = FlutterEngine(this)flutterEngine.dartExecutor.executeDartEntrypoint( DartExecutor.DartEntrypoint.createDefault())FlutterEngineCache .getInstance() .put("engine_id", flutterEngine)findViewById<Button>(R.id.button).setOnClickListener { startActivity( FlutterActivity .withCachedEngine("engine_id") .build(this) )} 运行，发现还没有点击跳转，就执行了1次main 入口函数，点击跳转，而后这次不在执行 main 入口函数。 减少一个函数 main1: ...

Flutter 混合开发系列 蕴含如下： 嵌入原生View-Android嵌入原生View-iOS与原生通信-MethodChannel与原生通信-BasicMessageChannel与原生通信-EventChannel增加 Flutter 到 Android Activity增加 Flutter 到 Android Fragment增加 Flutter 到 iOS每个工作日分享一篇，欢送关注、点赞及转发。 平台通信的3中形式Flutter 与 Native 端通信有如下3个办法： MethodChannel：Flutter 与 Native 端互相调用，调用后能够返回后果，能够 Native 端被动调用，也能够Flutter被动调用，属于双向通信。此形式为最罕用的形式， Native 端调用须要在主线程中执行。BasicMessageChannel：用于应用指定的编解码器对音讯进行编码和解码，属于双向通信，能够 Native 端被动调用，也能够Flutter被动调用。EventChannel：用于数据流（event streams）的通信， Native 端被动发送数据给 Flutter，通常用于状态的监听，比方网络变动、传感器数据等。Flutter 端Flutter 端创立 MethodChannel 通道，用于与原生端通信： var channel = BasicMessageChannel('com.flutter.guide.BasicMessageChannel',StandardMessageCodec());com.flutter.guide.BasicMessageChannel 是 BasicMessageChannel 的名称，原生端要与之对应。 发送音讯： var result = await channel.send({'name': 'laomeng', 'age': 18});参数类型任意，多个参数通常应用Map。返回 Future，原生端返回的数据。残缺代码： class BasicMessageChannelDemo extends StatefulWidget { @override _BasicMessageChannelDemoState createState() => _BasicMessageChannelDemoState();}class _BasicMessageChannelDemoState extends State<BasicMessageChannelDemo> { var channel = BasicMessageChannel('com.flutter.guide.BasicMessageChannel',StandardMessageCodec()); var _data; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(), body: Column( children: [ SizedBox( height: 50, ), RaisedButton( child: Text('发送数据到原生'), onPressed: () async { var result = await channel.send({'name': 'laomeng', 'age': 18}); var name = result['name']; var age = result['age']; setState(() { _data = '$name,$age'; }); }, ), Text('原生返回数据：$_data'), ], ), ); }}Android 端android 下创立 BasicMessageChannelDemo： ...

Flutter 自 2015 年推出以来，凭借着其极高的开发交付效率，优良的多平台能力，以及弱小的 UI 表现力，受到了许多开发者们的推崇。尽管 Flutter 确实仍旧存在一些问题，但仍然是不少开发者们在跨平台开发时的第一抉择。 明天 Gitee 为开发者们举荐的就是几款优良的 Flutter 开源我的项目，心愿不论是接触 Flutter 的新人，还是应用了很久的老炮，都会有所播种。 1.flutter_luckin_coffee我的项目作者：meetqy 开源许可协定：AFL-3.0 我的项目地址：https://gitee.com/meetqy/flutter_luckin_coffee flutter 仿瑞幸咖啡利用。 2.flutter-p2p-engine我的项目作者：cdnbye 我的项目地址：https://gitee.com/cdnbye/flutter-p2p-engine Flutter视频/直播APP省流量&减速神器，几行代码即可在现有Flutter我的项目中疾速集成。 3.Flutter2048我的项目作者：fyl080801 开源许可协定：MIT 我的项目地址：https://gitee.com/fyl080801_admin/flutter2048 基于 flutter 开发的 2048 游戏，反对3x3 4x4 6x6三种模式。 4.MXFlutter我的项目作者：LEARN 开源许可协定：MIT 我的项目地址：https://gitee.com/huoxd/MXFlutter MXFlutter 是一套基于 JavaScript 的 Flutter 框架，能够用极其相似 Dart 的开发方式，通过编写 JavaScript 代码，来开发 Flutter 利用，或者应用 mxjsbuilder 编译器，把现有Flutter 工程编译为JS，运行在 mxflutter 之上。 5.flutter-icons我的项目作者：flutter-studio 开源许可协定：Apache-2.0 我的项目地址：https://gitee.com/flutter-studio/flutter-icons 用于Flutter的可定制的图标库。 6.rich-edit我的项目作者：bastResult 开源许可协定：Apache-2.0 我的项目地址：https://gitee.com/showyyj/rich_edit flutter 富文本编辑器，反对图文、视频混排。 ...

Flutter 混合开发系列 蕴含如下： 嵌入原生View-Android嵌入原生View-iOS与原生通信-MethodChannel与原生通信-BasicMessageChannel与原生通信-EventChannel增加 Flutter 到 Android Activity增加 Flutter 到 Android Fragment增加 Flutter 到 iOS每个工作日分享一篇，欢送关注、点赞及转发。 平台通信的3中形式Flutter 与 Native 端通信有如下3个办法： MethodChannel：Flutter 与 Native 端互相调用，调用后能够返回后果，能够 Native 端被动调用，也能够Flutter被动调用，属于双向通信。此形式为最罕用的形式， Native 端调用须要在主线程中执行。BasicMessageChannel：用于应用指定的编解码器对音讯进行编码和解码，属于双向通信，能够 Native 端被动调用，也能够Flutter被动调用。EventChannel：用于数据流（event streams）的通信， Native 端被动发送数据给 Flutter，通常用于状态的监听，比方网络变动、传感器数据等。通信架构图此图为官网的架构图 Flutter 与 Native 端通信是异步的。 通信与平台线程Native 端被动发送数据给 Flutter时，Native 端代码须要在主线程中执行，Android 端从子线程跳转到主线程形式： Kotlin 代码： Handler(Looper.getMainLooper()).post { }Java 代码： new Handler(Looper.getMainLooper()).post(new Runnable() { @Override public void run() { }});如果能够获取到以后 Activity，也能够应用如下形式： activity.runOnUiThread { }iOS 端从子线程跳转到主线程形式： Objective-C 代码： ...

Flutter 混合开发系列 蕴含如下： 嵌入原生View-Android嵌入原生View-iOS与原生通信-MethodChannel与原生通信-BasicMessageChannel与原生通信-EventChannel增加 Flutter 到 Android Activity增加 Flutter 到 Android Fragment增加 Flutter 到 iOS每个工作日分享一篇，欢送关注、点赞及转发。 iOS View倡议应用 Xcode 进行开发，在 Android Studio 左侧 project tab下选中 ios 目录下任意一个文件，右上角会呈现 Open iOS module in Xcode ， 点击即可关上，关上后如下： 在Runner 目录下创立 iOS View，此 View 继承 FlutterPlatformView ，返回一个简略的 UILabel ： import Foundationimport Flutterclass MyFlutterView: NSObject,FlutterPlatformView { let label = UILabel() init(_ frame: CGRect,viewID: Int64,args :Any?,messenger :FlutterBinaryMessenger) { label.text = "我是 iOS View" } func view() -> UIView { return label } }getView ：返回iOS View ...

Flutter 混合开发系列 蕴含如下： 嵌入原生View-Android嵌入原生View-IOS与原生通信-MethodChannel与原生通信-BasicMessageChannel与原生通信-EventChannel增加 Flutter 到 Android Activity增加 Flutter 到 Android Fragment增加 Flutter 到 iOS每个工作日分享一篇，欢送关注、点赞及转发。 AndroidView倡议应用 Android Studio 进行开发，在 Android Studio 左侧 project tab下选中 android 目录下任意一个文件，右上角会呈现 Open for Editing in Android Studio ， 点击即可关上，关上后 project tab 并不是一个 Android 我的项目，而是我的项目中所有 Android 我的项目，蕴含第三方： app 目录是以后我的项目的 android 目录，其余则是第三方的 android 目录。 在App 我的项目的 java/包名 目录下创立嵌入 Flutter 中的 Android View，此 View 继承 PlatformView ： class MyFlutterView(context: Context) : PlatformView { override fun getView(): View { TODO("Not yet implemented") } override fun dispose() { TODO("Not yet implemented") }}getView ：返回要嵌入 Flutter 层次结构的Android Viewdispose：开释此View时调用，此办法调用后 View 不可用，此办法须要革除所有对象援用，否则会造成内存透露。 ...

作者：隋晓旭 你是否想过从头开发一款相似 QQ、微信的聊天利用？又或者，想要在你开发的利用中退出聊天性能，不便用户交换，加强用户粘性？那么，这篇文章就是为你筹备的。在这篇文章中，我将介绍如何基于 Flutter 疾速实现一款聊天利用。 利用简介这个基于 Flutter 开发的利用还在继续欠缺中，现曾经反对如下性能： 登录、登出发动单聊发动群聊反对文字音讯、语音音讯、图片音讯反对展现未读音讯数反对展示会话成员反对批改会话名称反对离线音讯推送投诉举报不良信息把某用户退出黑名单页面截图 开发环境搭建第一步：Flutter 装置和环境搭建间接查看： Flutter 文档。第二步：登录 LeanCloud 控制台，创立 LeanCloud 利用。 在控制台 > 利用 > 设置 >域名绑定页面绑定 API 拜访域名。临时没有域名能够略过这一步，LeanCloud 也提供了短期无效的收费体验域名；或者注册 LeanCloud 国际版，国际版不要求绑定域名。在控制台 > 利用 > 设置 > 利用 Keys 页面记录 AppID、AppKey 与服务器地址备用，这里的服务器地址就是 REST API 服务器地址。如果未绑定域名，控制台雷同的地位能够获取到收费的共享域名。APP 初始化设置在 pubspec.yaml 中，将 LeanCloud Flutter SDK 增加到依赖项列表: dependencies: leancloud_official_plugin: ^1.0.0-beta.8 //即时通信插件 leancloud_storage: ^0.2.9 //数据存储 SDK而后运行 flutter pub get 装置 SDK。 因为 leancloud_official_plugin 是基于 Swift SDK 以及 Java Unified SDK 开发，所以还要装置前面两个 SDK，这样利用能力别离在 iOS 和 Android 设施运行。 ...

在《APP 开发从 0 到 1（三）布局与 ListView》咱们实现了 ListView，这篇文章将做 ListView 下拉加载和加载更多。 ListView 下拉加载Flutter 提供了 RefreshIndicator 下拉刷新组件，能够轻松让咱们实现 Material Design 格调的下拉刷新成果。 参数详解 //下拉刷新组件 const RefreshIndicator ({ Key key, @required this.child, this.displacement: 40.0, //触发下拉刷新的间隔 @required this.onRefresh, //下拉回调办法,办法须要有async和await关键字，没有await，刷新图标立马隐没，没有async，刷新图标不会隐没 this.color, //进度指示器前景色，默认为零碎主题色 this.backgroundColor, //背景色 this.notificationPredicate: defaultScrollNotificationPredicate, })成果预览 残缺代码废话不多说，间接上残缺代码，你可细品下哦。 import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';class ListViewPage extends StatefulWidget { @override ListViewPageState createState() => new ListViewPageState();}class ListViewPageState extends State<ListViewPage> { List list = new List(); //列表要展现的数据 @override void initState() { super.initState(); getData(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('AndBlog'), ), body: RefreshIndicator( onRefresh: _onRefresh, child: ListView.builder( itemCount: list.length, itemBuilder: (BuildContext context, int index) { return ListTile( title: Text(list[index]), ); }, )), floatingActionButton: FloatingActionButton( tooltip: 'Increment', child: Icon(Icons.account_box), onPressed: () { print("FloatingActionButton"); }, elevation: 30, ), // This trailing comma makes auto-formatting nicer for build methods. ); } Future<Null> _onRefresh() async { await Future.delayed(Duration(seconds: 3), () { print('refresh'); setState(() { list = List.generate(20, (i) => '哈喽，我是下拉刷新的数据 $i'); }); }); } Future getData() async { await Future.delayed(Duration(seconds: 2), () { setState(() { list = List.generate(30, (i) => '哈喽，我是原始数据 $i'); }); }); }}ListView 加载更多Flutter 没有间接提供加载更多组件，但咱们能够在 ListView 监听 ScrollController，判断是否滑到底，而后加载下一页。 ...

【Flutter Widgets大全】是老孟消耗大量精力整顿的，总共有330多个组件的具体用法，开源到Github上，心愿能够帮忙到大家，开源不易，点个赞可不可以????。【Flutter Widgets 大全】 为 Flutter 老孟 网站我的项目，共收录 330 多个 Widgets，此电子书并不适宜入门（一个一个组件学习），适宜当作手册，须要的时候进行查阅。 为了不便比照学习，我将相近或相同性能的组件整顿到一个文件中，比方所有的 Button 类组件、弹出类组件等。 如果想零碎的学习入门常识，请到 Flutter 老孟 实战 查看。 Flutter 老孟博客（在线浏览地址）：http://laomengit.com/flutter/widgets/widgets_structure.htmlGithub 地址：https://github.com/781238222/flutter-doFlutter Widgets 目录AboutDialog 在线查看AboutListTile 在线查看AbsorbPointer 在线查看ActionChip 在线查看AlertDialog 在线查看 Align 在线查看AlignTransition 在线查看AlwaysScrollableScrollPhysics 在线查看AnimatedAlign 在线查看AnimatedBuilder 在线查看AnimatedContainer 在线查看AnimatedCrossFade 在线查看AnimatedDefaultTextStyle 在线查看AnimatedIcon 在线查看AnimatedList 在线查看AnimatedModalBarrier 在线查看AnimatedOpacity 在线查看AnimatedPadding 在线查看AnimatedPhysicalModel 在线查看AnimatedPositioned 在线查看AnimatedPositionedDirectional 在线查看AnimatedSize 在线查看AnimatedSwitcher 在线查看AppBar 在线查看AspectRatio 在线查看AssetImage 在线查看BackButton 在线查看BackButtonIcon 在线查看BackdropFilter 在线查看Banner 在线查看Baseline 在线查看BeveledRectangleBorder 在线查看Border 在线查看BorderDirectional 在线查看BottomAppBar 在线查看BottomNavigationBar 在线查看BottomNavigationBarItem 在线查看BouncingScrollPhysics 在线查看Builder 在线查看ButtonBar 在线查看ButtonBarTheme 在线查看ButtonBarThemeData 在线查看ButtonTheme 在线查看Card 在线查看Center 在线查看Checkbox 在线查看CheckboxListTile 在线查看CheckedModeBanner 在线查看CheckedPopupMenuItem 在线查看Chip 在线查看ChipTheme 在线查看ChipThemeData 在线查看ChoiceChip 在线查看CircleAvatar 在线查看CircleBorder 在线查看CircularProgressIndicator 在线查看ClampingScrollPhysics 在线查看ClipOval 在线查看ClipPath 在线查看ClipRRect 在线查看ClipRect 在线查看CloseButton 在线查看ColorFiltered 在线查看Column 在线查看ConstrainedBox 在线查看Container 在线查看ContinuousRectangleBorder 在线查看CupertinoActionSheet 在线查看CupertinoActionSheetAction 在线查看CupertinoActivityIndicator 在线查看CupertinoAlertDialog 在线查看CupertinoApp 在线查看CupertinoButton 在线查看CupertinoContextMenu 在线查看CupertinoContextMenuAction 在线查看CupertinoDatePicker 在线查看CupertinoFullscreenDialogTransition 在线查看CupertinoNavigationBar 在线查看CupertinoNavigationBarBackButton 在线查看CupertinoPageScaffold 在线查看CupertinoPicker 在线查看CupertinoScrollbar 在线查看CupertinoSegmentedControl 在线查看CupertinoSlider 在线查看CupertinoSlidingSegmentedControl 在线查看CupertinoSliverNavigationBar 在线查看CupertinoSliverRefreshControl 在线查看CupertinoSwitch 在线查看CupertinoTabBar 在线查看CupertinoTabScaffold 在线查看CupertinoTabView 在线查看CupertinoTextField 在线查看CupertinoTextSelectionToolbar 在线查看CupertinoTheme 在线查看CupertinoTimerPicker 在线查看CustomClipper 在线查看CustomMultiChildLayout 在线查看CustomPaint 在线查看CustomScrollView 在线查看CustomSingleChildLayout 在线查看DataCell 在线查看DataColumn 在线查看DataColumn 在线查看DataRow 在线查看DataTable 在线查看DayPicker 在线查看DecoratedBox 在线查看DecoratedBoxTransition 在线查看DefaultAssetBundle 在线查看DefaultTextStyle 在线查看DefaultTextStyleTransition 在线查看Dialog 在线查看Directionality 在线查看Dismissible 在线查看Divider 在线查看DividerTheme 在线查看DividerThemeData 在线查看DragTarget 在线查看Draggable 在线查看DraggableScrollableActuator 在线查看DraggableScrollableSheet 在线查看Drawer 在线查看DrawerHeader 在线查看DropdownButton 在线查看DropdownButtonFormField 在线查看DropdownButtonHideUnderline 在线查看ErrorWidget 在线查看ExpandIcon 在线查看Expanded 在线查看ExpansionPanelList 在线查看ExpansionTile 在线查看FadeInImage 在线查看FadeTransition 在线查看FilterChip 在线查看FittedBox 在线查看FixedExtentScrollPhysics 在线查看FlatButton 在线查看Flexible 在线查看FlexibleSpaceBar 在线查看FloatingActionButton 在线查看Flow 在线查看FlutterLogo 在线查看Form 在线查看FormField 在线查看FractionalTranslation 在线查看FractionallySizedBox 在线查看FutureBuilder 在线查看GestureDetector 在线查看GlowingOverscrollIndicator 在线查看GridPaper 在线查看GridTile 在线查看GridTileBar 在线查看GridView 在线查看Hero 在线查看HtmlElementView 在线查看Icon 在线查看IconButton 在线查看IconTheme 在线查看IgnorePointer 在线查看Image 在线查看ImageIcon 在线查看IndexedStack 在线查看Ink 在线查看InkWell 在线查看InputChip 在线查看InputDecoration 在线查看InputDecorator 在线查看IntrinsicHeight 在线查看IntrinsicWidth 在线查看KeyedSubtree 在线查看LayoutBuilder 在线查看LayoutId 在线查看LicensePage 在线查看LimitedBox 在线查看LinearProgressIndicator 在线查看ListBody 在线查看ListTile 在线查看ListTileTheme 在线查看ListView 在线查看ListWheelScrollView 在线查看Listener 在线查看Localizations 在线查看LongPressDraggable 在线查看Material 在线查看MaterialApp 在线查看MaterialBanner 在线查看MaterialBannerTheme 在线查看MaterialBannerThemeData 在线查看MaterialTapTargetSize 在线查看MediaQuery 在线查看MediaQueryData 在线查看MergeableMaterial 在线查看ModalBarrier 在线查看MonthPicker 在线查看NavigationToolbar 在线查看Navigator 在线查看NestedScrollView 在线查看NeverScrollableScrollPhysics 在线查看NotificationListener 在线查看Offstage 在线查看Opacity 在线查看OrientationBuilder 在线查看OutlineButton 在线查看OutlineInputBorder 在线查看OverflowBox 在线查看Overlay 在线查看Padding 在线查看PageScrollPhysics 在线查看PageView 在线查看PaginatedDataTable 在线查看PhysicalModel 在线查看PhysicalShape 在线查看Placeholder 在线查看PopupMenuButton 在线查看PopupMenuDivider 在线查看PopupMenuItem 在线查看PopupMenuTheme 在线查看PopupMenuThemeData 在线查看Positioned 在线查看PositionedDirectional 在线查看PositionedTransition 在线查看PreferredSize 在线查看Radio 在线查看RaisedButton 在线查看RangeSlider 在线查看RawChip 在线查看RawGestureDetector 在线查看RawKeyboardListener 在线查看RawMaterialButton 在线查看RefreshIndicator 在线查看RefreshProgressIndicator 在线查看RelativePositionedTransition 在线查看ReorderableListView 在线查看RichText 在线查看RotatedBox 在线查看RotationTransition 在线查看RoundedRectangleBorder 在线查看Row 在线查看SafeArea 在线查看Scaffold 在线查看ScaleTransition 在线查看ScrollConfiguration 在线查看ScrollPhysics 在线查看Scrollable 在线查看Scrollbar 在线查看SelectableText 在线查看Semantics 在线查看ShaderMask 在线查看ShapeBorder 在线查看SimpleDialog 在线查看SingleChildScrollView 在线查看SizeChangedLayoutNotification 在线查看SizeChangedLayoutNotifier 在线查看SizeTransition 在线查看SizedBox 在线查看SizedOverflowBox 在线查看SlideTransition 在线查看Slider 在线查看SliderTheme 在线查看SliderThemeData 在线查看SliverAnimatedList 在线查看SliverAppBar 在线查看SliverFillRemaining 在线查看SliverFillViewport 在线查看SliverFixedExtentList 在线查看SliverGrid 在线查看SliverLayoutBuilder 在线查看SliverList 在线查看SliverOpacity 在线查看SliverPadding 在线查看SliverPersistentHeader 在线查看SliverPrototypeExtentList 在线查看SliverSafeArea 在线查看SliverToBoxAdapter 在线查看SnackBar 在线查看SnackBarAction 在线查看Spacer 在线查看Stack 在线查看StadiumBorder 在线查看StatefulBuilder 在线查看Stepper 在线查看StreamBuilder 在线查看Switch 在线查看SwitchListTile 在线查看Tab 在线查看TabBar 在线查看TabBarView 在线查看TabPageSelector 在线查看TabPageSelectorIndicator 在线查看Table 在线查看TableCell 在线查看TableRow 在线查看Text 在线查看TextAlign 在线查看TextField 在线查看TextFormField 在线查看TextSelectionGestureDetector 在线查看TextSpan 在线查看Theme 在线查看Title 在线查看ToggleButtons 在线查看ToggleButtonsTheme 在线查看ToggleButtonsThemeData 在线查看Tooltip 在线查看TooltipTheme 在线查看TooltipThemeData 在线查看Transform 在线查看TweenAnimationBuilder 在线查看UnconstrainedBox 在线查看UnderlineInputBorder 在线查看UserAccountsDrawerHeader 在线查看ValueListenableBuilder 在线查看ValueNotifier 在线查看VerticalDivider 在线查看Visibility 在线查看WidgetSpan 在线查看WidgetsApp 在线查看WillPopScope 在线查看Wrap 在线查看YearPicker 在线查看showAboutDialog 在线查看showBottomSheet 在线查看showCupertinoDialog 在线查看showCupertinoModalPopup 在线查看showDatePicker 在线查看showDialog 在线查看showGeneralDialog 在线查看showLicensePage 在线查看showMenu 在线查看showModalBottomSheet 在线查看showSearch 在线查看showTimePicker 在线查看Flutter Widgets PDF开源文件为 markdown 格局，为了不便浏览老孟转换成了 PDF 格局，总计 658页，人不知;鬼不觉曾经整顿了如此多的材料。 ...

flutter android 中发送http申请后，默认会报错。须要批改配置文件。 network_security_config.xml <?xml version="1.0" encoding="utf-8"?><network-security-config><base-config cleartextTrafficPermitted="true" /></network-security-config>AndroidManifest.xml <application android:name="io.flutter.app.FlutterApplication" android:label="flutter_study" android:icon="@mipmap/ic_launcher" android:networkSecurityConfig="@xml/network_security_config"> <activity android:name=".MainActivity" android:launchMode="singleTop" android:theme="@style/LaunchTheme" android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode" android:hardwareAccelerated="true" android:windowSoftInputMode="adjustResize"> <intent-filter> <action android:name="android.intent.action.MAIN"/> <category android:name="android.intent.category.LAUNCHER"/> </intent-filter> </activity> <!-- Don't delete the meta-data below. This is used by the Flutter tool to generate GeneratedPluginRegistrant.java --> <meta-data android:name="flutterEmbedding" android:value="2" /> </application>

反对iOS 14和Android 11，新的i18n和l10n反对，可用于生产的Google Maps和WebView插件，新的App Size工具等等！作者：Chris Sells 原文：https://medium.com/flutter/an... 咱们很快乐推出最新版本的Flutter，它广泛支持iOS 14和Android11。Flutter 1.22在以前版本的根底上构建，使开发人员可能从一个代码库为多个平台构建疾速，好看的用户体验。咱们的季度稳固版本蕴含最新性能，性能改良和谬误修复，适宜宽泛的生产应用。 因为这是新的挪动操作系统版本的公布节令，因而此发行版侧重于确保Android 11和iOS 14与Flutter兼容。这两个操作系统的更新都包含大量的幕后工作，以合乎最新的SDK并确保所有内容都通过咱们宽泛的测试套件。对于iOS 14，此版本包含对新Xcode 12，新图标的反对以及对新iOS 14 App Clips性能的预览反对。对于Android 11，此更新反对新类型的显示切口以及在调出软键盘时更晦涩的动画。 该版本公布于咱们的1.20公布两个月之后，因而比大多数版本都短。即便在这么短的工夫内，咱们也敞开了3,024期，合并了197个贡献者的1,944个PR。在这些贡献者中，有114位（58％）来自整个社区，他们奉献了271个PR。最大的繁多贡献者是 a14n，他再次以20个PR成为咱们的卓越贡献者名单，其中大多数是作为反对Flutter中的零安全性工作的一部分而实现的（更多内容行将推出）。 除了对新的挪动操作系统版本的反对外，还有很多其余要分享的新闻，包含预览Android最重要的性能之一：状态复原，新的“Material 格调按钮“，新的国际化和本地化反对（与热重载一起应用），一个新的Navigator，一个稳固的Platform Views版本（Google Maps和WebView插件的根底）以及一个开关，您能够在其中增加代码以改善在具备高频率显示的设施上的滚动。咱们还提供了一个用于分析应用程序大小并确保您要构建的插件仅反对您要反对的平台的新工具。 iOS 14每当公布新版本的挪动操作系统时，咱们都会对其进行彻底测试，以查找影响Flutter及其工具的不兼容性或更改。 对于iOS 14，咱们对Flutter进行了很多更改，以确保它能够依照开发人员的形式工作： Xcode 12须要iOS 9.0或更高版本，因而咱们的默认模板将其默认值从8.0减少到9.0iOS 14特定解体和字体渲染问题已在Flutter 1.22中修复Flutter 1.20.4，修复了部署到真机设备的问题当应用程序拜访其剪贴板时显示应用告诉，导致在Flutter应用程序中呈现虚伪告诉，该问题已在Flutter 1.20.4中修复iOS 14设施上会禁止运行debug应用程序，但理论开发debug除外针对本地调试的Flutter应用程序的无关网络安全的新策略使iOS 14显示一次性确认对话框（仅在开发过程中，不适用于已公布的Flutter应用程序）如果您要通过Flutter利用定位iOS 14，咱们强烈建议您应用Flutter 1.22对其进行重建，而后立刻将其部署到App Store中，以确保您的iOS 14用户获得最佳体验。 无关应用Flutter适配iOS 14的更多详细信息，包含增加Flutter利用到原生利用，deep linking和告诉注意事项，请参阅 flutter.dev上的iOS 14文档。 心愿所有无关工具和SDK反对的工作都能够让您专一于本人关怀的编码-利用iOS 14的新性能。 其中一项性能是对iOS的新SF Symbols字体的更新反对，咱们花一些工夫更新了cupertino_icon程序包。将cupertino_icons依赖关系更新为新的1.0次要版本后，CupertinoIcons的现有用法将主动映射到新款式。如果您将cupertino_icons 1.0与Flutter 1.22联合应用，那么您还能够通过CupertinoIcons API拜访约900个新图标。 您能够在cupertino_icons预览页面上看到图标的残缺列表，在 flutter.dev上能够看到迁徙详细信息页面。 您能够在iOS 14上尝试应用Flutter的另一个性能是App Clips，它是iOS 14的一项新性能，它反对10MB以下轻量级应用程序的疾速，无装置应用程序执行。在Flutter 1.22版中，咱们预览了应用Flutter构建的App Clip指标。 无关如何应用Flutter构建Clip的更多详细信息，请查看flutter.dev上的文档。您也能够参考这个简略的示例我的项目。 ...

我的项目地址：https://github.com/shipinbaoku/FlutterMovies欢送Star！给点能源！ 多图杀猫，间接展现页面 pubspec.yamlname: androiddescription: 今日看片客户端# The following defines the version and build number for your application.# A version number is three numbers separated by dots, like 1.2.43# followed by an optional build number separated by a +.# Both the version and the builder number may be overridden in flutter# build by specifying --build-name and --build-number, respectively.# In Android, build-name is used as versionName while build-number used as versionCode.# Read more about Android versioning at https://developer.android.com/studio/publish/versioning# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.# Read more about iOS versioning at# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.htmlversion: 6.1.0+250000environment: sdk: ">=2.2.2 <3.0.0"dependencies: flutter: sdk: flutter #冲破打印长度限度 r_logger: ^0.1.2 fluttertoast: ^4.0.1 carousel_slider: ^1.4.1 cached_network_image: 2.0.0 transparent_image: ^1.0.0 dio: ^3.0.9 redux: ^4.0.0 flutter_redux: ^0.6.0 redux_persist: ^0.8.3 redux_persist_flutter: ^0.8.2 underline_indicator: ^0.0.2 flutter_staggered_grid_view: ^0.3.0 #flutter_webview_plugin: ^0.3.11 palette_generator: ^0.2.3 webview_flutter: ^0.3.21 #x5_webview: ^0.2.2 permission_handler: ^5.0.0 common_utils: ^1.1.3 rxdart: ^0.22.6 fluintl: ^0.1.3 flukit: ^1.0.2 share: ^0.6.4+1 url_launcher: ^5.4.5 flutter_bugly: ^0.2.8 flutter_tencentplayer: ^0.5.0 screen: 0.0.5 package_info: ^0.4.0+18 #flutter_downloader: ^1.4.4 launch_review: ^2.0.0 flutter_forbidshot: 0.0.2 path_provider: ^1.6.8 flutter_launcher_icons: ^0.7.5 tencent_ad: ^1.0.2+2 # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^0.1.2dev_dependencies: flutter_test: sdk: flutterflutter_icons: android: "ic_launcher" ios: false image_path: "images/icon.png"# For information on the generic Dart part of this file, see the# following page: https://dart.dev/tools/pub/pubspec# The following section is specific to Flutter.flutter: # The following line ensures that the Material Icons font is # included with your application, so that you can use the icons in # the material Icons class. uses-material-design: true # To add assets to your application, add an assets section, like this: assets: - images/ - images/guide1.png - images/guide2.png - images/guide3.png - images/guide4.png - images/splash_bg.png - images/icon.png - images/tencentplayer/icon_back.png - images/tencentplayer/place_nodata.png - images/tencentplayer/player_lock.png - images/tencentplayer/player_pause.png - images/tencentplayer/player_play.png - images/tencentplayer/player_progress_img.png - images/tencentplayer/player_rotate.png - images/tencentplayer/player_unlock.png - images/tencentplayer/video_loading.png - images/tencentplayer/full_screen_on.png # - images/a_dot_ham.jpeg # An image asset can refer to one or more resolution-specific "variants", see # https://flutter.dev/assets-and-images/#resolution-aware. # For details regarding adding assets from package dependencies, see # https://flutter.dev/assets-and-images/#from-packages # To add custom fonts to your application, add a fonts section here, # in this "flutter" section. Each entry in this list should have a # "family" key with the font family name, and a "fonts" key with a # list giving the asset and other descriptors for the font. For # example: # fonts: # - family: Schyler # fonts: # - asset: fonts/Schyler-Regular.ttf # - asset: fonts/Schyler-Italic.ttf # style: italic # - family: Trajan Pro # fonts: # - asset: fonts/TrajanPro.ttf # - asset: fonts/TrajanPro_Bold.ttf # weight: 700 # # For details regarding fonts from package dependencies, # see https://flutter.dev/custom-fonts/#from-packages数据接口详见lib/app/api_client.dart文件 ...

共四个文件1.routes：import 'package:flutter/material.dart';import '../pages/tabbarPages/home_page.dart';//路由页面门路import '../pages/goods/goodsDtail.dart';//路由页面门路// 配置路由final routes = { // 后面是路由命名 前面是加载的页面 '/': (context) => HomePages(), //不必传参的写法 '/goods/detail': (context,{arguments})=>GoodsDetail(arguments:arguments),};//带参办法 留神 {arguments} 以及 页面参数 arguments:arguments// 固定写法，对立解决，无需更改var onGenerateRoute = (RouteSettings settings) { final String name = settings.name; final Function pageContentBuilder = routes[name]; if (pageContentBuilder != null) { if (settings.arguments != null) { final Route route = MaterialPageRoute( builder: (context) => pageContentBuilder(context, arguments: settings.arguments)); return route; } else { final Route route = MaterialPageRoute(builder: (context) => pageContentBuilder(context)); return route; } }};2.class MyApp extends StatelessWidget中配置import './routers/routes.dart';//引入刚配置的路由详情child: MaterialApp( title: KString.mainTitle,//路由传参页面 debugShowCheckedModeBanner: false,// home: IndexPages(), //配置命名路由 initialRoute: '/', //初始化加载的路由 onGenerateRoute: onGenerateRoute //刚刚routes中的办法3.须要jump的页面Navigator.pushNamed(context, '/goods/detail',arguments: {"goodsId":item['id']}); //{"goodsId":item['id']} 为参数内容4.具体要跳转的页面import 'package:flutter/widgets.dart';import 'package:flutter/material.dart';import '../../service/http_service.dart';import '../../config/index.dart';import 'dart:convert';import 'package:flutter_screenutil/flutter_screenutil.dart';class GoodsDetail extends StatefulWidget { Map arguments; //将参数传递给子类~~~~ GoodsDetail({Key key, this.arguments}) : super(key: key); _GoodsDetail createState() => _GoodsDetail();}class _GoodsDetail extends State<GoodsDetail> { @override void initState() { // TODO: implement initState super.initState(); print('-----------'); print(widget.arguments['goodsId']);//取得的参数内容 } @override Widget build(BuildContext context) { // TODO: implement build return Scaffold( appBar: AppBar( title: Text(KString.goodsDetailTitleText), ), body: Row( children: <Widget>[ Expanded( flex: 1, child: Column( mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[Text('商品详情页面')])), ], )); }}刚学习flutter ， 进行带参跳转时 没在routes中增加onGenerateRoute办法，而是在main函数中间接写routes路由参数，导致带参始终不胜利，心愿新入坑的童鞋不要在掉进来。 ...

学习内容1【干货】闲鱼工程师是如何构建继续集成流水线，让研发效率翻倍的精益开发模式 2-1-1 2周需要交付周期 1周需要开发周期 1小时集成时长面临的要求和挑战 业务对交付响应工夫越来越快 (速度为王 反摩尔定律，交付工夫越迟 商品价值打折就越厉害)团队规模变大，我的项目沟通成本上升 （多个平台，多个角色协同老本越来越高）多分支并行减少额定老本 （精益开发的外围扭转是各个需要独立不影响，别离进行测试和集成，放弃骨干的稳固）随时来的提测都能测 （如何更好的应答测试）所以 构建一个从需要到代码开发，再到测试的流程，并将其工具化，自动化就显得十分必要和紧迫，而继续集成就是这一流程的重要模式体现 名词解释精益开发模式，团队基于看板组织合作，以继续地交付需要为指标，需要按优先级，逐渐进入开发、提测。客户端继续集成的难点 如何将研发过程各环节关联起来 要害流动包含 创立需要->创立代码分支->创立打包我的项目->提交代码->打包->提交测试->修复->提交集成->公布 如何做到需要和代码分支关联 确保代码可追溯如何做到做到代码分支和打包我的项目关联，代码变动可主动触发打包如何做到代码范畴和测试范畴关联，确保测试回归范畴多分支并行 如何进行井井有条的进行集成如何做到一提交代码就触发测试，测试进一步左移如何升高自动化测试老本流程化外围流程是 一建设需要分支，交付通道就已建设，直到需要公布。 首先开发依照标准创立需要分支，主动将分支和需要进行绑定，同时创立打包我的项目将需要和打包地址绑定，这样一旦提交代码，就能够依据需要，代码提交内容，给出影响范畴，触动主动打包，每次变更都会触发打包打包胜利后，依据merge，requestpush，定时等不同的触发形式，主动触发相应的测试件，进行一系列的自动化测试测试件执行完后，执行后果会主动反馈，帮助团队可能继续发现问题从而进步集成指令实现第一步后，发现整个流程中，很多是依赖人工操作的，容易出错，影响效率 无人化为了撑持流水线的运行，以无人化，自动化，可扩大为指标，次要分为精益开发流程协同撑持无人化及测试验证自动化两局部 fish CI次要是研发流程撑持，入需要绑定 监听变更 触发打包 触发测试 fish guard次要测试件调度，执行，后果告诉 以及后续测试件扩大 次要测试件包含 UI辨认 UI遍历 Monkey 单元测试 后续减少 动态扫描 扩大本人的自动化测试边界 数据度量如果你无奈度量它，你就无奈改良它指标次要分为响应能力，效率，品质三个维度 总结与布局简略总结下，咱们做得事件，第一步是拉通整个交付过程，有一个稳固的交付过程，第二步保障交付的效率，即响应变快了，集成变快了，品质反馈变快了，第三步继续交付，关键词是“继续地”，频次上提出了更高的要求，集成的频率变高了，以前一个月集成一次，当初每天都能集成，从一个月一次，到nightly build，再到随时集成。即相比以前，让开发同学“更”有信念集成一次变更并公布。自动化工具 appium jenkins

概述不论是原生Android、iOS还是JavaScript，只有是波及手势交互都会有事件的散发解决。和原生Android、iOS的事件散发的步骤和原理一样，Flutter的事件散发总体也由手势触发、拦挡和响应等几个局部形成。Flutter所有事件源头是 hooks.dart文件的_dispatchPointerDataPacket函数，通过拦挡屏幕的点击、滑动等各种事件，进而分发给原生代码进行响应（ps：Android事件散发）。 如果你看过理解原生Android、iOS的事件散发机制，那么Flutter的事件散发，其实是在Android和iOS上加了壳，即Flutter的事件散发是在原生Android、iOS的的事件散发上进行包装的（Android - C - Dart，iOS- C -Dart）。其中，C是Flutter的底层engine，负责Flutter下层和原生Android、iOS零碎的交互。 事件散发到Dart的入口类是GestureBinding类，此类位于gestures/binding.dart文件中，与手势辨认相干的都位于gestures包中，如下图所示。 converter.dart将物理坐标_dispatchPointerDataPacket收到的物理数据PointerDataPacket转换成PointerEvent， 相似于安卓在ViewRootImpl.java将InputEventReceiver收到的InputEvent转换为MotionEvent。recognizer.dart的GestureRecognizer是所有手势辨认的基类。rendering/binding.dart的RendererBinding类关联了render树和Flutter引擎，等价于安卓的Surface。view.dart的RenderView是render树的根节点，等价于安卓的DecorView。Flutter的事件散发基类是GestureBinding，关上GestureBinding类，它的成员函数包含dispatchEvent、handleEvent和hitTes等，次要是从事件队列里依照先入先出形式解决PointerEvent，源码如下。 mixin GestureBinding on BindingBase implements HitTestable, HitTestDispatcher, HitTestTarget { @override void initInstances() { super.initInstances(); _instance = this; ui.window.onPointerDataPacket = _handlePointerDataPacket; }其中，WidgetsFlutterBinding.ensureInitialized()函数的作用就是初始化各个binging。 Flutter 事件散发和Android、iOS相似，Flutter的事件散发的入口在runApp函数，相干的代码如下。 void runApp(Widget app) { WidgetsFlutterBinding.ensureInitialized() ..attachRootWidget(app) ..scheduleWarmUpFrame();}class WidgetsFlutterBinding extends BindingBase with GestureBinding, ServicesBinding, SchedulerBinding, PaintingBinding, SemanticsBinding, RendererBinding, WidgetsBinding { static WidgetsBinding ensureInitialized() { if (WidgetsBinding.instance == null) WidgetsFlutterBinding(); return WidgetsBinding.instance; }} void attachRootWidget(Widget rootWidget) { _renderViewElement = RenderObjectToWidgetAdapter<RenderBox>( container: renderView, debugShortDescription: '[root]', child: rootWidget ).attachToRenderTree(buildOwner, renderViewElement);}WidgetsFlutterBinding.ensureInitialized()函数的作用是初始化各个binging。事实上，Flutter 中的 WidgetsFlutterBinding的 Binding能够分为GestureBinding、ServicesBinding、SchedulerBinding、PaintingBinding、SemanticsBinding、RendererBinding、WidgetsBinding 等 7 种 Binding，它们都有本人在性能上的划分。其中，GestureBinding就是处理事件散发的，attachRootWidget就是设置根节点， 能够看到真正的根节点是renderview， 也是Flutter事件散发的终点。 ...

作者：Łukasz Kosman 和 Jakub Wojtczak原文：https://medium.com/swlh/lessons-learned-after-making-the-first-10-commercial-apps-in-flutter-f420808048cd 在过来的24个月中，咱们破费 17.193,00 个小时应用 Flutter 实现了10个商业应用程序，本文将分享咱们的见解。 浏览本文后，您将学习到： 抉择Flutter的起因是什么？ Flutter对估算和稳定性有什么影响？Flutter筹备好用于企业应用程序了吗？与Xamarin相比，Flutter的体现如何？Flutter适宜哪些项目？ 自2018年7月在LeanCode上开始在Flutter上开发咱们的第一个商业应用程序以来，到当初曾经有两年了，当我第一次理解Flutter时，只管它很有前景，但我依然持狐疑态度，次要是因为咱们最近对Xamarin的投资给咱们带来了负面体验。 因为咱们的团队始终心愿在我的项目中应用一些激动人心的新技术，因而咱们心愿它可能证实它能给客户带来真正的价值。 这是一个农业我的项目，与牧群治理打交道，这是一个十分乏味而且典型的我的项目，管理员应用该零碎来计算对谷仓的需要，而咱们的团队认为，从UX的角度来看，这是一个很好的见解。 在两天内，他们骄傲地展现了概念验证计划，证实了制作动画非常容易，能够为您带来杰出而晦涩的体验。最终，这已演变为残缺比例的动画，您能够在此处看到： 有了这个喜悦，我确信Flutter值得尝试。最后，咱们没有将本人100％投入Flutter，而是与 React Native 我的项目并行进行。在没有Flutter团队官网反对的状况下编写第一个Google Maps实现，对此我感到乐观。您能够在此处理解无关在Flutter中编写第一个商业应用程序的教训以及相干艰难的更多信息。最终，咱们交付的是一个绝对简略的应用程序，少于40个视图，且Flutter开发工夫不到500小时。 自从咱们交付了第一个应用程序并从客户那里收集到了五星级好评，咱们认为，咱们应该开始更加踊跃地向客户举荐Flutter。从2019年5月开始，咱们决定Flutter将是咱们挪动技术的第一抉择。同时，咱们将进行在其余不同框架上开发应用程序的工作。 自那时以来，咱们曾经在Flutter中交付了10多种挪动产品，并提供了数十种MVP / PoC。当初，该得出结论了。 Flutter 更快咱们并未在这里探讨实践办法（在此处能够查找Bran De Connick的论文），只管这也很乏味。起初咱们重写了基于 Xamarin 和 ReactJS 的App，将二者进行比照，在后端应用雷同API的状况下，与Xamarin（667h vs 987h）相比，咱们缩小了33％的工夫，应用ReactJS（486h vs 704h）相比，则缩小了31％的工夫。 停下来思考一下这些数字。这些数据答复了如何更快，更便宜地构建挪动应用程序（应用Flutter）。随着经济不景气，在估算范畴内按时交付产品变得越来越重要。这也意味着对于雷同的估算，您能够多交付50％的订单。设想一下，您是一名产品负责人，负责开发团队的优先事项，可能将估算壁垒进一步提高50％。 这将极大地提高团队的创造力和他们交付的工作品质。无关GastroJob案例的详细分析，请查看咱们在Flutter Europe Conference上的演讲，或在此处查看咱们的案例钻研。 均匀90％的代码在iOS和Android之间共享。咱们的90％的代码不会在两个本机平台上都编写两次。与本地利用程序开发相比，节俭了90％的工夫，并且因为一致性和团队围绕一个指标团结而不是分成两个本地流，因而开释了很多创造力。除了共享业务逻辑和用户体验外，咱们还能够应用大量现成的库，这些库带来了更多的益处。首先，他们能够通过为应用程序内应用的许多不同事物提供罕用逻辑来放慢开发过程（例如与服务器（HTTP客户端）的通信，推送告诉，平安存储，数据库，动画等）。其次，与许多风行的服务（例如Firebase，地图，领取，社交登录，剖析，解体报告服务等）集成起来更加容易。因而，只有在编写特定于平台的自定义代码时，才须要编写两次代码（别离实用于iOS和Android）。然而，即便那样，在Dart和本机代码之间进行桥接还是相当正当的 简略，这将在本文前面进行解释。 更重要的是，如果思考到品质因素，则能够节俭更多，因而从久远来看，该应用程序的保护老本也更低。事实上，咱们钻研在Xamarin，React Native和Flutter构建的所有我的项目中修复bug的工夫，，Flutter通常须要8–10％的修复bug工夫。而 React Native 须要7–14％，Xamarin 须要11–23％。 与UX / UI的单干从未如此之好在Flutter我的项目期间，须要UX / UI设计师和开发人员之间进行单干。可能是因为他们不须要进行这种乏味的本地改编，而使他们的创造力涣散。然而，从React Native团队的教训中也能够冀望失去同样的后果，事实并非如此。当咱们更深刻地开掘时，咱们发现Flutter为可能编写丑陋界面的开发人员带来了纯正的欢畅，以前这些界面会带来额定的累赘，从而减慢了步调。因而，他们更违心单干，并且咱们曾经看到结对编程会议开始于设计师与开发人员携手进行现场实验的过程中。通过几次这样的互动，得益于弱小的主题引擎，团队可能为该应用程序提供一种自适应的设计语言，该语言不仅在Figma或Adobe XD中看起来很棒，而且还提供了最佳的用户体验以及连贯的感觉。正确的设计程序。怎么样 在我的项目的整个生命周期中放弃这种连贯性也很乏味。 以前，当UX / UI设计师在演示会议上审查产品时，他们在我的项目完结时领有大部分评论，在实践经验之后扭转主见或简化事件。 Flutter的独特之处在于，在我的项目完结时，设计师的参加已齐全隐没，因为他们在试验和谬误的设计循环的初期就开始工作。 这也意味着后续sprint的优化破费的工夫更少，并且这种继续的单干体现在下一个发行版的稳固Scrum速度上。 ...

最近开始从小程序转换到写 flutter，要学的货色不少，于是就打算写点文字记录下本人学习 flutter 的过程。 由小程序开发转到 flutter 开发面对的第一个变动就是由面向过程到面向对象的变动。 小程序因为其简略疾速轻便的定位，再加上应用 js 进行开发，其实大量的代码都是面向过程格调的，代码依照思路一步步往下写，并不需要进行大量的封装，代码组织形式上也是依照各个页面写在各个 Page 构造函数里，很天然地进行代码的拆散，很合乎微信对小程序简略疾速易上手的定位。 而在 flutter 这里，开发语言转换成了 Dart，尽管与 js 一样都是合乎 ECMAScript 规范的语言，但 Dart 显然更偏差面向对象一些，而不是如 js 那样函数式与面向对象兼而有之的思路，语言格调不同，写起来天然也不同，所以转到 flutter 开发后最先要补的其实是面向对象开发的一些常识。 学习面向对象的思维比拟好的办法是间接找个 Java 教程去看，因为 Java 是面向对象方面的典型，而且历史悠久，材料泛滥，比拟适宜拿来学习，当然工夫不够大略看看理解思维就行，也不必深究，没那么多工夫耗在外面。

明天和大家分享一下Flutter中集成百度语音辨认Android端的过程，供大家进行参考。 既然是Flutter集成，那首先就要创立一个Flutter我的项目，这个就不认真讲了，能够参考Flutter中文的创立我的项目流程 @[toc] 一、百度语音官网注册利用信息1.注册百度账号首先注册登陆百度AI开发平台-语音辨认，关上控制台找到并点击”语音技术“一栏 2.创立注册利用信息填写利用名称(名称随便)，类别随便，抉择Android并填写Android包名，点击创立利用就创立实现了。 3.查看利用信息点击第1步中的治理利用，能够看到你创立的所有利用列表，能够看到创立利用的AppID，API Key, Secret Key等信息，这些都须要在我的项目进行配置的。 4.下载SDK百度语音辨认SDK 二、创立一个我的项目的Library1.应用Android Studio关上我的项目Android文件2.创立Library, File->New Module->抉择Android Library，填写name(asr_plugin) 3.增加语音辨认sdk在asr_plugin中创立一个libs文件夹，复制(解压下载的百度语音辨认sdk文件/core/libs/*.jar)到刚创立的libs下 4.增加so文件复制(解压sdk文件/core/main/jniLibs)复制到asr_plugin/src/main下，删除上面的armeabi,(因为Flutter没有armeabi的so),删除应用不到的库文件,保留如下图中文件即可 5.AndroidManifest.xml配置权限及我的项目的APPID，API_KEY以及Secret_Key 6.在我的项目Android/app目录下的build.grade文件中增加插件依赖 三.Android实现百度语音的辨认性能1.Library中实现百度辨认性能 2.library的build.gradle中增加flutter依赖def localProperties = new Properties()def localPropertiesFile = rootProject.file('local.properties')if (localPropertiesFile.exists()) { localPropertiesFile.withReader('UTF-8') { reader -> localProperties.load(reader) }}def flutterRoot = localProperties.getProperty('flutter.sdk')apply plugin: 'com.android.library'apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"flutter { source '../..'}3.我的项目app/build.gradle中增加如下代码，确保app与library中增加flutter.so 不抵触defaultConfig中增加ndk{ abiFilters "arm64-v7a","arm64-v8a","x86_64","x86" }//百度语音集成增加 packagingOptions { // 确保app与asr_plugin都依赖的libflutter.so merge时不抵触@https://github.com/card-io/card.io-Android-SDK/issues/186#issuecomment-427552552 pickFirst 'lib/x86_64/libflutter.so' pickFirst 'lib/x86/libflutter.so' pickFirst 'lib/arm64-v8a/libflutter.so' pickFirst 'lib/arm64-v8a/libapp.so' pickFirst 'lib/armeabi-v7a/libapp.so' }在我的项目的MainActivity中进行注册 ...

应用 Flutter 实现挪动端 App 我的项目开发后，首次打包的步骤稍感简单，但相熟后也可驾轻就熟。经总结整个过程可分为四个步骤，即：创立 jks 密匙库丨增加 properties 并指定 jks丨更新 gradle 并指定 properties丨执行 apk 生成命令 本文将逐渐演示如何四步生成 Android apk，并附加过程中可能遇到的问题及解决方案，若您有遇到其它相干问题，十分欢送在评论中留言，我和其余读者小伙伴们将帮忙解决并继续更新至此文，达到帮忙更多人的目标。若感本文对您有所帮忙请点个赞吧！ 第一步：创立 jks 密匙库在 Studio Terminal 对话框内输出 keytool 命令，其中 -keystore E:/key.jks 示意存储地位，-validity 10000 示意有效期单位是【天】，-alias key 示意别名。确认无误后回车 `keytool -genkey -v -keystore E:/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key` 填写明码及其它所需的详细信息后，须要确认填写信息，输出字母 y 示意【确定】，输出 n 则会要求从新填写所有信息。之后回车 `输出密钥库口令:（设置明码）再次输出新口令:（反复明码）您的名字与姓氏是什么? [Unknown]: xxx您的组织单位名称是什么? [Unknown]: xxx您的组织名称是什么? [Unknown]: xxx您所在的城市或区域名称是什么? [Unknown]: xxx您所在的省/市/自治区名称是什么? [Unknown]: xxx该单位的双字母国家/地区代码是什么? [Unknown]: chinaCN=xxx, OU=xxx, O=xxx, L=xxx, ST=xxx, C=china是否正确? [否]: y` 生成实现后找到相应本地目录可获取 .jks 文件 ...

作者｜严嘉俊Flutter 是 Google 公布的一个用于创立跨平台、高性能挪动利用的框架。随着 Google 在 IO19 发表 Flutter 反对 Web 平台，就标记着 Flutter 曾经全面持所有平台。 Flutter 提供了十分敌对的文档，开发过程中遇到的问题都能够在 Stackoverflow 或其 github issue 中找到答案，帮忙各端的同学迅速地进入到 Flutter 中。同时它的齐全开源也让其有了更快的迭代，更好的生态。 依据谷歌官网 2020 年 4 月的统计数据，Flutter 自公布以来的 16 个月内，已有 200 万开发者应用 Flutter，3 月份的时候也有 10% 的增长，Google Play Store 中公布的 Flutter 利用约有 5 万个，仅在 2020 年 4 月就有近 1 万个利用上传。开发者所在的团队，初创公司最多，占比 35%，其次是企业开发者，占比 26% 。 ???? 来自谷歌开发者《Flutter 势头正盛 | 2020 秋季速递》 通晓云正式反对 Flutter，同样也标记着通晓云曾经全面反对所有平台了。开发者通过应用通晓云 Flutter SDK ，能够在 Flutter 中操作存储在通晓云中的数据表、内容库、媒体文件，以及调用云函数进行后端逻辑的执行，节俭了搭建服务器、数据库，域名备案，数据接口实现等繁琐流程，开发利用门槛更低、效率更高。 当初，咱们将联合通晓云 Flutter SDK 来实战做一个 Todo App，看看有多不便多快捷。 ...

背景为什么说Flutter万物皆Widget？首先你要晓得，Flutter是什么，它是一个古代的响应式框架、一个2D渲染引擎、现成的widget和开发工具，基于Skia，一个性能彪悍的2D图像绘制引擎，2005年被Google收买，被广泛应用于Chrome和Android之上，等等吧，说白一点，Flutter就是一个UI框架，所以说，万物皆Widget，而Widget的中文意思是小部件，它为什么不能像Android或者Ios一样叫做View呢？因为widget既能够是一个构造元素（如按钮或菜单）、也能够是一个文本款式元素（如字体或色彩计划）、布局的一个方面（如填充）等等，咱们能够兼顾它们为wiget，而不是view，依据根本的命名标准，这就是一种正当的命名形象。那么接下来咱们学什么？ Widget是什么Widget类构造跟着我实现一个widget（间接继承widget抽象类）Element类构造深刻了解ElementWidget是什么其实下面说了，所有皆Widget，那咱们可不可以认为，在flutter的框架中，用到的货色都是Widget呢，当然不是哈，因为它是基于Dart，所以有很多Dart的库，还是能够应用的，比方AES，RSA加密解密，Json序列化等等，但你能够这么说，所有构建图形相干的货色都是Widget，这就是Widget Widget类构造为什么说下类构造呢？类构造能够很清晰帮忙咱们梳理逻辑，从全局的角度对待整个构造 RenderObjectWidget 看名字咱们判断，它是持有RenderObject对象的Widget，而通过其余通道理解到，RenderObject实际上是实现界面的布局、测量与绘制,像Padding，Table，Align都是它的子类StatefulWidget 多了一个State状态的Widget，子类都是能够动静扭转的如CheckBox，SwitchStatelessWidget 就是一个一般的Widget,不可变如Icon，Text。ProxyWidget InheritedWidget就是它的子类，咱们暂且认为它是子类能从父类拿数据的要害，当前再钻研，大多数的主题都是继承自ProxyWidget跟我一起实现一个Widget我不想和他人的教程思路一样，既然万物皆Widget，那咱们就从实现一个Widget开始，而后一步步深刻，看到什么就去理解什么？来上代码 class TestWidget extends Widget{ @override Element createElement() { // TODO: implement createElement throw UnimplementedError(); }}创立一个TestWidget而后继承Widget，而后会让你重写函数createElement，返回一个Element，通过这个咱们看的出，其实咱们创立的Widget，最终必定是创立了一个Element，那Element到底是什么呢？同样的思路，咱们继承Element看一下 class TestElement extends Element{ TestElement(Widget widget) : super(widget); @override bool get debugDoingBuild => throw UnimplementedError(); @override void performRebuild() { }}多了一个构造函数，传递Widget对象，get函数debugDoingBuild，还有performRebuild函数，都是干嘛的呢？ abstract class Element extends DiagnosticableTree implements BuildContext abstract class BuildContext { /// Whether the [widget] is currently updating the widget or render tree. /// /// For [StatefulWidget]s and [StatelessWidget]s this flag is true while /// their respective build methods are executing. /// [RenderObjectWidget]s set this to true while creating or configuring their /// associated [RenderObject]s. /// Other [Widget] types may set this to true for conceptually similar phases /// of their lifecycle. /// /// When this is true, it is safe for [widget] to establish a dependency to an /// [InheritedWidget] by calling [dependOnInheritedElement] or /// [dependOnInheritedWidgetOfExactType]. /// /// Accessing this flag in release mode is not valid. bool get debugDoingBuild; 通过代码的跟踪咱们发现一些注解： ...

老孟导读：Flutter 中获取文件门路，咱们都晓得应用 path_provider，但对其目录对含意不是很分明，此文介绍 Android、iOS 零碎的文件目录，不同场景下倡议应用的目录。不同的平台对应的文件系统是不同的，比方文件门路，因而 Flutter 中获取文件门路须要原生反对，原生端通过 MethodChannel 传递文件门路到 Flutter，如果没有非凡的需要，举荐大家应用 Google 官网保护的插件 path_provider。 pub 地址：https://pub.flutter-io.cn/packages/path_providerGithub 地址：https://github.com/flutter/plugins/tree/master/packages/path_provider/path_provider 增加依赖在我的项目的 pubspec.yaml 文件中增加依赖： dependencies: path_provider: ^1.6.14执行命令： flutter pub get文件门路path_provider（版本：1.6.14）提供了8个办法获取不同的文件门路，目前 Flutter（Flutter 1.20.1 • channel stable ）只公布了正式版本的 Android 和 iOS，因而上面仅介绍 Android 和 iOS 平台的文件门路。 getTemporaryDirectory长期目录，实用于下载的缓存文件，此目录随时能够革除，此目录为应用程序公有目录，其余应用程序无法访问此目录。 Android 上对应getCacheDir。 iOS上对应NSCachesDirectory。 getApplicationSupportDirectory应用程序能够在其中搁置应用程序反对文件的目录的门路。 将此文件用于您不想向用户公开的文件。 您的利用不应将此目录用于寄存用户数据文件。 在iOS上，对应NSApplicationSupportDirectory ，如果此目录不存在，则会主动创立。在Android上，对应getFilesDir。 getLibraryDirectory应用程序能够在其中存储持久性文件，备份文件以及对用户不可见的文件的目录门路，例如storage.sqlite.db。 在Android上，此函数抛出[UnsupportedError]异样，没有等效项门路存在。 getApplicationDocumentsDirectory应用程序可能在其中搁置用户生成的数据或应用程序无奈从新创立的数据的目录门路。 在iOS上，对应NSDocumentDirectory API。 如果数据不是用户生成的，思考应用[getApplicationSupportDirectory]。 在Android上，对应getDataDirectory API。 如果要让用户看到数据，请思考改用[getExternalStorageDirectory]。 getExternalStorageDirectory应用程序能够拜访顶级存储的目录的门路。因为此性能仅在Android上可用，因而应在收回此函数调用之前确定以后操作系统。 在iOS上，此性能会引发[UnsupportedError]异样，因为无奈在应用程序的沙箱内部拜访。 在Android上，对应getExternalFilesDir（null）。 getExternalCacheDirectories存储特定于应用程序的内部缓存数据的目录的门路。 这些门路通常位于内部存储（如独自的分区或SD卡）上。 电话可能具备多个可用的存储目录。因为此性能仅在Android上可用，因而应在收回此函数调用之前确定以后操作系统。在iOS上，此性能会抛出UnsupportedError，因为这是不可能的在应用程序的沙箱内部拜访。 在Android上，对应Context.getExternalCacheDirs（）或API Level 低于19的Context.getExternalCacheDir（）。 ...

老孟导读：很多时候咱们须要监听路由堆栈的变动，这样能够自定义路由堆栈、不便剖析异样日志等。监听路由堆栈的变动应用 RouteObserver ，首先在 MaterialApp 组件中增加 navigatorObservers： void main() { runApp(MyApp());}RouteObserver<PageRoute> routeObserver = RouteObserver<PageRoute>();class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( ... navigatorObservers: [routeObserver], home: HomePage(), ); }}监听页面设置如下： class ARouteObserverDemo extends StatefulWidget { @override _RouteObserverDemoState createState() => _RouteObserverDemoState();}class _RouteObserverDemoState extends State<ARouteObserverDemo> with RouteAware { @override void didChangeDependencies() { super.didChangeDependencies(); routeObserver.subscribe(this, ModalRoute.of(context)); } @override Widget build(BuildContext context) { return Scaffold( body: Container( alignment: Alignment.center, child: RaisedButton( child: Text('A RouteObserver'), onPressed: () { Navigator.of(context).pushNamed('/BRouteObserver'); }, ), ), ); } @override void dispose() { super.dispose(); routeObserver.unsubscribe(this); } @override void didPush() { final route = ModalRoute.of(context).settings.name; print('A-didPush route: $route'); } @override void didPopNext() { final route = ModalRoute.of(context).settings.name; print('A-didPopNext route: $route'); } @override void didPushNext() { final route = ModalRoute.of(context).settings.name; print('A-didPushNext route: $route'); } @override void didPop() { final route = ModalRoute.of(context).settings.name; print('A-didPop route: $route'); }}其中 didPush、didPushNext、didPopNext、didPop 为路由堆栈变动的回调。 ...

书接上文，来到了目录第二层，为了能更加直观酷炫地展现课程目录，应用了 carousel_slider 插件，但光应用此插件仍然感觉枯燥，所以想实现一个滑动过程中背景跟着漫游的性能(ps：不知此说法是否谨严)，如下所示都怪笔者比拟愚蠢，思路不对，记录思路以示本人：1.一想能够动静设置 image 的 alignment，后果是没有动画成果，而是卡顿着变动2.二想这是动画成果,是不是应该应用 AnimatedContainer ，盘了一天没盘进去3.三想这个动作不就是滑动图片吗，茅塞顿开 连忙应用 GestureDetector，无奈怎么播弄， onHorizontalDragUpdate 函数始终无奈跑进去，茅只能再度塞4.四想 应用绝对底层的 Listener ，尽管 onPointerMove 能够跑进去，无奈自己满腹经纶，拿不出一个 size 转 Alignment 而且让他们平滑静止的方程，最终放弃5.最终章五想，原来 插件 carousel_slider 中有个属性 onScrolled ????，此时除了想给本人面门来几下之外，仍然没忘码码 1.写 onScrolled 调用的函数 void callbackFunction(double covariant) { double step = covariant / this.courseList.length; setState(() { this.alignment = Alignment.lerp(Alignment.centerLeft, Alignment.centerRight, step); });}2.onScrolled调用 CarouselSlider( options: CarouselOptions( autoPlay: false, enlargeCenterPage: true, enableInfiniteScroll: false, viewportFraction: 0.61, initialPage: 0, onScrolled: callbackFunction, height: double.infinity), items: courseList.map((item) { return this.courseItem(item); }).toList(),)

前言：人生无奈????，生生把我这个做java 的逼成了全栈????，最近的一个教育app，本着想要多简略就做多简略的准则，和我搭档的前端帅小哥做了个究极半成品进去????，就我这暴脾气，默默地开始了优化，首先就从倒计时开始。前端帅小哥用的是 circular_countdown 来做倒计时 看起来貌似也还行哦，然而可能是我先入为主的缘故，因为之前看过一个相似的app，是进度条式的倒计时，所以感觉这个很难看，而后再面对着单色调的app界面，帅小哥那种搪塞跃然app上。查了一圈，我也没发现进度条式的flutter插件，只能通过 flutter_animation_progress_bar 来实现了（小弟很弱鸡，大牛轻点喷） 引入 flutter_animation_progress_bar 插件dependencies: flutter_animation_progress_bar: ^1.0.52.封装一个进度条倒计时 int _countdownNum = 0;Widget countDown() { return Align( alignment: Alignment.bottomCenter, child: Container( child: FAProgressBar( currentValue: _countdownNum, maxValue: 59, displayText: '秒', backgroundColor: Color(0xff2ec987), ), ), );}3.调用 countDown() @overrideWidget build(BuildContext context) { return Scaffold( backgroundColor: Colors.black, body: Container( decoration: BoxDecoration( image: DecorationImage( image: AssetImage("images/背景图3.jpg"), fit: BoxFit.cover, ), ), child: Scrollbar( child: Container( child: Stack( children: <Widget>[ Container( margin: EdgeInsets.fromLTRB(50, 0, 50, 90), child: FutureBuilder( future: _futureBuilderFuture, builder: _buildFuture, ), ), this.countDown() ], ), ))));}4.封装倒更新工夫函数 ...

如果您心愿能有一种简略、高效且灵便的形式把 TensorFlow 模型集成到 Flutter 利用里，那请您肯定不要错过咱们明天介绍的这个全新插件 tflite_flutter。这个插件的开发者是 Google Summer of Code(GSoC) 的一名实习生 Amish Garg，本文来自他在 Medium 上的一篇文章《在 Flutter 中应用 TensorFlow Lite 插件实现文字分类》。 tflite_flutter 插件的外围个性： 它提供了与 TFLite Java 和 Swift API 类似的 Dart API，所以其灵活性和在这些平台上的成果是齐全一样的通过 dart:ffi 间接与 TensorFlow Lite C API 相绑定，所以它比其它平台集成形式更加高效。*无需编写特定平台的代码。 通过 NNAPI 提供减速反对，在 Android 上应用 GPU Delegate，在 iOS 上应用 Metal Delegate。本文中，咱们将应用 tflite_flutter 构建一个 文字分类 Flutter 利用 带您体验 tflite_flutter 插件，首先从新建一个 Flutter 我的项目 text_classification_app 开始。 初始化配置Linux 和 Mac 用户将 install.sh 拷贝到您利用的根目录，而后在根目录执行 sh install.sh，本例中就是目录 text_classification_app/。 ...

老孟导读：Flutter中路由是十分重要的局部，任何一个应用程序都离不开路由治理，此文解说路由相干办法的应用和路由堆栈的变动。Flutter 路由治理中有两个十分重要的概念： Route：路由是应用程序页面的形象，对应 Android 中 Activity 和 iOS 中的 ViewController，由 Navigator 治理。Navigator：Navigator 是一个组件，治理和保护一个基于堆栈的历史记录，通过 push 和 pop 进行页面的跳转。push 和 pop假如当初有2个页面 A 和 B，A中有一个按钮，点击跳转到 B 页面，A 页面代码： class APage extends StatelessWidget { @override Widget build(BuildContext context) { return Container( alignment: Alignment.center, child: RaisedButton( child: Text('A 页面'), onPressed: () { Navigator.of(context).push(MaterialPageRoute(builder: (context) { return BPage(); })); }, ), ); }}B 页面代码： class BPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Container( alignment: Alignment.center, child: RaisedButton( child: Text('B 页面'), onPressed: () { }, ), ), ); }} ...

在 flutter 中，如果须要加载资源的话，须要在 pubspec.yaml 指定 APP 所须要的资源。 这样的话，指定的每个 Asset （资源）都会被打包在 APP 中，并且在 APP 运行时能够拜访到这些资源。 最常见的 Asset 类型就是图片，指定图片资源后即能够在 APP 页面应用图片控件加载资源了。 # pubspec.yamlflutter: assets: - assets/images/logo.png// lib/main.dartImage.asset('assets/images/logo.png')应用 rootBundle 对象拜访资源APP 能够通过引入 services 包应用 rootBundle 对象来拜访资源。 import 'package:flutter/services.dart';比方拜访文件 test.txt，txt 文件内容是 测试文字，能够应用 rootBundle 对象的 loadString 办法。 当然，前提也是须要在 pubspec.yaml 中指定资源能力拜访的到。 rootBundle.loadString('assets/txt/test.txt').then((data){ print(data);});// 测试文字因为 loadString() 返回的是 Future<String>，所以须要用 then() 承受返回的 String 类型的数据。Future 相似于 ES6 中的 Promise，当异步工作执行实现后会把后果返回给 then()。 应用 FutureBuilder 控件配合加载资源FutureBuilder 控件能够依据 Future （异步）工作的进度进行不同的解决。 FutureBuilder 有三个子属性，别离是： ...

背景从Flutter公布beta版本就始终在关注Flutter、很多大厂也都在应用Flutter比方字节跳动今日头条、西瓜视频、阿里爸爸的闲鱼、毒APP，包含咱们公司(一个卖菜的公司)也在局部非主流程页面应用Flutter。都说Flutter极其晦涩丑陋，本着再不学习就老了的心态，于是筹备抽些空闲工夫来尝试下Flutter。最近小端午放假APP的几个页面也搭建的差不多了，本着人人为我、我为人人的精力决定写个blog给大家分享一下。 为什么仿JD APP？因为像JD这种电商APP无论是业务逻辑还是页面复杂度都是比较复杂的，一来能够体验一下Flutter在简单页面晦涩度的体现，二来也能够看下到底Flutter是否能真正投入生产环境中。 首页 性能计划搜寻滚动吸顶SliverAppBar + FlexibleSpaceBarBanner轮播flutter_swiper 货架PageView+GridView 举荐列表flutter_swiper 分类 性能计划bannerflutter_swipper扫一扫barcode_scan购物车 性能计划商品抉择 倒计时Timer.periodic 商品数量增减自定义组件 我的 性能计划header滚动突变监听滚动地位设置Appbar opacity 其它页面成果还原商详I love China, love huawei 性能计划备注header滚动突变 无商品轮播图flutter_swiper无地址抉择city_pickers无规格抉择showCupertinoModalPopup无商品详情图webview_flutterTODO Android 超过5500高度会黑屏解体 须要期待网页加载完结获取网页高度后从新设置webview高度否则会内存溢出设置 注册登录 性能计划备注登录注册leancloud注册登录图省事，整了一个页面（点注册按钮即应用以后输出的用户名明码注册）账密账号 admin 明码 admin无GIT仓库地址APP端： https://github.com/DiscoverForever/learn_flutterServer端： https://github.com/DiscoverForever/flutter_mock_server????欢送PR 感觉不错的能够给个star✨我的项目目录构造 # 我的项目应用第三方库一览 name: learn_flutterdescription: A new Flutter project.version: 1.0.0+1environment: sdk: ">=2.2.2 <3.0.0"dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.2 # 轮播插件 flutter_swiper: ^1.1.6 # toast fluttertoast: ^4.0.1 # 网络申请 dio: ^3.0.8 # webview # flutter_webview_plugin: ^0.3.5 # webview webview_flutter: ^0.3.19 json_annotation: ^3.0.0 # 城市选择器 city_pickers: ^0.1.30 # 扫描插件 barcode_scan: ^2.0.1 # Leancloud leancloud_storage: ^0.2.3 # 官网缓存插件 shared_preferences: ^0.5.6 # provide provide: ^1.0.2dev_dependencies: flutter_test: sdk: flutter # json generator build_runner: ^1.0.0 json_serializable: ^3.3.0 uses-material-design: true assets: - lib/assets/json/movie.json fonts: - family: FlamanteRoma fonts: - asset: lib/assets/fonts/Flamante-Roma-Medium.ttf - asset: lib/assets/fonts/Flamante-Roma-MediumItalic.ttf - family: LatoBold fonts: - asset: lib/assets/fonts/Lato-Bold.ttf - family: PingFang fonts: - asset: lib/assets/fonts/PingFang.ttf免责申明⚠️本APP仅限于学习交换应用，我的项目中应用的图片及字体等资源如有侵权请分割作者删除 ...

老孟导读：明天介绍下Flutter中的菜单性能。PopupMenuButton应用PopupMenuButton，点击时弹出菜单，用法如下： PopupMenuButton<String>( itemBuilder: (context) { return <PopupMenuEntry<String>>[ PopupMenuItem<String>( value: '语文', child: Text('语文'), ), PopupMenuItem<String>( value: '数学', child: Text('数学'), ), PopupMenuItem<String>( value: '英语', child: Text('英语'), ), PopupMenuItem<String>( value: '生物', child: Text('生物'), ), PopupMenuItem<String>( value: '化学', child: Text('化学'), ), ]; },)成果如下： 设置其初始值： PopupMenuButton<String>( initialValue: '语文', ...)设置初始值后，关上菜单后，设置的值将会高亮，成果如下： 获取用户抉择了某一项的值，或者用户未选中，代码如下： PopupMenuButton<String>( onSelected: (value){ print('$value'); }, onCanceled: (){ print('onCanceled'); }, ...)tooltip是长按时弹出的提醒，用法如下： PopupMenuButton<String>( tooltip: 'PopupMenuButton', ...)成果如下： 设置其暗影值、内边距和弹出菜单的背景色彩： PopupMenuButton<String>( elevation: 5, padding: EdgeInsets.all(5), color: Colors.red, ...)默认状况下，PopupMenuButton显示3个小圆点，咱们也能够对齐进行设置，设置文字如下： ...

老孟导读：Flutter中很多组件都有一个叫做shape的属性，类型是ShapeBorder，比方Button类、Card等组件，shape示意控件的形态，零碎曾经为咱们提供了很多形态，对于没有此属性的组件，能够应用 Clip 类组件进行裁减。BeveledRectangleBorder斜角矩形边框，用法如下： RaisedButton( shape: BeveledRectangleBorder( side: BorderSide(width: 1, color: Colors.red), borderRadius: BorderRadius.circular(10)), child: Text('老孟'), onPressed: () {},) 如果设置的半径比控件还大，就会变成菱形： 3RaisedButton( shape: BeveledRectangleBorder( side: BorderSide(width: 1, color: Colors.red), borderRadius: BorderRadius.circular(100)), child: Text('老孟'), onPressed: () {},) 同理，如果半径设置为0，就是矩形。 RaisedButton( shape: BeveledRectangleBorder( side: BorderSide(width: 1, color: Colors.red), borderRadius: BorderRadius.circular(0)), child: Text('老孟'), onPressed: () {},) BorderBorder容许独自设置每一个边上的线条款式. RaisedButton( shape: Border( top: BorderSide(color: Colors.red,width: 2) ), child: Text('老孟'), onPressed: () {},) ...

老孟导读：Flutter 1.20 更新了 Slider、RangeSlider、日期选择器组件、工夫选择器组件的款式，新增了替换组件：InteractiveViewer，上面具体介绍其用法。滑块Flutter 1.20 版本将 Slider 和 RangeSlider 小部件更新为最新的 Material 准则。新的滑块在设计时思考到了更好的可拜访性：轨道更高，滑块带有暗影，并且值指示器具备新的形态和改良的文本缩放反对。 Slider根底用法： class SliderDemo extends StatefulWidget { @override _SliderDemoState createState() => _SliderDemoState();}class _SliderDemoState extends State<SliderDemo> { double _sliderValue = 0; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(), body: Center( child: Column( mainAxisSize: MainAxisSize.min, children: [ Text('值：$_sliderValue'), Slider( value: _sliderValue, onChanged: (v){ setState(() { _sliderValue = v; }); }, ) ], ), ), ); }}value：以后值。onChanged：滑块值扭转时回调。 ...

简介： 近两年Flutter的热度一直晋升，无论在阿里还是内部公司，参加Flutter生态建设的人越来越多。Flutter作为跨端的UI框架，将来也有很大的可能像Rax一样作为团体内营销流动页面搭建的DSL。所以目前学习Flutter，参加Flutter生态建设是一件时尚且有价值的事件。 Flutter是什么Flutter是谷歌的挪动UI框架，能够疾速在iOS和Android上构建高质量的原生用户界面。Flutter能够与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织应用，并且Flutter是完全免费、开源的。简略来说，Flutter是一款挪动应用程序SDK，蕴含框架、控件和一些工具，能够用一套代码同时构建Android和iOS利用，并且性能能够达到原生利用一样的性能。Flutter简介 配置开发环境Flutter开发能够在macOS，Linux或Windows上实现。尽管您能够在Flutter工具链中应用任何编辑器，但IntelliJ IDEA，Android Studio和Visual Studio Code的IDE插件能够简化开发工作。 下载flutter SDK。地址将flutter的bin目录增加到path中。执行flutter doctor命令，他会装置flutter框架，包含dart，而且提醒你任何其余须要装置的依赖。装置其余依赖。在IDE中装置flutter插件。体验▐ Android Studio (为Flutter提供残缺的IDE体验) 创立利用 抉择 File>New Flutter Project抉择 Flutter application 作为 project 类型, 而后点击 Next输出项目名称 (如 myapp), 而后点击 Next点击 Finish期待Android Studio装置SDK并创立我的项目. 在我的项目目录中，您应用程序的代码位于 lib/main.dart.运行应用程序 定位到Android Studio 工具栏: 在 target selector 中, 抉择一个运行该利用的Android设施. 如果没有列出可用，请抉择 Tools>Android>AVD Manager 并在那里创立一个在工具栏中点击 Run图标, 或者调用菜单项 Run > Run.▐ VS Code(轻量级编辑器，反对Flutter运行和调试) 创立利用 启动 VS Code.调用 View>Command Palette…输出 ‘flutter’, 而后抉择 ‘Flutter: New Project’ action输出 Project 名称 (如myapp), 而后按回车键指定搁置我的项目的地位，而后按蓝色的确定按钮期待我的项目创立持续，并显示main.dart文件 在我的项目目录中，您应用程序的代码位于 lib/main.dart.运行应用程序 ...