自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

老孟Flutter

出版《Flutter 实战入门》一书,专注分享Flutter原理及实践应用,个人博客地址:http://laomengit.com

  • 博客(348)
  • 资源 (2)
  • 收藏
  • 关注

原创 【Flutter Widgets大全】电子书开源

【Flutter Widgets大全】是老孟耗费大量精力整理的,总共有330多个组件的详细用法,开源到Github上,希望可以帮助到大家,开源不易,点个赞可不可以????。【Flutter Widgets 大全】 为 Flutter 老孟 网站项目,共收录 330 多个 Widgets,此电子书并不适合入门(一个一个组件学习),适合当作手册,需要的时候进行查阅。为了方便对比学习,我将相近或相反功能的组件整理到一个文件中,比如所有的 Button 类组件、弹出类组件等。如果想系统的学习入门知识,请到

2020-10-11 20:18:15 1032 3

原创 2020年20个Flutter最漂亮的UI库和项目

Best-Flutter-UI-Templates地址:https://github.com/mitesh77/Best-Flutter-UI-TemplatesThe History of Everything地址:https://github.com/2d-inc/HistoryOfEverythingflame一款简约的Flutter游戏引擎。地址:https://github.com/flame-engine/flameflutter_swiper地址:https://g.

2020-07-20 08:11:03 2307 1

原创 【Flutter 实战】酷炫的开关动画效果

此动画效果是我在浏览文章时发现的一个非常酷炫的效果,于是就使用 Flutter 实现了。更多动画效果及Flutter资源:https://github.com/781238222/flutter-do添加依赖在项目的 pubspec.yaml 文件中添加依赖:dependencies: wheel_switch: ^0.0.1执行命令:flutter pub get使用WheelSwitch( value: false,)组件默认的宽高分别是80、30,也可以指定宽..

2020-11-27 06:41:01 87

原创 【老孟Flutter】自定义文本步进组件

老孟导读:此文介绍一个自定义组件,欢迎大家到 Github 上给个小星星,Github 还有很多我整理的 Flutter 资源。WriteText 组件是一个文本步进组件,即字符一个一个显示,就像手写一样。pub 地址:https://pub.dev/packages/write_textGithub 地址:https://github.com/781238222/flutter-do/tree/master/write_text引入软件包在 pubspec.yaml 中添加如下依赖..

2020-11-24 22:09:27 34

原创 【老孟Flutter】6种极大提升Flutter开发效率的工具包

老孟导读:本文介绍6种极大提升Flutter开发效率的工具包。[1] 强大的日志软件包在开发 Flutter 的过程中打印日志是常用的调试方式之一,但 Flutter 内置的日志打印非常简单,下面介绍一个强大的软件包:logger。Logger 是一款易于使用且可扩展的日志记录器,可打印精美的日志。 受到Android记录器的启发,将日志分为不同的级别:logger.v("Verbose log");logger.d("Debug log");l..

2020-11-11 21:43:42 119

原创 【Flutter 实战】pubspec.yaml 配置文件详解

老孟导读:pubspec.yaml 文件是 Flutter 中非常重要的配置文件,下面就让我们看看里面各个配置的含义。pubspec.yaml 是 Flutter 项目的配置文件,类似于 Android 中的 Gradle 配置文件,下面我们就看看 pubspec.yaml 中各个属性的配置。创建一个新的项目(Flutter Application),pubspec.yaml 位于根目录,如图:项目中默认配置,去掉注释部分,剩下如下:name: flutter_appdescription..

2020-11-04 21:44:44 231 1

原创 Flutter 1.22版本新增的Button

Flutter 1.22版本新增了3个按钮,TextButton、OutlinedButton、ElevatedButton,虽然以前的Button没有被废弃,但还是建议使用新的Button。为什么会新增 Button?因为想要将以前的按钮调整为统一的外观比较麻烦,因此以前经常使用自定义的按钮,而新增的按钮解决了此类问题,可以非常方便的设置整体外观。1.22版本前的按钮主题1.22版本后的按钮主题FlatButtonButtonThemeTextButtonTextBut..

2020-11-03 21:56:40 216

原创 【Flutter 混合开发】添加 Flutter 到 iOS

Flutter 混合开发系列 包含如下:嵌入原生View-Android嵌入原生View-iOS与原生通信-MethodChannel与原生通信-BasicMessageChannel与原生通信-EventChannel添加 Flutter 到 Android Activity添加 Flutter 到 Android Fragment添加 Flutter 到 iOS每个工作日分享一篇,欢迎关注、点赞及转发。Flutter 可以作为 frameworks 添加到 iOS 项目,i..

