当前位置: 首页>移动开发>正文

Flutter使用总结

前言

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

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


Flutter使用总结,第1张
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 打包

https://www.xamrdz.com/mobile/44z1995153.html

相关文章: