Flutter使用总结

前言

Flutter 是一个由谷歌开发的开源移动应用软件开发工具包,用于为 Android、iOS、Windows、Mac、Linux、Google Fuchsia 开发应用。

我们可以将 Flutter 理解为一个移动 UI 框架,它可以快速在 iOS 和 Android 上构建高质量的原生用户界面,使用这一框架可以大大提高开发效率。在全世界,Flutter 正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。


flutter.jpeg

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 打包
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,392评论 5 470
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,258评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,417评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,992评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,930评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,199评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,652评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,327评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,463评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,382评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,432评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,118评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,704评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,787评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,999评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,476评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,057评论 2 341

推荐阅读更多精彩内容