Flutter的安装和配置

• Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面, 并且是未来新操作系统Fuchsia的默认开发套件
• 在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的—-Flutter中文网
• Flutter同时支持Windows、Linux和MacOS操作系统作为开发环境，并且在Android Studio和VS Code两个IDE上都提供了全功能的支持
• Flutter以Dart语言为开发语言(之后的文章会介绍)

跨平台框架

• 在Flutter诞生之前，已经有许多跨平台UI框架的方案，比如基于WebView的Cordova、AppCan等，还有使用HTML+JavaScript渲染成原生控件的React Native、Weex等(虽然我只用过React Native)
• 基于WebView的框架
  • 优点很明显，它们几乎可以完全继承现代Web开发的所有成果（丰富得多的控件库、满足各种需求的页面框架、完全的动态化、自动化测试工具等等），当然也包括Web开发人员，不需要太多的学习和迁移成本就可以开发一个App
  • 缺点也很致命, 在对体验和性能有较高要求的情况下, WebView的渲染效率和JavaScript执行性能太差。再加上Android各个系统版本和设备厂商的定制，很难保证所在所有设备上都能提供一致的体验
• React Native一类的框架
  • 将最终渲染工作交还给了系统，虽然同样使用类HTML+JS的UI构建逻辑，但是最终会生成对应的自定义原生控件，以充分利用原生控件相对于WebView的较高的绘制效率
  • 同时这种策略也将框架本身和App开发者绑在了系统的控件上，不仅框架本身需要处理大量平台相关的逻辑，随着系统版本变化和API的变化，开发者可能也需要处理不同平台的差异，甚至有些特性只能在部分平台上实现，这样框架的跨平台特性就会大打折扣
• Flutter框架
  • Flutter则开辟了一种全新的思路，从头到尾重写一套跨平台的UI框架，包括UI控件、渲染逻辑甚至开发语言
  • Flutter使用自己的高性能渲染引擎来绘制widget, Flutter使用C、C ++、Dart和Skia（2D渲染引擎）构建
  • 在iOS上，Flutter引擎的C/C ++代码使用LLVM编译，任何Dart代码都是AOT编译为本地代码的，Flutter应用程序使用本机指令集运行（不涉及解释器）
  • 而在Android下，Flutter引擎的C/C ++代码是用Android的NDK编译的，任何Dart代码都是AOT编译成本地代码的，Flutter应用程序依然使用本机指令集运行（不涉及解释器）

Flutter安装

• 可参考官网的安装Flutter, 支持Windows、Linux和MacOS操作系统
• 我使用的系统是MacOS操作系统

系统要求

要安装并运行Flutter，您的开发环境必须满足以下最低要求:

• 操作系统: macOS (64-bit)
• 磁盘空间: 700 MB (不包括Xcode或Android Studio的磁盘空间）.
• 工具: Flutter依赖下面这些命令行工具.
  • bash, mkdir, rm, git, curl, unzip, which

获取Flutter SDK

下载SDK

• 去Flutter官网下载其最新可用的安装包，转到下载页
• 注意，Flutter的渠道版本会不停变动，请以Flutter官网为准
• 另外，在中国大陆地区，要想正常获取安装包列表或下载安装包，可能需要翻墙，读者也可以去Flutter github项目下去下载安装包，转到下载页

环境配置

• 解压SDK并把解压好的文件全部放在你想要放置的位置, 建议和其他开发语言的SDK放置在一起, 比如~/Library/Flutter
• 为了方便后续使用，需要将项目根目录下bin路径加入环境变量PATH中
  • 编辑器打开~/.bash_profile文件, 添加如下

1
2
3

# Flutter 相关配置
# xxx是你自己的Flutter文件夹路径
export PATH=/xxx/Flutter/bin:$PATH

由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到用户环境变量中：

1
2

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

此镜像为临时镜像，并不能保证一直可用，读者可以参考详情请参考 Using Flutter in China 以获得有关镜像服务器的最新动态

1
2

# 执行命令
source ~/.bash_profile

1
2

# 执行下面命令
echo $PATH

如果安装成功, 会输出类似/xxx/Flutter/bin的路径

安装开发工具

安装Android Studio

• 下载并安装Android Studio
• 启动Android Studio，然后执行Android Studio安装向导, 这将安装最新的Android SDK，Android SDK平台工具和Android SDK构建工具, 这是Flutter开发Android应用时所必备的
• 安装完成后, 配置一个需要的Android模拟器

安装Xcode

在App Store搜索最新版本Xcode下载安装即可

VSCode

开发IDE，直接去官网下载安装即可

环境配置检测

通过flutter doctor命令来执行Flutter的安装程序了，经过一段时间的下载和安装，Flutter会输出安装结果(时间可能会比较久)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.5.1, on Mac OS X 10.13.5 17F77, locale en-NZ)
[!] Android toolchain - develop for Android devices (Android SDK 26.0.2)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[!] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
    ✗ Missing Xcode dependency: Python module "six".
    Install via 'pip install six' or 'sudo easy_install six'.
    ✗ libimobiledevice and ideviceinstaller are not installed. To install, run:
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
        For more info, see https://flutter.io/platform-plugins
    To install:
        brew install cocoapods
        pod setup
