这篇来写写 Flutter Android 版的安装配置,并运行一个 demo。
目录:
1. 系统要求
要安装并运行 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 Studio 设置 中来安装。
3. Android Studio 设置
Android Studio 安装两个插件:Flutter 和 Dart,Perferences/Plugins/,搜索这两个插件,安装,成功重启 Android Studio。
4. 运行 demo
让我们来体验一下 Flutter:创建第一个项目,运行它,并体验"热重载"。
上述命令创建一个 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 混合开发时会涉及到。
点击绿色按钮运行:
看看 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 包到我的手机设备。
Flutter 可以通过 热重载 (hot reload) 实现快速的开发周期,热重载就是无需重启应用程序就能实时加载修改后的代码,并且不会丢失状态 (如果是一个 web 开发者,那么可以认为这和 webpack 的热重载是一样的)。简单的对代码进行更改,然后告诉 IDE 或命令行工具你需要重新加载 (点击 reload 按钮),你就会在你的设备或模拟器上看到更改。
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.