简介

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。

英文官网网站:https://flutter.io/docs
中文官网网站:https://flutter-io.cn

主流框架对比

  • Cordova, MUI, ApiCloud:个人认为Flutter可以完胜了,因为Cordova等还是基于网页技术进行包装,利用插件的形式开发移动应用的,就这一点。无论是性能还是体验,Flutter都可以完胜了。
  • RN(React Native):RN的效率由于是将View编译成了原生View,所以效率上要比基于Cordova的HTML5高很多,但是它也有效率问题,RN的渲染机制是基于前端框架的考虑,复杂的UI渲染是需要依赖多个view叠加.比如我们渲染一个复杂的ListView,每一个小的控件,都是一个native的view,然后相互组合叠加.想想此时如果我们的list再需要滑动刷新,会有多少个对象需要渲染.所以也就有了前面所说的RN的列表方案不友好。
  • Flutter:吸收了前两者的教训之后,在渲染技术上,选择了自己实现(GDI),由于有更好的可控性,使用了新的语言Dart,避免了RN的那种通过桥接器与Javascript通讯导致效率低下的问题,所以在性能方面比RN更高一筹;有经验的开发者可以打开Android手机开发者选项里面的显示边界布局,发现Flutter的布局是一个整体.说明Flutter的渲染没用使用原生控件进行渲染。

Flutter案例:Github

安装环境

  • 安装JDK环境(不再描述安装过程): JAVA_HOME: JDK安装位置PATH: %JAVA_HOME%\bin
  • 安装Flutter环境:根据环境安装
  • 安装Android环境
  • 安装iOS环境(MacOS系统)

安装Flutter环境:

根据上述链接下载平台所需要的Flutter SDK文件解压放在硬盘上,在配置之前需要特定配置下镜像环境:

所以需要在环境变量添加(Windows 10环境):
变量名:PUB_HOSTED_URL
变量值:https://pub.flutter-io.cn

变量名:FLUTTER_STORAGE_BASE_URL
变量值:https://storage.flutter-io.cn

同样把{flutter path to}\bin加入你的变量环境:例如我的是D:\Development\Flutter\bin,配置好在终端输入:flutter --version,有版本号反馈则安装成功。

变量名:FLUTTER_HOME

变量值:flutter安装包地址,例如:``D:\Development\Flutter`

path变量名继续添加变量值:%FLUTTER_HOME%\bin

然后打开Flutter SDK目录下的flutter_console.bat执行命令或者直接打开终端执行命令:

flutter doctor
 
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel beta, v0.10.2, on Microsoft Windows [Version 10.0.17763.55], locale zh-CN)
[X] Android toolchain - develop for Android devices
    X Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.io/setup/#android-setup for detailed instructions).
      If Android SDK has been installed to a custom location, set $ANDROID_HOME to that location.
      You may also want to add it to your PATH environment variable.
 
[!] Android Studio (not installed)
[!] Connected device
    ! No devices available
 
! Doctor found issues in 3 categories.

从返回信息可以看出Flutter安装成功了。下面继续按照Android相关环境。

安装Android环境:

下载Android Studio: https://developer.android.com/studio/

安装SDK完毕后到设置-插件库安装flutter插件和dart插件,以及环境变量:

ANDROID_HOME: sdk安装位置

Android证书:
如果再执行flutter doctor出现问题的话,执行:

flutter doctor --android-licenses

进行安装证书。

如果出现提示Android Studio (not installed),可以尝试:

flutter config --android-studio-dir="D:\JetBrains\Android Studio" #"D:\JetBrains\Android Studio"修改为你的IDE安装位置

同样需要配置好Android ADB环境,这里不再描述。

Gradle构建错误解决

绝大部分Gradle错误都是网络引起的,所以只需要加上一个镜像地址即可,修改掉项目下的android目录下的build.gradle文件,把google()jcenter()这两行去掉,修改如下:

maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }

同样把flutter\packages\flutter_tools\gradle文件下的地址更换和上面一样即可。