在 macOS 上安装 Flutter SDK
为 Flutter 设定镜像配置(解决被墙导致的失败问题)
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
获取 Flutter SDK
mkdir ~/development
cd ~/development
git clone https://github.com/flutter/flutter.git
export PATH="$PATH:`pwd`/flutter/bin"
运行 flutter doctor 命令(检查 Flutter SDK 安装状态)
flutter doctor
可能会有如下输出:
Doctor summary (to see all details, run flutter doctor -v):
[?] Flutter (Channel dev, v1.14.6, on Mac OS X 10.15.3 19D76, locale zh-Hans-CN)
[?] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[?] Xcode - develop for iOS and macOS (Xcode 11.3.1)
[?] Android Studio (version 3.5)
[!] IntelliJ IDEA Ultimate Edition (version 2019.3.2)
? Flutter plugin not installed; this adds Flutter specific functionality.
? Dart plugin not installed; this adds Dart specific functionality.
[?] VS Code (version 1.41.1)
[!] Connected device
! No devices available
! Doctor found issues in 2 categories.
? flutter git:(dev)
配置环境变量让其永久生效
- 在.bash_profile文件中增加下列这行命令
vi ~/.bash_profile
新增下面内容
export PATH=$PATH:$HOME/development/flutter/bin
- 运行 source $HOME/.bash_profile 来刷新当前命令行窗口
source $HOME/.bash_profile
- 通过运行以下命令来验证 flutter/bin 文件夹是否已经添加到 PATH 环境变量中:
echo $PATH
验证 flutter 命令是否可用,可以执行下面的命令检测:
which flutter
平台配置
macOS 可以允许开发 iOS、Android 和 Web(技术预览版正式发布)三个平台的 Flutter 应用,你可以任选一个平台完成初始配置,以此来搭建并运行起来你的第一个 Flutter 应用。
设置 iOS 开发环境
安装 Xcode
- 在App Store中安装 Xcode
- 通过在命令行中运行以下命令来配置 Xcode command-line tools:
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
- 运行一次 Xocde 或者通过输入命令 sudo xcodebuild -license 来确保已经同意 Xcode 的许可协议。
配置 iOS 模拟器
open -a Simulator
创建并运行一个简单的 Flutter 应用
- 通过运行以下命令来创建一个新的 Flutter 应用:
flutter create my_app
- 上述命令创建了一个 my_app 的目录,包含了 Flutter 初始的应用模版,切换路径到这个目录内:
cd my_app
- 确保模拟器已经处于运行状态,输入以下命令来启动应用:
flutter run
设置 Android 开发环境
安装 Android Studio
- 下载并安装 Android Studio。
- 运行 Android Studio,并进入 ‘Android Studio Setup Wizard’,这会安装最新的 Android SDK, Android SDK Platform-Tools 以及 Android SDK Build-Tools,这些都是在开发 Android Flutter 应用时所需要的。
配置环境变量
- 在.bash_profile文件中增加下列这行命令
vi ~/.bash_profile
新增下面内容
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/emulator
- 运行 source $HOME/.bash_profile 来刷新当前命令行窗口
source $HOME/.bash_profile
- 如果你使用的是ZSH Shell或者是macOS Catalina 以及之后的操作系统需要修改 $HOME/.zshrc 文件
在.zshrc中新增下面一行
source ~/.bash_profile
新增后执行
source $HOME/.zshrc
这是因为macOS Catalina默认使用 Z Shell。
使用 Android 真机
在 Android 设备上运行或测试 Flutter 应用之前,你需要一个运行 Android 4.1(API 版本 16)或者更高的设备。
- 在设备上打开 Developer options 和 USB debugging 选项,你可以在 Android documentation 上查看更详细的方法介绍。
- 通过 USB 接口连接手机和电脑,如果在设备上弹出需要授权弹窗,允许授权以便让电脑能够访问你的开发设备。
- 在命令行中,使用 flutter devices 命令来确保 Flutter 能够识别出你所连接的 Android 设备。
- 默认情况下,Flutter 会使用当前版本 adb 工具所依赖的 Android SDK 版本,如果你想让 Flutter 使用别的 Android SDK,你可以通过设置 ANDROID_HOME 环境变量来达到这个目的。
使用 Android 模拟器
根据以下步骤来将 Flutter 应用运行或测试于你的 Android 模拟器上:
- 激活机器上的 VM acceleration 选项。
- 启动 Android Studio > Tools > Android > AVD Manager,然后选择 Create Virtual Device 选项。(只有在 Android 项目中才会显示 Android 子选项。)
- 选择相应的设备并选择 Next 选项。
- 选择一个或多个你想要模拟的 Android 版本的系统镜像,然后选择 Next 选项。推荐选择 x86 或者 x86_64 镜像。
- 在 Emulated Performance 下选择 Hardware - GLES 2.0 选项来开启 硬件加速。
- 确保 AVD 选项配置正确,并选择 Finish 选项。想要查看上述步骤的更多详细信息,请查看 Managing AVDs 页面。
- 在 Android Virtual Device Manager 中,点击工具栏中的 Run 选项,模拟器会启动并为你所选择的系统版本和设备显示出相应的界面。
设置 Web开发环境
安装 Chrome浏览器
调试 web 应用需要 Chrome 浏览器,可直接下载后安装。
开启 Web 支持
在 1.12 版本之后,Flutter 已经有了对 Web 应用的早期支持,但你目前需要运行 Flutter 的 beta 频道。
执行如下命令
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
flutter channel beta
flutter upgrade
flutter config --enable-web
命令执行完毕会创建一个 ~/.flutter_settings 的配置文件:
{
"enable-web": true
}
一旦开启了 Web 支持,运行 flutter devices 命令会输出一个名为 Chrome 的设备信息。
? ~ flutter devices
2 connected devices:
Chrome ? chrome ? web-javascript ? Google Chrome 79.0.3945.130
Web Server ? web-server ? web-javascript ? Flutter Tools
本文暂时没有评论,来添加一个吧(●'◡'●)