老孟Flutter

先看下整体效果依赖在 pubspec.yaml 中依赖ele_progress:^version最新版本号在 pub 中查看：ele_progress 地址：https://pub.dev/packages/ele_progress导入import 'package:ele_progress/ele_progress.dart';主题全局设置 ele_progress 的样式需要使用 EleTheme，代码如下：@overrideWidget build(BuildCo

老孟导读：昨天期待已久的 Flutter 2.0 终于发布了，Web 端终于提正了，春季期间我发布的一篇文章，其中的一个预测就是 Web 正式发布，已经实现了，还有一个预测是：2021年将是 Flutter 大跃进的一年，等今年你年底总结的时候，让我们在来验证下这个预测是否应验。后面几天会陆续发布 Flutter 2.0 更新更加详细的内容更新，敬请关注。下面就让我们看看 Flutter 2.0 都有哪些重磅更新，原文链接：https://developers.googleblog.com/2021..

老孟导读：这是官方公布的2021年路线图，向我们展示了2021年 Flutter 的主要工作及计划。原文地址：https://github.com/flutter/flutter/wiki/Roadmap。Null safetyFlutter 将支持 Dart 的 sound null safety（空安全），并将插件和软件包生态系统的迁移扩展到支持空安全，包括Flutter团队直接维护的软件包和插件。在此过程中，Flutter 团队计划提供迁移工具，示例和文档，以帮助迁移现有代码。Null.

2020年是我经历的最不平凡的一年，这一年有遗憾、有收获，有感概，也有庆幸，庆幸自己还活着。用一句话总结自己的2020，忙并收获着，累并快乐着。《Flutter 实战入门》《Flutter 实战入门》是我第一本出版的书籍，今年6月上线。此书耗费了极大的精力，当然对自己的提高也是非常大的。此书上架2个月后，由于对 Flutter 的了解更加深入了，觉得其中有很多写的不是很好的地方，于是开始了重写之路，目前整个系列已经重写完成，共16个章节。全部分享到了个人博客：http://laomengit..

老孟导读：【Flutter实战】系列文章地址：http://laomengit.com/guide/introduction/mobile_system.html默认情况下，Flutter 的滚动组件（比如 ListView）没有显示滚动条，使用 Scrollbar 显示滚动条：Scrollbar( child: ListView.builder( reverse: false, itemBuilder: (BuildContext context, int index) {..

Flutter 未来发展提到 Flutter 就不得不提到 Fuchsia 系统，这是一个尚未正式发布的操作的系统，引用 Android 和 Chrome 的高级副总裁 Hiroshi Lockheimer 在一档播客节目中对 Fuchsia 的介绍是：不仅仅是手机和个人电脑，在物联网的世界里，越来越多的设备需要操作系统、新的软件运行环境等支持。我认为，在具有不同优势和专业化的诸多操作系统中还存在很大的发展空间。Fuchsia 就是其中之一，所以，请继续保持关注。是的，Fuchsia 系统是为物.

老孟导读：Flutter中有这么一类组件，用于定位、装饰、控制子组件，比如 Container (定位、装饰)、Expanded (扩展)、SizedBox (固定尺寸)、AspectRatio (宽高比)、FractionallySizedBox (占父组件比例)。这些组件的使用频率非常高，下面一一介绍，最后给出项目中实际案例熟悉其用法。【Flutter实战】系列文章地址：http://laomengit.com/guide/introduction/mobile_system.htmlCont..

