Flutter入门与实战
Flutter是Google使用Dart语言开发的移动应用开发框架,使用一套Dart代码就能构建高性能、高保真的iOS和Android应用程序,并且在排版、图标、滚动、点击等方面实现零差异。
¥19.90
¥99.00
购买须知?
本专栏为图文内容,最终完结不会低于15篇文章。
订阅博主任意付费专栏,享有该博主全部专栏一年阅读权限。
本专栏为虚拟产品,一经付款概不退款,敬请谅解。
xiangzhihong8
著有《React Native移动开发实战》、《Kotlin入门与实战》、《Weex跨平台开发与实战》、《React Native开发进阶》和《Flutter跨平台开发实战》,正努力完成《Android应用架构实战》
-
原创 Flutter仿微信的下拉弹框
在移动开发中,下拉弹框是一种很常见的选择交互方式,效果如下图所示。对于这种弹框,我们可以使用Dialog来实现,下面是自定义弹框的主要代码。Color _bgColor = Colors.white;double cellHeight = 34;double cellWidth=120;typedef ClickCallBack = void Function(int selectIndex, String selectText);class PopMenus { static voi2021-02-24 11:19:0526
0
-
翻译 Flutter 1.17发布,带来多个新特性
多年以前,当我们讨论移动跨平台开发时,总会有人提出跨平台应用程序速度慢的刻板问题。现在,使用Flutter自带的渲染引擎我们完全可以开发出媲美原生应用的用户体验,同时一套代码即可同时运行在iOS、Android和浏览器等多个平台,也带来了应用开发效率的提升。作为目前最流行的移动跨平台技术方案,最近两年,Flutter在移动跨平台开发方面的成长可以说是有目共睹的。进入2020年,Google官方在前不久发布了2020年的更新计划,并在前两天更新了Flutter 1.17版本,这是2020年的第一个稳定版本,2020-05-10 21:29:35716
0
-
原创 Flutter 国际化适配
借助App Store与Google Play,全世界任何一个国家的使用者都可以使用我们开发的应用,不过由于应用的使用者来自不同国家,所以在应用正式上架之前需要让应用能够支持多种语言,即应用的国际化。在Flutter开发中,应用的国际化主要涉及语言和地区差异性配置两个方面,它们是应用程序的组成部分之一。关于语言的国际化比较好理解,而地区差异性配置指的是根据国家风俗的不同进行的差异性配置。按照Fl...2020-03-09 11:34:10578
0
-
原创 Flutter应用集成极光推送
概述在移动应用开发中,消息推送可以说是一项非常重要的功能,它能够起到提醒或者唤醒用户的作用,同时也是产品运营人员更高效地实现运营目标的重要手段,比如将新上架一个商品或者最新的一条新闻推送给用户。事实上,消息推送是一个横跨业务服务器、第三方推送服务托管厂商、操作系统长连接推送服务、用户终端以及移动手机应用等五方面的复杂业务应用场景。在原生iOS开发中,为了简化消息推送,苹果推送服务(简称APNs...2020-02-27 10:45:13513
0
-
原创 Flutter 底部向上动画弹出菜单
在移动应用开发中,我们经常会遇到弹出菜单的开发需求,对于下拉菜单可以参考Flutter 自定义下拉菜单,而如果是向上的弹出菜单或者更加负责的扇形菜单,则需要开发者进行自定义开发。上面是自定义向上弹出菜单的示例,如果要实现上面的效果,需要开发者对动画(AnimationController、Animation)和Flow组件能够很熟练的进行使用。...2021-01-13 10:44:12166
1
-
原创 Flutter 自定义下拉菜单
在Flutter开发中,经常会遇到下拉菜单的开发需求。由于Flutter并没有提供下拉组件,所以在平时开发时就需要我们自己编写自定义下拉组件,如下图所示。其实,要实现这样的下拉菜单也比较简单,就是使用Stack层叠布局。首先,自定义一个DropDownMenuWidget组件用于控制菜单的显示和隐藏,所以最外层使用的是Offstage组件,如下所示。StreamController<bool> menuState = StreamController.broadcast();Stre2021-01-08 18:18:54250
0
-
原创 程序员如何构建自己的知识体系
https://time.geekbang.org/column/article/13911?utm_campaign=guanwang&utm_source=baidu-ad&utm_medium=ppzq-pc&utm_content=title&utm_term=baidu-ad-ppzq-title2020-12-17 17:34:19299
0
-
原创 Google 2020开发者大会Flutter专题
由于疫情的原因,今年的Google 开发者大会 (Google Developer Summit) 在线上举行,本次大会以“代码不止”为主题,全面介绍了产品更新以及一系列面向本地开发者的技术支持内容。我比较关注的是移动开发,在本次大会上,关于Flutter 主题的演讲主要从 Flutter 性能方面优化和新功能进行展开。作为全球增长速度第二的开源项目,越来越多国内开发者使用 Flutter 实现跨平台开发,包括腾讯英语君团队、阿里闲鱼团队等等。其在 开放性上的进步,得益于开源社区、生态建设、对 Web 的2020-11-20 16:33:07573
0
-
原创 使用Jenkins搭建Flutter自动化打包
安装Jenkins首先,从官网上下载最新的pkg安装包,然后进行安装。如果要下载历史版本,可以使用下面的地址进行下载:http://mirrors.jenkins.io/osx/。下载完后,点击安装即可,如下图所示。安装完成之后,Safari可能会自动打开,如果没有自动打开,打开浏览器,输入http://localhost:8080,如下图所示。按照提示,打开/Users/Shared/Jenkins/Home/secrets/initialAdminPassword路径,然后更改secrets文2020-10-24 11:26:16859
2
-
原创 关于Flutter提示Your Xcode project requires migration的错误
最近,升级了Flutter后,运行之前的项目报了一个如下的错误:Your Xcode project requires migration. See https://flutter.dev/docs/development/ios-project-migration for details.Error launching application on iPhone 11 Pro.想到之前升级了Xcode,怀疑是升级之后造成的,于是搜索了下,发现当升级Xcode之后,需要对Flutter进行手动的配置2020-10-14 18:51:11328
0
-
原创 Flutter 1.22 正式版发布
继 9 月 23 号发布 Flutter Windows 内测版 之后刚过几天,Flutter 官方在昨夜凌晨正式发布了 Flutter 1.22。本次版本的升级又带来了新一轮的功能发布,性能改进和问题修复。恰逢移动平台新版本(iOS 14/Android 11)的发布季,此次的版本更新保证了 Flutter 应用在 Android 11 和 iOS 14 上的兼容性,面向 iOS 14,本次更新包括了对 Xcode 12,新 Icon 的更新以及 App Clips 功能的预览。对于Android 112020-10-11 20:15:442183
4
-
原创 Flutter事件分发流程简析
Flutter 事件分发Flutter 中的 WidgetsFlutterBinding 集成了 GestureBinding、ServicesBinding、SchedulerBinding、PaintingBinding、SemanticsBinding、RendererBinding、WidgetsBinding 等 7 种 Binding,它们都有自己在功能上的划分,其中,GestureBinding 主要负责的是事件分发、手势检测相关。...2020-09-27 18:55:29412
0
-
原创 支持上拉加载更多的自定义横向滑动表格
在股票软件中,经常会看到如下所示的效果(ps:由于公司数据敏感,所以使用另一个朋友的一个图)。分析需要后,我先在网上找了下支持横向滑动的组件,最后找到了这个:flutter_horizontal_data_table,看了下示例,也满足我的开发需要,并且我使用2000条数据进行测试,也没有卡顿的问题。不过,这个组件有一个问题是不支持下拉,因为很多场景中,对于这种数据比较多的情况,我们需要对数据进行分页加载,给予此,我们需要对flutter_horizontal_data_table进行改造,增加支持上2020-09-21 19:56:37316
1
-
原创 关于Flutter打包报linked and embedded framework ‘App.framework‘ was built for iOS Simulator的错误
今天升级Xcode之后,使用打包机打iOS包的时候,报了一个错,报错的信息如下: note: Using new build system note: Building targets in parallel note: Planning build note: Constructing build description error: Building for iOS, but the linked and embedded framework 'App.framewor2020-09-18 18:03:05736
0
-
原创 Fluter 应用调试
调试工具2020-09-09 20:02:27222
0
-
原创 在原生项目中集成Flutter
https://flutter.dev/docs/development/add-to-app/android/project-setup2020-09-04 18:35:521126
0
-
原创 Flutter自定义弹框
导致这种情况发生的原因是因为,Text widget 隶属于Material 风格下的组件,如果根节点不是Material 相关组件,则会使用默认带黄色下划线的格式。如果根节点是Material 容器组件,则会采用其Material风格的样式(即不带有下换线)。解决方案主要有三种:1,采用根节点为脚手架Scaffold组件:Scaffold(body: content,);2, 采用根节点为Material 组件。Material(child: content);3, 逐个修改Text 组件2020-08-28 21:03:10701
2
-
原创 Flutter Dio包网络请求抓包解决方案
在Flutter中进行网络请求时,我们可以使用的库有3个,即Http请求库、HttpClient请求库和Dio请求库(详细介绍请参考:Flutter开发之Http网络请求),使用得最多的就是Dio请求库。因为相比Http请求库和HttpClient请求库,Dio库不仅支持常见的网络请求,还支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时等操作。不过,默认情况下,Dio进行网络请求时是不支持抓包的,所以如果要进行抓包,就需要对Dio进行请求封装,并编写代2020-08-17 11:59:26925
0
-
原创 Flutter开发之Dart DevTools
Dart DevTools 简介Flutter是Google开源的一个跨平台 UI 工具包,可以帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台。同时,它也是Google未来的 Google Fuchsia 应用构建的主要方式。目前,Flutter完全开源、免费,拥有宽松的开源协议,适合商业项目。使用Flutter开发跨平台应用时,经常需要用到一个开发者工具,即Dart DevTools,Dart DevTools是一套用于Dart和Flutter应用开发的性能和调试工2020-08-06 19:04:12956
0
-
原创 Flutter 多图片上传
使用Flutter进行应用开发时,经常会遇到选图、拍照等需求。如果要求不高,Flutter图库选择可以使用官方提供的image_picker,如果需要多选,那么可以使用multi_image_picker插件库。multi_image_picker库支持图库管理,多选,拍照,当然还可以自定义资源管理界面。multi_image_picker的使用也比较简单,首先,需要在pubspec.yaml配置文件中添加multi_image_picker库的依赖,如下所示。dependencies: dio:2020-08-05 17:47:01988
0
-
原创 Flutter开发之Flare动画
Flare 是一家可以快速制作 Flutter SVG 动画的网站,提供专门的 Flutter Weight 承载网站导出的动画文件,相当于 android 的 Lottie,Flare 的首次出现非常惊艳,是在 Flutter 发布大会上,一下就火了。2020-07-21 12:15:09300
0
-
原创 Flutter应用开发之webview_flutter插件
简介在移动应用开发中,经常会遇到加载网页的需求,打开网页通常有两种方式,即在应用内使用内置的组件打开和使用系统自带的浏览器打开。不过,在Flutter应用开发中,由于官方并没有提供类似Webview的网页加载组件,所以如果项目中涉及网页加载需要使用第三方插件库,如webview_flutter、flutter_webview_plugin等。其中,webview_flutter是Flutter官方开发和维护的网页加载插件库,而flutter_webview_plugin则是Flutter开源社区推出的网2020-07-11 10:36:02632
0
-
原创 Flutter 自定义单选控件
在Flutter 应用开发中,经常会遇到各种单选效果,虽然官方提供了Radio组件,但是并不能满足我们实际的开发需求,所以往往还需要自定义控件。自定义SegmentBar2020-07-10 19:29:28999
0
-
原创 Flutter 应用开发之Bloc模式
基本概念响应式编程所谓响应式编程,指的是一种面向数据流和变化传播的编程范式。使用响应式编程范式,意味着可以在编程语言中更加方便地表达静态或动态的数据流,而相关的计算模型会自动将变化的值通过数据流进行传播。响应式编程最初的目的是为了简化交互式用户界面的创建和实时系统动画的绘制而提出来的一种方法,是为了简化MVC软件架构而设计的。在面向对象编程语言中,响应式编程通常以观察者模式的扩展呈现。还可以将响应式流模式和迭代器模式比较,一个主要的区别是,迭代器基于”拉“,而响应式流基于”推“。使用迭代器是一种命令2020-07-05 14:12:51813
0
-
原创 Flutter打包未签名的ipa
在Flutter项目开发完成之后,需要把iOS项目拿给第三方(如打包机)进行签名,那我们首先就需要准备打包好未签名的的ipa包。打包之前,需要先从第三方获取到iOS证书(.p12)和描述文件(.mobileprovision),然后然后导入iOS证书(.p12)到本地,一般双击即可。然后,我们使用Xcode打开Flutter的iOS工程,如下图所示。按照原生iOS的打包要求,在 1 处填写Bundle Id,在 Singning 那里取消勾选 Automatically manage signing,2020-06-29 10:11:53620
0
-
原创 Flutter开发之动画
动画作为产品的重要组成部分,是提升用户体验的重要方式,一个恰当的动画不仅能够缓解用户因为等待而带来的情绪焦躁,还会增加应用的整体用户体验。因此,在应用中增加动画的相关功能,可以增强用户的粘性。动画的原理不管是Android平台还是iOS平台,我们在使用应用时都能看到一些炫酷的动画效果。作为移动应用的重要组成部分,动画是提高用户体验的重要手段,一个恰当的动画,不仅能够缓解用户因为等待而带来的情绪问题,还会提升用户使用的体验。事实上,不管是什么视图框架,动画的实现原理都是相同的,即在一段有限的时间内,多次2020-06-07 15:37:38261
0
-
原创 Flutter开发之动态权限
众所周知,Android在6.0版本后将权限修改成了动态权限,而iOS则一直使用的是动态权限,所以在Flutter应用开发中如果涉及到一些危险权限,就需要进行动态申请,动态申请权限可以使用Flutter的permission_handler。基本使用1,配置权限首先,打开Android工程下的AndroidManifest.xml文件,具体路径如下:在android\app\src\main\AndroidManifest.xml中配置,然后添加如下所示的权限。<manifest xmlns:2020-06-04 22:34:17837
0
-
原创 Flutter 时间选择组件
在Flutter 应用开发过程中,或多或少的都会涉及到时间选择器相关的内容。Flutter默认提供了DatePicker日期选择器,如果对样式没有特殊的要求,那么可以使用它来进行时间的选择,代码如下:2020-06-02 12:17:32960
0
-
原创 Flutter 数字增加动画
在移动应用开发中,流畅的动画不仅可以给人留下美好的印象,还可以提高用户体验。在Flutter开发中,官方提供了简洁且强大的动画API,比较核心的有AnimationController和Animation。下面是使用AnimationController和Animation实现一个简单的数字增长动画,效果如下图所示。下面是源码:import 'package:flutter/material.dart';import 'package:gc_data_app/utils/utils.dart';2020-05-30 15:14:201088
1
-
原创 Flutter 应用热更新
Flutter 热更新简介所谓热更新,指的是当应用代码出现缺陷问题时,不需要重新打包提交App Store即可完成缺陷的修复。众所周知,使用原生技术开发的应用体验虽然好,但开发、上线周期长也常常被诟病,特别是当应用出现线上问题时,不得不重新打包发布,大大的影响了用户体验,而热更新技术就是为有效解决线上缺陷而提出的。不过,热更新虽然具有很大的优点,但是滥用热修复也会给应用带来不好的体验,并且苹果...2020-04-24 11:33:001745
0
-
原创 Flutter使用JsBridge方式处理Webview与H5通信
目前,移动跨平台开发作为移动开发的重要组成部分,是移动开发者必须掌握的技能,也是自我提升的重要手段。作为Google推出的跨平台技术方案,Flutter具有诸多的优势,已经或正在被广大开发者应用在移动应用开发中。在过去的2019年,我看到越来越多的公司和个人开始使用Flutter来开发跨平台应用,对于移动应用开发来说,Flutter能够满足几乎所有的业务开发需求,所以,学习Flutter正当时。...2020-04-04 11:53:341307
1
-
原创 Flutter 应用性能检测与优化
概述软件项目的交付是一个复杂且漫长的过程,任何细小的失误都有可能导致交付过程失败。在软件开发过程中,除了代码逻辑的 Bug 和视觉异常这些功能层面的问题之外,移动应用另一类常见的问题是性能问题,比如滑动操作不流畅、页面出现卡顿丢帧现象等。这些问题虽然不至于让移动应用完全不可用,但也很容易引起用户反感,从而对应用质量产生质疑,甚至失去耐心。那么,对于应用渲染并不流畅,出现了性能问题,我们该如何检...2020-03-28 22:56:04712
0
-
原创 Flutter混合开发
混合开发简介使用Flutter从零开始开发App是一件轻松惬意的事情,但对于一些成熟的产品来说,完全摒弃原有App的历史沉淀,全面转向Flutter是不现实的。因此使用Flutter去统一Android、iOS技术栈,把它作为已有原生App的扩展能力,通过有序推进来提升移动终端的开发效率。目前,想要在已有的原生App里嵌入一些Flutter页面主要有两种方案。一种是将原生工程作为Flutter...2020-01-21 10:54:352457
0
-
原创 Flutter路由框架Fluro简介
在Flutter应用开发过程中,除了使用Flutter官方提供的路由外,还可以使用一些第三方路由框架来实现页面管理和导航,如Fluro、Frouter等。Fluro作为一款优秀的Flutter企业级路由框架,Fluro的使用比官方提供的路由框架要复杂一些,但是却非常适合中大型项目。因为它具有层次分明、条理化、方便扩展和便于整体管理路由等优点。使用Fluro之前需要先在pubspec.yaml文...2020-01-17 10:50:571037
0
-
原创 Flutter开发之异步编程
说到网络与通信,就不得不提到异步编程。所谓异步编程,就是一种非阻塞的、事件驱动的编程机制,它可以充分利用系统资源来并行执行多个任务,因此提高了系统的运行效率。事件循环机制事件循环是Dart中处理事件的一种机制,与Android中的Handler消息传递机制和前端的eventloop事件循环机制有点类似。在Flutter开发中,Flutter就是通过事件循环来驱动程序运行的。众所周知,Dart...2020-01-09 22:01:24806
0
-
原创 老许,你要转Flutter不要?只要你开金口,面试题现在就给你送来
概述Flutter是Google推出的一套开源跨平台UI框架,可以快速地在Android、iOS和Web平台上构建高质量的原生用户界面。在过去的一年里,Flutter的更新频率是相当的快,也有很多的公司开始使用它来进行跨平台应用开发,可以说,将Flutter称为2019年最流行的跨平台技术也不为过。在研究了Hybrid APP、React Native和Weex等技术之后,为在今年的早些时候也...2020-01-01 14:36:091770
3
-
原创 Flutter 应用调试
程序调试是程序投入运行之前,使用手工或编译程序等方法进行的测试,z主要用以修正语法错误和逻辑错误。程序调试是保证计算机信息系统正确性的必不可少的步骤。在Flutter应用开发中,Android Studio和VSCode是两种比较常见的集成开发环境,因此项目调试也围绕这两款IDE进行。Android Studio为Flutter提供完整的集成IDE体验,因此Android的调试技巧对于Flutt...2019-12-28 12:25:22574
0
-
原创 Flutter开发之路由与导航
基本概念如果说构成视图元素的基本单位是组件,那么构成应用程序的基本单位就是页面。对于拥有多个页面的应用程序而言,如何从一个页面平滑地过渡到另一个页面,是技术框架需要考虑的问题。在前端开发中,可以使用路由框架来统一管理页面及它们之间的跳转。在Android中路由指的是一个Activity,在iOS中指的是一个ViewController,可以通过startActivity或pushViewCon...2019-12-10 11:04:34855
1
-
原创 Flutter 必备开源项目
Flutter是Google推出的一套开源跨平台UI框架,可以快速地在Android、iOS和Web平台上构建高质量的原生用户界面。同时,Flutter还是Google新研发的Fuchsia操作系统的默认开发套件。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。作为目前最流行的跨平台技术框架,Flutter受到被越来越多的开发者和组织追捧,截止20...2019-12-01 21:14:102208
0
-
原创 Flutter原生混合开发
使用 Flutter 从头开始写一个 App是一件轻松惬意的事情。但是对于成熟产品来说,完全摒弃原有 App 的历史沉淀,全面转向 Flutter 并不现实。用 Flutter 去统一 iOS/Android 技术栈,把它作为已有原生 App 的扩展,然后通过逐步试验有序推进从而提升终端开发效率,可能才是现阶段 Flutter 最有效的集成方式。那么,Flutter 工程与原生工程该如何组织管理...2019-11-07 20:47:351198
0