[✓] Android Studio
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] Android Studio (version 3.0)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] IntelliJ IDEA Ultimate Edition (version 2017.1.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.24.1)
[!] Connected devices
    ! No devices available

! Doctor found issues in 5 categories.

• 其中前面有[✓]标识的是已经安装成功的
• [!]标识是需要安装或者更新的
• 下面介绍需要安装的编辑器及其配置

开发工具

运行flutter doctor命令可看到相关信息

• Flutter的版本和信息
• Flutter运行所需的Android工具链，有些许可证没有接受，输入提示命令，输入y确认
• Flutter运行所需的iOS工具链不满足
• AS、IDEA的Flutter插件没有安装，所以需要安装，因此需要配置AS或IDEA
• 有可用的连接设备

Android Studio

• 打开插件选择项Preferences > Plugins
• 选择Browse repositories，搜索Flutter插件并安装(同时自动安装Dart插件)
• 插件安装完成后, 重启Android Studio后插件生效

这时候在命令行运行flutter doctor，可以看到Android Studio已经好了

1

[✓] Android Studio (version 3.2)

iOS配置

• 在进行iOS配置之前, 首先需要安装CocoaPods, 可自行百度
• 安装CocoaPods后, 在执行flutter doctor命令, 可能会出现如下问题
• 此时在终端中依次执行出现的命令即可

1
2
3
4
5
6
7
8

[!] iOS toolchain - develop for iOS devices

# 可能出现的命令, 若出现, 依次执行出现的命令即可, 未出现的可不执行
$ brew install --HEAD usbmuxd
$ brew link usbmuxd
$ brew install --HEAD libimobiledevice
$ brew install ideviceinstaller ios-deploy cocoapods
$ pod setup

这时候在命令行运行flutter doctor，可以看到iOS相关配置也好了

VSCode插件

在扩展中搜索Flutter和Dart安装后, 重载即可

配置完成

此刻, 在运行flutter doctor命令, 应该就没有问题了

1
2
3
4
5
6
7
8
9
10

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.0.0, on Mac OS X 10.14.3 18D109, locale
    zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK 28.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.1)
[✓] Android Studio (version 3.0)
[✓] VS Code (version 1.30.2)
[✓] Connected device (1 available)

• No issues found!

创建Flutter应用

CSCode创建

中文版: vscode -> 查看 -> 命令面板 -> Flutter: new project -> 输入项目名称

项目名称不支持大写字母

Android Studio创建

打开Android studio就可以看见Flutter工程模板如下

命令创建

1

flutter create helloflutter

这里创建了一个名为helloflutter的Dart package

• 要创建插件包，请使用--template=plugin参数执行flutter create
• 使用--org选项指定您的组织，并使用反向域名表示法。该值用于生成的Android和iOS代码中的各种包和包标识符。

1

flutter create --org com.example --template=plugin helloflutter

• 默认情况下，插件项目针对iOS代码使用Objective-C，Android代码使用Java。
• 如果您更喜欢Swift或Kotlin，则可以使用-i或-a 为iOS或Android指定语言。例如：

1

flutter create --template=plugin -i swift -a kotlin helloflutter

参考文章

• Flutter的原理及美团的实践
• Flutter中文网

初识Flutter, 总结的可能也不准确, 不足之处还望海涵, 后续会继续优化相关文章