老孟导读：Flutter中布局组件有水平 / 垂直布局组件（ Row 和 Column ）、叠加布局组件（ Stack 和 IndexedStack ）、流式布局组件（ Wrap ）和 自定义布局组件（Flow）。水平、垂直布局组件Row 是将子组件以水平方式布局的组件， Column 是将子组件以垂直方式布局的组件。项目中 90% 的页面布局都可以通过 Row 和 Column 来实现。将3个组件水平排列：Row( children: <Widget>[ Contai..

老孟导读：大家好，这是【Flutter实战】系列文章的第三篇，这一篇讲解图片组件，Image有很多高级用法，希望对您有所帮助。图片组件是Flutter基础组件之一，和文本组件一样必不可少。图片组件包含Image和Icon两个组件，本质上Icon不属于图片组件，但其外形效果上类似于图片。在项目中建议优先使用Icon组件，Icon本质上是一种字体，只不过显示的不是文字，而是图标，而Image组件先通过图片解码器将图片解码，所以Icon有如下优点：通常情况下，图标比图片体积更小，显著的减少App包体..

老孟导读：大家好，这是【Flutter实战】系列文章的第二篇，这一篇讲解文本组件，文本组件包括文本展示组件（Text和RichText）和文本输入组件（TextField），基础用法和五个案例助你快速掌握。第一篇链接：【Flutter实战】移动技术发展史TextText是显示文本的组件，最常用的组件，没有之一。基本用法如下：Text('老孟')注意：Text组件一定要包裹在Scaffold组件下，否则效果如下：文本的样式在style中设置，类型为TextStyle，Te..

老孟导读：大家好，这是【Flutter实战】系列文章的第一篇，这并不是一篇Flutter技术文章，而是介绍智能手机操作系统、跨平台技术的演进以及我对各种跨平台技术看法的文章。智能手机操作系统塞班（Symbian）系统后浪们可能都没有听说过塞班系统，而很多前浪们也会诧异，塞班是智能手机操作系统吗？让我们先来看下智能手机的定义：智能手机，是指像个人电脑一样，具有独立的操作系统，独立的运行空间，可以由用户自行安装软件、游戏、导航等第三方服务商提供的程序，并可以通过移动通讯网络来实现无线网络接入的...

老孟导读：CustomPaint可以称之为动画鼻祖，它可以实现任何酷炫的动画和效果。CustomPaint本身没有动画属性，仅仅是绘制属性，一般情况下，CustomPaint会和动画控制配合使用，达到理想的效果。基本用法CustomPaint的用法非常简单，如下：CustomPaint( painter: MyCustomPainter(),)MyCustomPainter定义如下：class MyCustomPainter extends CustomPainter { @ove..

老孟导读：Navigator组件使用的频率不是很高，但在一些场景下非常适用，比如局部表单多页填写、底部导航一直存在，每个tab各自导航场景。Navigator 是管理路由的控件，通常情况下直接使用Navigator.of(context)的方法来跳转页面，之所以可以直接使用Navigator.of(context)是因为在WidgetsApp中使用了此控件，应用程序的根控件通常是MaterialApp，MaterialApp包含WidgetsApp，所以可以直接使用Navigator的相关属性。N..

老孟导读：今天分享一个类似“孔雀开屏”的动画效果，打开新的页面时，新的页面从屏幕右上角以圆形逐渐打开到全屏。先来看下具体的效果不知道这种效果大家叫什么名字？如果有更合适的名字可以在评论处告诉我，下面来说下如何实现此效果。在使用Navigator进入一个新的页面时，通常用法如下：Navigator.of(context).push(MaterialPageRoute( builder: (context){ return PageB(); }));MaterialPageR..

老孟导读：今天分享一下如何实现掘金点赞效果，这不仅仅是一篇技术文章，还是一篇解决问题思路的文章，遇到一个需求时，如何拆分需求，然后一步一步实现，这个过程比单纯的技术（此文）更有含金量。先来看一下掘金点赞的效果：说点题外话，感谢一下二哥（沉默王二 ），给了我很多建议和帮助，公众号搜索沉默王二即可关注。遇到组合动画效果时，首先拆分一下这个动画，以掘金点赞效果为例，共分为3个动画效果：小手图标改变颜色并且缩放一下。圆环由粗变细，透明度逐渐变为0。最外圈小点点透明度逐渐变为0。拆分好了之后..

老孟导读：一个月前分享的《超过百万的StackOverflow Flutter 问题-第一期》受到很多朋友的喜欢，非常感谢大家的支持，在文章末尾有第一期的链接，希望此文能对你有所帮助。No connected devices这个问题估计大部分都遇到过，解决方法如下：执行flutter doctorDoctor summary (to see all details, run flutter doctor -v):[✓] Flutter (Channel stable, v1.12.13+h..

老孟导读：在Flutter中如何实现点击2次Back按钮退出App，如何实现App中多个Route（路由），如何实现Back按钮只退出指定页面，此篇文章将告诉你。WillPopScopeWillPopScope用于处理是否离开当前页面，在Flutter中有多种方式可以离开当前页面，比如AppBar、CupertinoNavigationBar上面的返回按钮，点击将会回到前一个页面，在Android手机上点击实体（虚拟）返回按钮，也将会回到前一个页面，此功能对于iOS程序员来说可能特别容易忽略。以..

老孟导读：关于Flutter为什么使用Dart?这个话题，就像PHP是世界上最好的语言一样，争论从来没有停止过，有很多说法，比如：Google是为了推广Dart，Dart是亲儿子。Flutter团队和Dart团队相邻，沟通起来更方便。或许存在这样的考虑，但即使是亲儿子，烂泥也要能扶上墙才行啊，难道你真的觉得如此重大的决定是靠这些主观色彩决定的？不可能的，所以Dart一定是有其非常大的优势。前言在Flutter成立之初，Flutter团队评估了10多种语言，Flutter团队从四个主要维度..

老孟导读：Flutter内置了多个标签类控件，但本质上它们都是同一个控件，只不过是属性参数不同而已，在学习的过程中可以将其放在放在一起学习，方便记忆。RawChipMaterial风格标签控件，此控件是其他标签控件的基类，通常情况下，不会直接创建此控件，而是使用如下控件：ChipInputChipChoiceChipFilterChipActionChip如果你想自定义标签类控件时通常使用此控件。RawChip可以通过设置onSelected被选中，设置onDeleted被删除...

Flutter系统提供了一些日期选择类组件，比如DayPicker、MonthPicker、YearPicker、showDatePicker、CupertinoDatePicker等，其中前4个为Material风格组件，最后一个为iOS风格组件。本文介绍了控件的基本用法及如何实现国际化，如果系统提供的国际化不满足你的需要，最后也介绍了如何实现自定义国际化。DayPicker显示给定月份的日期，并允许选择一天。这些天以矩形网格排列，一周的每一天都有一列。DayPicker有几个必填参数，分别如..

老孟导读：昨天Flutter 1.17版本重磅发布，新的版本主要是优化性能、修复bug，有人觉得此版本毫无亮点，但也从另一方面体现了Flutter目前针对移动端已经较为完善，想了解具体内容，文末有链接，如果你想升级到最新版本，建议慎重，有些人升级后项目无法运行。今天介绍的组件是NestedScrollView，大部分的App首页都会用到这个组件。可以在其内部嵌套其他滚动视图的滚动视图，其...

老孟导读：昨天Flutter 1.17版本重磅发布，新的版本主要是优化性能、修复bug，有人觉得此版本毫无亮点，但也从另一方面体现了Flutter目前针对移动端已经较为完善，想了解具体内容，文末有链接，如果你想升级到最新版本，建议慎重，有些人升级后项目无法运行。今天介绍的组件是NestedScrollView，大部分的App首页都会用到这个组件。可以在其内部嵌套其他滚动视图的滚动视图，其...

Flutter 1.17 是2020年的第一个稳定版本，此版本包括iOS平台Metal支持（性能更快），新的Material组件，新的Network跟踪工具等等！对所有人来说，今年是充满挑战的一年。我们的目标是按季度节奏发布稳定的发行版；但是，此版本花费了更长的时间，因为我们一直在为新的发布过程重新调整基础架构。我们继续将质量作为第一要务，并相信新的发布模型将提高我们提供服务的能力。自1.1...

老孟导读：快乐的51假期结束了，切换为努力模式，今天给大家分享CustomScrollView组件，此组件在以后的项目中会经常用到，CustomScrollView就像一个粘合剂，将多个组件粘合在一起，具统一的滚动效果。CustomScrollViewCustomScrollView是使用Sliver组件创建自定义滚动效果的滚动组件。使用场景：ListView和GridView相互嵌...

老孟导读：此篇文章是 Flutter 动画系列文章第四篇，本文介绍动画序列、共享动画、路由动画。动画序列Flutter中组合动画使用Interval，Interval继承自Curve，用法如下：Animation _sizeAnimation = Tween(begin: 100.0, end: 300.0).animate(CurvedAnimation( parent: _animationController, curve: Interval(0.5, 1.0)));表示_siz..

老孟导读：此篇文章是 Flutter 动画系列文章第三篇，后续还有动画序列、过度动画、转场动画、自定义动画等。Flutter 系统提供了20多个动画组件，只要你把前面【动画核心】(文末有链接)的文章看明白了，这些组件对你来说是非常轻松的，这些组件大部分都是对常用操作的封装。显示动画组件回顾上一篇【动画核心】的文章中创建动画三个必须的步骤：创建 AnimationController。监听 AnimationController，调用 setState 刷新UI。释放 AnimationC..

老孟导读：此文讲解3个酷炫的3D动画效果。下面是要实现的效果：Flutter 中3D效果是通过 Transform 组件实现的，没有变换效果的实现：class TransformDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('3D 变换Demo&..

老孟导读：此快捷方式适用于Mac下的 Android Studio 。Windows 下的快捷方式请参考这篇文章：https://juejin.im/post/5efe71365188252e7d7fd0ca快速创建一个新的Stateless or Stateful组件创建新的 Stateless 组件，输入stless，回车：创建新的 Stateful 组件，输入 stful，回车：创建新的 动画组件，输入 stanim，回车：还有其他的一些快捷方式，这里不一一介绍，这些快捷方式在 ..

子标题：Ubuntu团队为所有Linux发行版上的Flutter应用程序制作了一个新的基于GTK +的主机。此文翻译自：https://medium.com/flutter/announcing-flutter-linux-alpha-with-canonical-19eb824590a9作者：克里斯·塞尔斯（Chris Sells）（Google）和肯·范丁（Ken VanDine）（Canonical）Google 对 Flutter 的目标一直是提供一个可移植的工具包，以构建媲美本机速度运..

老孟导读：在 Flutter 1.17 发布大会上，Flutter 团队还发布了新的 Animations 软件包，该软件包提供了实现新的 Material motion 规范的预构建动画。软件包 pub 地址：https://pub.dev/packages/animations Material motion 规范：https://material.io/design/motion/the-motion-system.html引入插件，版本号请到 pub 上查看最新版本号：animatio..

老孟导读：动画系统是任何一个UI框架的核心功能，也是开发者学习一个UI框架的重中之重，同时也是比较难掌握的一部分，下面我们就一层一层的揭开 Flutter 动画的面纱。任何程序的动画原理都是一样的，即：视觉暂留，视觉暂留又叫视觉暂停，人眼在观察景物时，光信号传入大脑神经，需经过一段短暂的时间，光的作用结束后，视觉形象并不立即消失，这种残留的视觉称“后像”，视觉的这一现象则被称为“视觉暂留”。人眼能保留0.1-0.4秒左右的图像，所以在 1 秒内看到连续的25张图像，人就会感到画面流畅，而 1 秒内..

Flutter 中渐变有三种：LinearGradient：线性渐变RadialGradient：放射状渐变SweepGradient：扇形渐变看下原图，下面的渐变都是在此图基础上完成。LinearGradient给一张图片添加从上到下的线性渐变：ShaderMask( shaderCallback: (Rect bounds) { return LinearGradient( begin: Alignment.topCenter, end: Ali.

老孟导读：这是老孟翻译的精品文章，文章所有权归原作者所有。欢迎加入老孟Flutter交流群，每周翻译2-3篇付费文章，精彩不容错过。原文地址：https://medium.com/flutter-community/flutter-ide-shortcuts-for-faster-development-2ef45c51085b如果您是一个 Flutter 初学者，那么您一定厌恶嵌套结构，在代码中添加或删除一个小部件，或者找到一个小部件在何处结束、何处开始是多么困难。 然后，您需要花费一整天的..

老孟导读：这是 【Flutter 实战】组件系列文章的最后一篇，其他组件地址：http://laomengit.com/guide/widgets/Text.html，接下来将会讲解动画系列，关注老孟，精彩不断。先看一下效果：大家学习UI编程语言时喜欢用哪个 App 当作第一个练手的项目呢？，我喜欢使用 计算器 ，可能是习惯了吧，学习 Android 和 React Native 都用此 App 当作练手的项目。下面我会一步一步的教大家如何实现此项目。整个项目的 UI 分为两大部分，一部分是..

老孟导读：这是老孟翻译的精品文章，此篇文章共有 3.6K的赞。加入老孟Flutter交流群（wx：laomengit），精彩文章不容错误。原文地址：https://medium.com/free-code-camp/why-i-think-flutter-is-the-future-of-mobile-app-development-768332b73c0d几年前，我使用Java和Objective-C涉足了Android和iOS开发，使用它们尝试了大约1个月后，我决定继续前进。但是最近，我了..

在 Flutter 中一切皆是 组件，仅仅 Widget 的子类和间接子类就有 350 多个，整理的 Flutter组件继承关系图 可以帮助大家更好的理解学习 Flutter，回归正题，如此多的组件到底如果学习，真的需要学习 350 多个组件？在经济学中有一个著名的 二八定律二八定律是意大利经济学家帕累托发现的。帕累托认为任何一组东西中最重要的只占其中一小部分约占20%，其余80%尽管是多数，却是次要的。而我们学习 Flutter 也适用于二八定律，大部分组件是平时很少用到的，因此作为初学者，只.

老孟导读：没有接触过音乐字幕方面知识的话，会对字幕的实现比较迷茫，什么时候转到下一句？看了这篇文章，你就会明白字幕so easy。先来一张效果图：字幕格式目前市面上有很多种字幕格式，比如srt, ssa, ass（文本形式）和idx+sub（图形格式），但不管哪一种格式都会包含2个属性：时间戳和字幕内容，格式如下：00:00 歌词：00:25 我要穿越这片沙漠00:28 ...

老孟导读：Flutter组件有一个很大的特色，那就是很多复杂的组件都是通过一个一个小组件拼装而成的，今天就来说说系统的ExpansionPanelList是如何实现的。在了解ExpansionPanelList实现前，先来了解下MergeableMaterial，它展示多个MergeableMaterialItem组件，当子组件发生变化时，以动画的方式打开或者关闭子组件，Mergeable...

老孟导读：前2天有读者问到是否有带分页功能的表格控件，今天分页功能的表格控件详细解析来来。PaginatedDataTablePaginatedDataTable是一个带分页功能的DataTable，生成一批数据，项目中此一般通过服务器获取，定义model类：class User { User(this.name, this.age, this.sex); final Str...

​老孟导读：最近文章更新拖后腿了，一直忙着网站改版的事情，今天总算落地了，全新的Flutter网站即将上线，敬请期待。网站目前收集197个组件的详细用法，还有150多个组件待整理。StepperStepper控件是一个展示一系列步骤进度的控件，用法如下：Stepper( steps: <Step>[ Step( title: Text('20...