安装Flutter环境

淮城一只猫 • • 编程技术 • 阅读量 0 次 • 评论量 0 个

简介

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文件下的地址更换和上面一样即可。

喵~