2020-11-02 22:34:14 56

原创 【Flutter 混合开发】添加 Flutter 到 Android Fragment

Flutter 混合开发系列 包含如下:嵌入原生View-Android嵌入原生View-iOS与原生通信-MethodChannel与原生通信-BasicMessageChannel与原生通信-EventChannel添加 Flutter 到 Android Activity添加 Flutter 到 Android Fragment添加 Flutter 到 iOS每个工作日分享一篇,欢迎关注、点赞及转发。使用新引擎创建 FlutterFragment添加 Flutter 到..

2020-10-29 22:18:11 53

原创 【Flutter 混合开发】添加 Flutter 到 Android Activity

Flutter 混合开发系列 包含如下:嵌入原生View-Android嵌入原生View-iOS与原生通信-MethodChannel与原生通信-BasicMessageChannel与原生通信-EventChannel添加 Flutter 到 Android Activity添加 Flutter 到 Android Fragment添加 Flutter 到 iOS每个工作日分享一篇,欢迎关注、点赞及转发。创建 Flutter ModuleFlutter可以以源代码或AAR的..

2020-10-27 21:57:20 106

原创 【Flutter 混合开发】与原生通信-EventChannel

Flutter 混合开发系列 包含如下:嵌入原生View-Android嵌入原生View-iOS与原生通信-MethodChannel与原生通信-BasicMessageChannel与原生通信-EventChannel添加 Flutter 到 Android Activity添加 Flutter 到 Android Fragment添加 Flutter 到 iOS每个工作日分享一篇,欢迎关注、点赞及转发。EventChannelFlutter 端Flutter 端创建 E..

2020-10-26 22:44:56 82

原创 【Flutter 面试】main入口函数会被调用几次

