flutter 介绍调研

跨平台简介

纯原生开发主要面临动态化和开发成本两个问题，而针对这两个问题，诞生了一些跨平台的动态化框架

针对原生开发面临问题，业界一直都在努力寻找好的解决方案，根据其原理，主要分为三类：

• • • H5 + 原生（Cordova、Ionic、微信小程序）
    • JavaScript 开发 + 原生渲染 （React Native、Weex）
    • 自绘UI + 原生 (Qt for mobile、Flutter)

Flutter 简介

• • 快速开发：Flutter 的热重载可以快速地进行测试、构建UI、添加功能并更快地修复错误。
  • 富有表现力，漂亮的用户界面：自带的 Material Design 和 Cupertino（iOS风格）widget、丰富的 motion API、平滑而自然的滑动效果。
  • 响应式框架：使用 Flutter 的现代、响应式框架，和一系列基础 widget，轻松构建您的用户界面。
  • 访问本地功能和 SDK：Flutter 可以复用现有的 Java、Swift 或 ObjC代码，访问 iOS 和 Android 上的原生系统功能和系统 SDK。
  • 统一的应用开发体验：Flutter 拥有丰富的工具和库，可以帮助开发者从单个代码库为多个平台构建漂亮而快速的应用程序，轻松地同时在 iOS 和 Android 系统中实现想法和创意。
  • 原生性能：Flutter 包含了许多核心的 widget，如滚动、导航、图标和字体等，这些都可以在 iOS 和 Android 上达到原生应用一样的性能。

1.问题与解决方案

• • • 问题：默认是MD风格组件，对于iOS有Cupertino风格的组件，两者不统一。解决方案： 设计统一风格，个别样式需要写if else
    • 比如无法addSubView 只能写if else
    • 比如没有相对布局等

Flutter很好的提供了，页面布局导航，动画，手势，交互，网络，线程，数据库，生命周期管理，与原生平台通信等跨平台相关，几乎所有所需要功能的支持和实现。同时官方和社区提供的大量插件，为跨平台的功能开发和实现提供了很大的便捷。

3.完整的封装库及框架

https://github.com/flutter/plugins 官方插件

https://pub.dev/ 这上面有丰富的flutter三方库及评学习成本-开发与部署

• • • Dart语言
    • Flutter相关组件，布局...

Dart的语法个人觉得比较简单，很像是Java+Kotlin的结合体。但是Flutter本着万物皆为Widget的原则，提供了接近30多种不同的布局widget，日常中用的也有如Container、Padding、Center、Align、Row、Column、Stack、ListView等上十种，在布局方面的学习曲线较长，学习成本较高。

4.可执行的流程

flutter自带了三种模板：

• • • Flutter Application： Flutter应用
    • Flutter Plugin：Flutter插件
    • Flutter Package：纯Dart组件

Plugin其实就是一个特殊的Package。Flutter Plugin提供Android或者iOS的底层封装，在Flutter层提供组件功能，使Flutter可以较方便的调取Native的模块。很多平台相关性或者对于Flutter实现起来比较复杂的部分，都可以封装成Plugin。其原理如下

image

消息在client和host之间通过平台通道（platform channels）来进行的，之间的通讯都是异步的。

直接在Android Studio中新建一个Flutter Plugin的工程，当然也可以使用命令行来进行，例如创建一个flutter_text_plugin。

flutter create --org com.example --plugin flutter_text_plugin

如果想支持swift或者kotlin，可以用如下命令进行创建:

flutter create --org com.example --plugin -i swift -a kotlin flutter_text_plugin

5.实际开发中需要注意的问题

1、同一个小模块的page尽量写在一个dart文件中，这样有利于减少dart文件，同理，同一个小模块的model类也写在一个dart文件中。

2、Page命名尽量前面加下划线（eg:_MyMessagePage），代表私有变量，只能在这个dart文件中被调用，增加安全性。

3、自动生成Model之后，记得数组修改为后缀为ListModel，对象修改为Model。

4、小括号后面没有东西了，去掉逗号。中括号后面一般都不要逗号。

5、方法体里面如果只有一行，尽量使用 =>。

6、尽量减少层级

7、两个以上地方一样，就要考虑复用问题。

8、json转model网站：https://caijinglong.github.io/json2dart/index_ch.html9、生成.g文件命令行：flutter packages pub run build_runner build --delete-conflicting-outputs

flutter常用命令行：

1.编译：

flutter packages get: 获取flutter packages包

2.运行：

flutter run （默认为debug环境）

flutter run --release (以release模式运行)

3.安装

帮助：flutter -h 或 flutter --help

诊断flutter：flutter doctor

查看flutter版本号：flutter --version

flutter升级：flutter upgrade

4.打包apk包：

直接打包： flutter build apk

64位-release： flutter build apk --release --target-platform android-arm64

32位-release： flutter build apk --release --target-platform android-arm

6.总结

Flutter提供接近30多种不同的布局widget，日常中用的也有如Container、Padding、Center、Align、Row、Column、Stack、ListView等上十种，在布局方面的学习曲线较长，学习成本较高。

Flutter使用代码方式写布局。对于Android开发者来说，可能会难以接受和适应，在代码类中多了几百行布局代码的情况

目前觉得最困扰的地方在于：使用Flutter进行混合项目开发时，之前原生实现的通用业务基础库（网络库适配，数据库，图片库），通用组件和UI基础库（这个是最耗时的）等，都需要再实现一遍，这和使用Flutter提高开发效率的目标相违背。