引言
本篇将介绍我在学习有关
Flutter
时的一些笔记分享。
Flutter是 Google 的移动UI框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。
为什么使用 Flutter :
快速开发 - 毫秒级的热重载,修改后,您的应用界面会立即更新。使用丰富的、完全可定制的widget在几分钟内构建原生界面。
富有表现力和灵活的UI - 快速发布聚焦于原生体验的功能。分层的架构允许您完全自定义,从而实现难以置信的快速渲染和富有表现力、灵活的设计。
富有表现力和灵活的UI - Flutter包含了许多核心的widget,如滚动、导航、图标和字体等,这些都可以在iOS和Android上达到原生应用一样的性能。
获取 Flutter SDK
下载完成后解压到任意位置。
安装 Android Studio
Download Android Studio and SDK tools | Android Developers
Android Studio
将用于下载 Android SDK
与 Flutter
&& Dart
两个插件。
插件的下载在 Android Studio 的 Setting - Plugins中,搜索 Flutter 并点击 Install,期间会提示捆绑下载 Dart 插件,两个都下载即可。
Windows
将刚才解压的 flutter 文件路径添加到系统变量的 Path 变量中。
- 例:D:\flutter\bin
配置 Flutter 环境变量
在系统变量中新建两个值。
PUB_HOSTED_URL = https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL = https://storage.flutter-io.cn
配置 Android SDK 环境变量
SDK 下载完毕后,在系统变量中新建 ANDROID_HOME 变量,将 SDK 的地址填入即可。
- ANDROID_HOME = D:\Android\Android SDK
配置 Android toolchain
Android toolchain
将用于证书许可
。
将 Android SDK 配置到环境变量中后,终端执行:
flutter doctor --android-licenses
根据提示,输入 y ,直到全部许可都得到授权。
flutter doctor
所有配置完成后,终端执行
flutter doctor
最终结果如下,
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, 2.2.0-10.3.pre, on Microsoft Windows [Version 10.0.19043.1023], locale zh-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Android Studio (version 4.2.1)
[✓] IntelliJ IDEA Ultimate Edition (version 2021.1)
[✓] Connected device (2 available)
! No issues found!
Apple macOS
通过终端编辑配置文件
这里使用 vim 进行编辑。
vim ~/.bash_profile
配置 Flutter 环境变量
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
# 这里的 hackintosh 改为你的 macOS 用户名
export PATH=/Users/hackintosh/flutter/bin:$PATH
配置 Android SDK 环境变量
# 这里的 hackintosh 改为你的 macOS 用户名
export ANDROID_HOME="/Users/hackintosh/Library/Android/sdk"
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
保存上述配置
source ~/.bash_profile
配置 Android toolchain
Android toolchain
将用于证书许可
。
将 Android SDK 配置到环境变量中后,终端执行:
flutter doctor --android-licenses
根据提示,输入 y ,直到全部许可都得到授权。
flutter doctor
所有配置完成后,终端执行
flutter doctor
最终结果如下,
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, 2.2.0, on Mac OS X 10.13.6 17G14042 darwin-x64, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[!] Xcode - develop for iOS and macOS
✗ 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
sudo xcodebuild -runFirstLaunch
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.2)
[✓] IntelliJ IDEA Ultimate Edition (version 2021.1.1)
[✓] VS Code (version 1.56.2)
[!] Proxy Configuration
! NO_PROXY is not set
[✓] Connected device (1 available)
! Doctor found issues in 2 categories.
由于我的机器是黑苹果,且止步于 macOS 10.13.6,无法向上升级(10.14以上不支持 Nvidia 显卡),无法下载 Xcode。
有能力的读者可以购买白果,或者自行组一台 AMD 的黑苹果,即可解决 Xcode 的系统版本限制问题。