老孟导读:这是一个读者面试时被问到的问题,这个问题前段时间我也在VIP交流群和大家一起探讨过。这个问题涉及引擎的相关知识,如果不了解相关知识,很难回答正确,因为不管说调用几次都是错误的,下面来看一下引擎的相关知识。创建一个 Flutter 项目,然后运行,main入口函数 只会执行一次,下面修改项目的 MainActivity ,class MainActivity : Activity() { override fun onCreate(savedInstanceState: Bund..

2020-10-25 22:12:00 112

原创 【Flutter 混合开发】与原生通信-BasicMessageChannel

Flutter 混合开发系列 包含如下:嵌入原生View-Android嵌入原生View-iOS与原生通信-MethodChannel与原生通信-BasicMessageChannel与原生通信-EventChannel添加 Flutter 到 Android Activity添加 Flutter 到 Android Fragment添加 Flutter 到 iOS每个工作日分享一篇,欢迎关注、点赞及转发。平台通信的3中方式Flutter 与 Native 端通信有如下3个方..

2020-10-22 07:00:03 56 1

原创 【Flutter 混合开发】与原生通信-MethodChannel

Flutter 混合开发系列 包含如下:嵌入原生View-Android嵌入原生View-iOS与原生通信-MethodChannel与原生通信-BasicMessageChannel与原生通信-EventChannel添加 Flutter 到 Android Activity添加 Flutter 到 Android Fragment添加 Flutter 到 iOS每个工作日分享一篇,欢迎关注、点赞及转发。平台通信的3中方式Flutter 与 Native 端通信有如下3个方..

2020-10-20 08:09:11 117

原创 【Flutter 混合开发】嵌入原生View-iOS

Flutter 混合开发系列 包含如下:嵌入原生View-Android嵌入原生View-iOS与原生通信-MethodChannel与原生通信-BasicMessageChannel与原生通信-EventChannel添加 Flutter 到 Android Activity添加 Flutter 到 Android Fragment添加 Flutter 到 iOS每个工作日分享一篇,欢迎关注、点赞及转发。iOS View建议使用 Xcode 进行开发,在 Android S..

2020-10-18 21:38:30 87

原创 【Flutter 混合开发】嵌入原生View-Android

Flutter 混合开发系列 包含如下:嵌入原生View-Android嵌入原生View-IOS与原生通信-MethodChannel与原生通信-BasicMessageChannel与原生通信-EventChannel添加 Flutter 到 Android Activity添加 Flutter 到 Android Fragment添加 Flutter 到 iOS每个工作日分享一篇,欢迎关注、点赞及转发。AndroidView建议使用 Android Studio 进行开发..

2020-10-14 06:45:07 1208 4

原创 Flutter 1.22 正式发布

支持iOS 14和Android 11,新的i18n和l10n支持,可用于生产的Google Maps和WebView插件,新的App Size工具等等!作者:Chris Sells原文:https://medium.com/flutter/announcing-flutter-1-22-44f146009e5f我们很高兴推出最新版本的Flutter,它广泛支持iOS 14和Android11。Flutter 1.22在以前版本的基础上构建,使开发人员能够从一个代码库为多个平台构建快速,美观的用..

2020-10-09 21:49:38 11842 25

原创 使用Flutter完成10个商业项目后的经验教训

作者:Ł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对预算和稳定性有..

2020-09-27 07:34:36 809 1

原创 谷歌发布Flutter Alpha:支持Windows

老孟导读:Windows来了,Mac、Linux、Web还远吗?本文翻译自https://medium.com/flutter/announcing-flutter-windows-alpha-33982cd0f433我们的使命是为开发人员提供一个开源,高生产率的框架,以便在任何平台上构建漂亮的本机应用程序。到目前为止,我们已经为Android和iOS提供了正式版本(stable releases),仅Google Play商店就提供了8个稳定版本和100,000多个应用。我们将继续扩大关注范围,..

2020-09-24 20:39:34 4271 4

原创 【Flutter 实战】大量复杂数据持久化

老孟导读:上一篇文章讲解了 Android 和 iOS 的文件目录系统,此篇文章讲解如何使用 SQLite 保存数据。欢迎大家投稿:http://laomengit.com/plan/Contribution.html 保存数据到本地是应用程序非常重要的功能之一,比如如下场景:一个新闻类或者博客类的应用程序,打开后进入首页,如果本地没有保存数据,则需要通过网络获取数据,在返回数据之前,用户看到的是空白页面,而如果本地保存了部分新闻,则显示这部分数据,等待最新的数据返回时在刷新即可,对用户体验来说,..

2020-09-24 20:04:24 548 1

原创 【Flutter 实战】文件系统目录

老孟导读:Flutter 中获取文件路径,我们都知道使用 path_provider,但对其目录对含义不是很清楚,此文介绍 Android、iOS 系统的文件目录,不同场景下建议使用的目录。不同的平台对应的文件系统是不同的,比如文件路径,因此 Flutter 中获取文件路径需要原生支持,原生端通过 MethodChannel 传递文件路径到 Flutter,如果没有特殊的需求,推荐大家使用 Google 官方维护的插件 path_provider。pub 地址:https://pub.flutt..

2020-09-18 06:49:28 623 1

原创 全局监听路由堆栈变化

老孟导读:很多时候我们需要监听路由堆栈的变化,这样可以自定义路由堆栈、方便分析异常日志等。监听路由堆栈的变化使用 RouteObserver ,首先在 MaterialApp 组件中添加 navigatorObservers:void main() { runApp(MyApp());}RouteObserver<PageRoute> routeObserver = RouteObserver<PageRoute>();class MyApp extends ..

2020-09-17 07:16:01 170

原创 【Flutter 实战】路由堆栈详解

老孟导读:Flutter中路由是非常重要的部分,任何一个应用程序都离不开路由管理,此文讲解路由相关方法的使用和路由堆栈的变化。Flutter 路由管理中有两个非常重要的概念:Route:路由是应用程序页面的抽象,对应 Android 中 Activity 和 iOS 中的 ViewController,由 Navigator 管理。Navigator:Navigator 是一个组件,管理和维护一个基于堆栈的历史记录,通过 push 和 pop 进行页面的跳转。push 和 pop假设现在..

2020-09-16 07:34:51 132

原创 【Flutter 实战】菜单(Menu)功能

老孟导读:今天介绍下Flutter中的菜单功能。PopupMenuButton使用PopupMenuButton,点击时弹出菜单,用法如下:PopupMenuButton<String>( itemBuilder: (context) { return <PopupMenuEntry<String>>[ PopupMenuItem<String>( value: '语文', ch.

2020-09-14 07:08:47 149 1

原创 【Flutter 实战】1.20版本更新及新增组件

老孟导读:Flutter 1.20 更新了 Slider、RangeSlider、日期选择器组件、时间选择器组件的样式,新增了交换组件:InteractiveViewer,下面详细介绍其用法。滑块Flutter 1.20 版本将 Slider 和 RangeSlider 小部件更新为最新的 Material 准则。新的滑块在设计时考虑到了更好的可访问性:轨道更高,滑块带有阴影,并且值指示器具有新的形状和改进的文本缩放支持。Slider基础用法:class SliderDemo extends..

2020-09-11 07:07:43 1065 2

原创 【Flutter 实战】各种各样形状的组件

老孟导读:Flutter中很多组件都有一个叫做shape的属性,类型是ShapeBorder,比如Button类、Card等组件,shape表示控件的形状,系统已经为我们提供了很多形状,对于没有此属性的组件,可以使用 Clip 类组件进行裁减。BeveledRectangleBorder斜角矩形边框,用法如下:RaisedButton( shape: BeveledRectangleBorder( side: BorderSide(width: 1, color: Colors...

2020-09-09 07:10:43 237 1

原创 我对Flutter的第一次失望

老孟导读:此文翻译自:https://medium.com/@suragch/my-first-disappointment-with-flutter-5f6967ba78bf我喜欢Flutter。我喜欢开发一次并让代码在Android和iOS上运行。我喜欢节省多少时间。我喜欢现在成为一名Web开发人员,而无需做任何额外的工作。我喜欢hot reload。我喜欢通过将小部件组合到布局中来快速构建UI。我喜欢制作ListView简单得多。我喜欢状态管理。 (好吧,只是在开玩笑。但是我可以应付。)我喜欢..

2020-09-04 07:30:32 1664 3

原创 【Flutter 实战】全局点击空白处隐藏键盘

老孟导读:为什么要实现点击空白处隐藏键盘?因为这是 iOS 平台的默认行为,Android 平台由于其弹出的键盘右上角默认带有关闭键盘的按钮,所以点击空白处不会隐藏键盘。对于单个页面来说,通过为 TextField 添加 focusNode,点击空白处时使 TextField 失去焦点,实现如下:class DismissKeyboardDemo extends StatelessWidget { final FocusNode focusNode = FocusNode(); @ove..

2020-09-03 07:37:12 622 1

原创 Flutter —布局系统概述

老孟导读:此篇文章非常详细的讲解了 Flutter 布局系统的工作原理。翻译自:https://itnext.io/flutter-layout-system-overview-c70bbe9ba909?source=bookmarks---------17------------------最近,我决定专注于Flutter基础知识。这次,我试图更好地理解“布局系统的工作原理”,并回答以下问题:我的小部件的尺寸看起来不合适,怎么回事?我只想将Widget放置在特定位置,但是没有任何属性可以..

2020-09-02 20:46:39 319

原创 【Flutter 实战】17篇动画系列文章带你走进自定义动画

老孟导读:Flutter 动画系列文章分为三部分:基础原理和核心概念、系统动画组件、8篇自定义动画案例,共17篇。动画核心概念在开发App的过程中,自定义动画必不可少,Flutter 中想要自定义动画,首先要理解 Flutter 动画实现的基本原理及相关概念。第1-4篇介绍了 Flutter 动画中最重要的三个概念以及三者之间的关系:AnimationController:动画控制器,控制动画的播放、停止等。继承自Animation< double >,是一个特殊的Animati..

2020-09-01 07:26:13 729

原创 【Flutter 实战】自定义动画-涟漪和雷达扫描

老孟导读:此篇文章是 Flutter 动画系列文章第五篇,本文介绍2个自定义动画:涟漪和雷达扫描效果。涟漪实现涟漪动画效果如下:此动画通过 CustomPainter 绘制配合 AnimationController 动画控制实现,定义动画控制部分:class WaterRipple extends StatefulWidget { final int count; final Color color; const WaterRipple({Key key, this.coun..

2020-08-26 06:59:14 750 3

原创 【Flutter 实战】动画序列、共享动画、路由动画

老孟导读:此篇文章是 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..

2020-08-25 07:11:50 871

原创 【Flutter 实战】一文学会20多个动画组件

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

2020-08-19 06:40:22 768 2

原创 Flutter 实现酷炫的3D效果

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

2020-07-23 07:47:29 1189 1

原创 Flutter 快捷开发 Mac Android Studio 篇

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

2020-07-16 07:24:20 752

原创 Canonical通过Flutter启用Linux桌面应用程序支持

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

2020-07-10 10:05:45 528

原创 Flutter 1.17 新 Material motion 规范的预构建动画

老孟导读:在 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..

2020-07-09 20:23:48 672

原创 【Flutter 实战】动画核心

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

2020-07-07 07:11:11 623

原创 Flutter 中渐变的高级用法

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

2020-07-05 10:00:42 1252

原创 Flutter —快速开发的IDE快捷方式

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

2020-07-03 07:43:38 1278 1

react-native 相册(全选、删除、分享)

这个项目实现了本地图片、视频的展示,图片、视频的全选、删除功能

2017-07-07

RN与android混合开发及RN调用原生方法

RN与android混合开发及RN调用原生方法

2017-04-06

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除