前言
Flutter 是一个由谷歌开发的开源移动应用软件开发工具包,用于为 Android、iOS、Windows、Mac、Linux、Google Fuchsia 开发应用。
我们可以将 Flutter 理解为一个移动 UI 框架,它可以快速在 iOS 和 Android 上构建高质量的原生用户界面,使用这一框架可以大大提高开发效率。在全世界,Flutter 正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。
Flutter 的特点
- 跨平台:Flutter 支持常见的 MacOS、Windows、Linux、Android、iOS 平台,可以说是目前支持平台最多的 UI 框架。良好的跨平台性,可以大大减少了开发成本。
- 丝滑般的体验:使用 Flutter 内置的 Material Design(Android 风格)和 Cupertino(iOS 风格)风格组件,以及丰富的 motion API,平滑而自然的滑动效果和平台感知,为用户带来全新的体验。
- 响应式框架:使用一系列基础组件和响应式框架,可以轻松构建用户界面。使用功能强大且灵活的 API 可以实现复杂的界面效果。
-
声明示编程:主流编程思想,以结果为导向,允许多种实现方式,开发更加灵活。
(当然,要表达更复杂的目标时,也应向命令式靠拢了。把流程表达的清晰明了才是一个合格的程序员)
- 开发效率高:支持Hot reload和Hot restart,写UI界面的时候,一键看效果。
- 支持插件:使用插件可以访问平台本地 API,如相机、蓝牙、WiFi 等等。借助现有的 Java、Swift、Object-C、C++ 代码实现对原生系统的调用。
- 60fps超高性能:Flutter 编写的应用可以达到 60fps(每秒传输帧数)。Flutter 采用 GPU 渲染技术,所以性能很好,完全可以胜任游戏开发。
-
嵌套式编码方式:
复杂界面嵌套严重,可读性不高
Flutter 的发展
在 2017 年 Google I/O 大会上,Google 首次发布 Flutter。到 2022年5月中旬,已经有 140K 的 Star,Star 数量 Github 上排名18位 。经历了5年的发展,Flutter 生态系统得以快速增长,国内外有非常基于 Flutter 的成功案例,国内的互联网公司基本都有专门的 Flutter 团队。总之,历时 4 年,Flutter 发展飞快,已在业界得到了广泛的关注和认可,在开发者中受到了热烈的欢迎,成为了移动跨端开发中最受欢迎的框架之一。
Google 目前在大力推广 Flutter,Flutter 项目的贡献者中有很多人都是来自 Chromium 团队,并且 Github上活跃度很高。
一、学习路线
Flutter作为一门新开源的移动UI框架,在设计之初,谷歌的工程师就考虑到了开发者在学习Flutter的成本问题,Dart语言与Flutter的结合,获得泛型、class等强类型语言的特性保证了我们开发的应用安全可控,同时Flutter借鉴了FaceBook成熟开源框架React的单向数据绑定的特性,使我们在开发的过程中可以恰到好处的更新和控制我们的页面。
通过我们的实际开发使用的经验看,Flutter是一门学习起来十分顺滑的成熟技术框架,下面将推荐一下学习路线让你快速的入门Flutter,构建你想要的应用:
1.学习Dart语言
官网快速入门:Dart 语言开发文档(dart.cn/guides)
2.学习Flutter UI框架
掌握Widget,在Flutter中,万物皆Widget!Widget作为我们搭建应用的组件,需要至少掌握我们常见的Widget
Widget | 说明 |
---|---|
Container | 一个拥有绘制、定位、调整大小的 widget。 |
Row | 在水平方向上排列子widget的列表。 |
Column | 在垂直方向上排列子widget的列表。 |
Image | 一个显示图片的widget |
Text | 单一格式的文本 |
Icon | A Material Design icon. |
RaisedButton | Material Design中的button, 一个凸起的材质矩形按钮 |
Scaffold | Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API。 |
Appbar | 一个Material Design应用程序栏,由工具栏和其他可能的widget(如TabBar和FlexibleSpaceBar)组成。 |
ListView | 列表显示 |
Icon | 图标 |
Switch | 单选开关 |
Checkbox | 复选框 |
TextField | 输入框 |
Form | 表单组件 |
Flex、Expanded | 弹性布局 |
Wrap | 流式布局 |
Stack、Positioned | 层叠布局,用于页面定位,层叠摆放 |
Align | 对齐与相对定位 |
GestureDetector | 手势识别 |
基础知识点
二、进阶学习
- 系统学习:Flutter实战
- 插件使用:pub.dev
- 原生调用:文件操作、拍照、语音、视频播放、本地化数据缓存、消息通道封装处理...
三、拓展学习
- 即使Flutter已经完成了大部分移动开发需要的Widget,但是还是有一些特殊的用户需求需要我们去实现,既然是跨平台开发,那就离不开原生开发!是的,如果需要深入移动领域,要学习原生!
- 学习Flutter运行机制可以帮助我们更好的解决实际开发中的一些问题,譬如:渲染、动画机制、数据绑定、流数据处理。学习方法:读Flutter源码,大量实践 、思考及总结。
四、环境配置
安装和环境配置:
flutter官网
mac安装流程
五、代码风格
好的代码有一个非常重要的特点就是拥有好的风格。一致的命名、一致的顺序、以及一致的格式让代码看起来是一样的。这非常有利于发挥我们视力系统强大的模式匹配能力。如果我们整个 Dart 生态系统中都使用统一的风格,那么这将让我们彼此之间更容易的互相学习和互相贡献。它使我们所有人都可以更容易地学习并为彼此的代码做出贡献。
1.命名
在 Dart 中标识符有三种类型。
-
UpperCamelCase(大驼峰)
: 每个单词的首字母都大写,包含第一个单词。 -
lowerCamelCase (小驼峰)
:除了第一个字母始终是小写(即使是缩略词),每个单词的首字母都大写。 -
lowercase_with_underscores(下划线)
: 只是用小写字母单词,即使是缩略词,并且单词之间使用 _ 连接。
要使用 UpperCamelCase
风格命名类型
每个单词的首字母都大写,包含第一个单词。
Classes(类名)、 enums(枚举类型)、 typedefs(类型定义)、扩展名()、以及 type parameters(类型参数)应该把每个单词的首字母都大写(包含第一个单词),不使用分隔符。
要使用lowerCamelCase
风格来命名。
除了第一个字母始终是小写(即使是缩略词),每个单词的首字母都大写。
类成员、顶级定义、变量、参数以及命名参数等 。
要使用 lowercase_with_underscores
风格命名类型
小写字母单词,即使是缩略词,并且单词之间使用 _ 连接。
命名库,包,文件夹,源文件。
2. 引用顺序
为了使文件前面部分保持整洁,我们规定了关键字出现顺序的规则。每个“部分”应该使用空行分割。(暂未查到Flutter有类似iOS的PrefixHeader头文件,一些大量复用的工具类文件要多次引用?
)
顺序如下:dart: =>package:=>export
import 'dart:async';
import 'dart:html';
import 'package:bar/bar.dart';
import 'package:foo/foo.dart';
import 'foo.dart';
import 'foo/foo.dart';
export 'src/error.dart';
六、插件使用规范
使用规范
建议所有的第三方插件都进行二次封装后放入pubs文件夹使用,有利于插件版本升级、更换,符合我们开发原则:“一处处理,多处实现”,降低我们的维护成本和开发成本。
插件汇总
1.Provder
:数据动态管理插件
熟悉provider是如何调用build方法去通知页面更新,了解context挂载provider实例,如何通过context在element tree中获取到对应的provider实例。
2. dio
:网络请求插件
熟悉dio基本配置,拦截网络请求做业务处理
3. flutter_screenutil
:屏幕适配
了解屏幕适配的基本原理,如何调用全局context for root
4. shared_preferences
:本地持久化
主要应用场景:少量本地化存取,例如:user信息、版信息。大批量、反复调用存取不建议使用。
5. mqtt_client
:mqtt客户端
6. sqflite
:数据库
主要应用场景:大批量数据本地化存取,例如:搜索历史、聊天历史等。注意使用是表的开关,以释放内存。
7. device_info
:设备信息
8. cached_network_image
:图片缓存
9. cached_video_player
:视频播放
10. wechat_assets_picker
:图片视频选择器
仿微信选择图片与视频
11. path_provider
:设备路径
注意区分临时文件路径和项目文件路径的区别
12. permission_handler
:权限管理
13. isolate
:线程管理使用
在大批量调用渲染和网络请求等“高消耗”的操作下,Flutter Ui视图会造成卡顿现象,这时候要开启一个线程去跑这些操作。在使用isolate过程中注意使用完后关闭isolate并释放掉内存,否则会因内存占用大而导致应用奔溃。
14. flutter_sound
:音频录取和播放
七、Flutter常用命令
1.环境安装
flutter --version 查看当前安装的flutter 版本
flutter upgrade 升级当前的flutter 版本
flutter doctor 检查环境安装是否完成
flutter channel 查看flutter所处分支
flutter channel master 切换flutter分支到master(建议使用'stable'稳定分支)
2.项目编译运行
flutter clean 清空build目录
flutter pub get 获取pub插件包
open -a Simulator 运行iOS模拟器
flutter devices 可用模拟器设备列表
flutter run -d 设备名称 运行项目到指定设备
3.打包
flutter build apk --release --target-platform android-arm64 生成指定CPU架构的apk
flutter build ios iOS打包 这一步并不能生成ipa文件,需要使用Xcode 打包