跨平台技术篇 - Flutter 安装配置

这篇来写写 Flutter Android 版的安装配置，并运行一个 demo。

系统要求
获取 Flutter SDK
Android Studio 设置
运行 demo

1. 系统要求

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

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

2. 获取 Flutter SDK

git clone -b stable https://github.com/flutter/flutter.git

clone 完目录是这样的：

添加 Flutter 相关工具 (Flutter 的 bin 目录) 到 path 中：

open -e .bash_profile

# export PATH=$PATH:/Users/kuangzhongwen/Documents/flutter/bin

source .bash_profile

环境变量配置可以参考：https://www.cnblogs.com/quickcodes/p/5398709.html。接着运行 flutter doctor：

flutter doctor

该命令检查您的环境并在终端窗口中显示报告。Dart SDK 已经在捆绑在 Flutter 里了，没有必要单独安装 Dart。仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务 (以粗体显示)。过程中报错了：

ailed to retrieve the Dart SDK from: https://storage.googleapis.com/flutter_infra/flutter/3757390fa4b00d2d261bfdf5182d2e87c9113ff9/dart-sdk-darwin-x64.zip
If you're located in China, please see this page:
  https://flutter.io/community/china

查看 https://flutter.io/community/china，需要配置一下临时镜像：

MacBook-Pro-3:~ kuangzhongwen$ export PUB_HOSTED_URL=https://pub.flutter-io.cn
MacBook-Pro-3:~ kuangzhongwen$ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

可以下载了，最终报告是这样的：

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.2.1, on Mac OS X 10.13.6 17G5019, locale en-CN)
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    ✗ Android license status unknown.
[✗] iOS toolchain - develop for iOS devices
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
    ✗ libimobiledevice and ideviceinstaller are not installed. To install with Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        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 (version 3.3)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] IntelliJ IDEA Ultimate Edition (version 2018.1.5)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] Connected device (1 available)

! Doctor found issues in 4 categories.

抛开其他平台和 IDE，只看 Android Studio 的：

Android license status unknown.
Flutter plugin not installed.
Dart plugin not installed.

这些都会在下一步 Android Studio 设置 中来安装。

3. Android Studio 设置

Android Studio 安装两个插件：Flutter 和 Dart，Perferences/Plugins/，搜索这两个插件，安装，成功重启 Android Studio。

4. 运行 demo

让我们来体验一下 Flutter：创建第一个项目，运行它，并体验"热重载"。

4.1 创建新应用

选择 File>New Flutter Project。
选择 Flutter application 作为 project 类型, 然后点击 Next。
输入项目名称 (如 flutter_app)，然后点击 Next。
点击 Finish。
等待 Android Studio 安装 SDK 并创建项目。

上述命令创建一个 Flutter 项目，项目名为 flutter_app，其中包含一个使用 Material 组件的简单演示应用程序。在项目目录中，你的应用程序的代码位于 lib/main.dart。

在终端中，运行 flutter devices 命令以验证 Flutter 识别你连接的 Android 设备：

MacBook-Pro-3:~ kuangzhongwen$ flutter devices
1 connected device:

HUAWEI NXT DL00 • DLQ0216414001483 • android-arm64 • Android 8.0.0 (API 26)

第一次创建项目，等待许久，看看建立好的项目目录：

可以看到，基本目录和平时的 Android 项目差不多，不过多了一个 ios 目录，以及一些配置。多了一个 lib 包，应用程序的代码位于 lib/main.dart。依赖方面除了 Android 的 API，嗨多了 Dart 和 Flutter 的工具包。这些细节先不研究，后面学习原理以及原生 Android 与 Flutter 混合开发时会涉及到。

4.2 运行

点击绿色按钮运行：

看看 Android Studio 控制面板输出：

Launching lib/main.dart on HUAWEI NXT DL00 in debug mode...
Initializing gradle...
Resolving dependencies...
Running Gradle task 'assembleDebug'...
Built build/app/outputs/apk/debug/app-debug.apk.
Installing build/app/outputs/apk/app.apk...
Flutter is taking longer than expected to report its views. Still trying...

以调试模式加载 lib.main.dart 到我的手机设备，初始化 gralde，解析依赖，然后打 debug 包，安装 debug 包到我的手机设备。

4.3 体验热重载

Flutter 可以通过热重载 (hot reload) 实现快速的开发周期，热重载就是无需重启应用程序就能实时加载修改后的代码，并且不会丢失状态 (如果是一个 web 开发者，那么可以认为这和 webpack 的热重载是一样的)。简单的对代码进行更改，然后告诉 IDE 或命令行工具你需要重新加载 (点击 reload 按钮)，你就会在你的设备或模拟器上看到更改。

1. 改一下："You have pushed the button this many times:" 这句话 -> "You have pushed the button this many times (2019):"。
2. 不要按 "Stop" 按钮，让你的应用继续运行。
3. 要查看你的更改，只需调用 Save All (cmd-s / ctrl-s)，或点击热重载按钮 (带有闪电⚡️图标的按钮)。

你就会立即看到更新后的字符串，但是显示与理想总是有差距：

无法正常热加载，AndroidStudio ⚡️按钮不可点击。这是因为代理的问题，需要修改环境变量：
vim /etc/profile
# 添加一行
# export no_proxy="localhost,127.0.0.1"
# 保存
然后重启 Android Studio。

再修改，就能看到闪电按钮亮了：

点击闪电按钮，控制台输出：

Performing hot reload...
Syncing files to device HUAWEI NXT DL00...
Reloaded 1 of 432 libraries in 1,067ms.

跨平台技术篇 - Flutter 安装配置

猜你喜欢