前情概述
在经过flutter起步到入门过程中一番折腾，走过一些坑，积累了一些经验，所以我会把比较优雅的姿势总结出来分享给大家，如果有更好的姿势也可在留言区分享。各位同学请扶稳坐好，马上发车了。
开整
兵预善其器，必先利其器。再动手安装环境之前，先介绍一下flutter的sdk版本管理神器fvm，类似于node的版本管理工具nvm，很多时候我们开发过程中不同项目需要使用的flutter的sdk版本也不一样，多版本快速切换工具就显的非常必要，好了fvm就应运而生了。本文将给大家介绍fvm安装、使用；flutter安装、检查；vscode开发工具的插件安装及环境变量的配置等，创建你的第一个flutter应用。尽可能帮大家避坑，快速的搭建好flutter的开发环境。
fvm的安装
macOS 为例
brew tap leoafarias/fvm brew install fvm
fvm 环境变量配置：
- 如果是
- 如果是
将下面的命令添加到你的Shell文件中进行配置即可
export FVM_HOME="$HOME/fvm" export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
fvm的基本使用
1. 查看 fvm 版本
fvm --version
使用fvm，安装某个flutter版本，例如安装 flutter 2.1.5 , flutter版本官网查询
// 查看远程所有历史版本 fvm releases // 安装 fvm install 2.1.5 // 移除 fvm remove 2.1.5
2. 查看fvm当前安装的flutter版本
fvm list
例如我已安装的结果
stable // 最新稳定版 3.3.3 (active) // 项目当前使用版本 2.10.5 (global) // 默认的全局版本
3. 针对不同的项目设置不同的 Flutter 版本
在终端，cd 到项目中，使用如下命令
// 这里设置项目的flutter版本为，3.3.3 fvm use 3.3.3
4. fvm flavor for project
// ~/your_flutter_project.fvm/fvm_config.json
{
"flutterSdkVersion": "1.22.6",
"flavors": {
"stable": "stable",
"dev": "dev"
"production": "1.22.6",
"beta": "beta",
}
}
// 它有以下几种配置：
/* 给 version 起个名，会被记录到 ~/your_flutter_project.fvm/fvm_config.json */
fvm use {version} --flavor {flavor_name}
//list 出当前项目配置的 flavors
fvm flavor {flavor_name}
fvm flavor
- 使用fvm比较简便快捷
- 里面有当前的 flutter stable/beta/dev 以及历史版本，方便下载使用
- 有一些 flutter 的第三方 treding/morst used packages/flutter favorites。
flutter 安装完环境检测
// 检测flutter 环境完整性 // 全局flutter可以直接如下： flutter doctor // fvm 管理的flutter需要如下： fvm flutter doctor
输出的日志列表前[✔]，对勾的就表示通过，如果存在x的就需要安装对应的依赖工具链。
在mac中，xcode 和 Android Studio是必须要安装的。
// 如下示例表示，环境完整没有问题 Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 3.3.3, on macOS 12.6 21G115 darwin-x64, locale zh-Hans-CN) [✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0) [✓] Xcode - develop for iOS and macOS (Xcode 14.0) [✓] Chrome - develop for the web [✓] Android Studio (version 2021.3) [✓] VS Code (version 1.72.2) [✓] VS Code (version 1.55.2) [✓] VS Code (version 1.44.1) [✓] Connected device (3 available) [✓] HTTP Host Availability • No issues found!
flutter 全局环境变量配置
macOS 为例：
# flutter
export FLUTTER_HOME=$FVM_HOME/default
export PATH=${PATH}:$FLUTTER_HOME/bin:$PATH
export PATH=${PATH}:$FLUTTER_HOME/bin/cache/dart-sdk/bin:$PATH
与fvm一起完整的配置
配置国内镜像地址解决下载慢卡的问题，配置全局默认flutter命令路径，缓存路径等。
# fvm
export FVM_HOME="$HOME/fvm"
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
# flutter
export FLUTTER_HOME=$FVM_HOME/default # 全局默认版本，直接使用 flutter命令，其他版本需要加fvm，fvm flutter使用
export PATH=${PATH}:$FLUTTER_HOME/bin:$PATH
export PATH=${PATH}:$FLUTTER_HOME/bin/cache/dart-sdk/bin:$PATH
创建移动设备模拟器
flutter 的编译android app依赖 Android Studio， ios app编译依赖 Xcode。
Android Studio默认可以创建android模拟器，支持创建多个不同类型设备的模拟器。
Xcode默认创建ios模拟器，支持iphone、ipad模拟器。
所以android studio需要安装对应的android sdk及相关工具链。具体可以熟悉对应IDE的使用。
查看模拟器设备
// flutter全局版本使用 flutter emulators // fvm 管理的版本使用 fvm flutter emulators
示例结果：
fvm flutter emulators 2 available emulators: apple_ios_simulator • iOS Simulator • Apple • ios Nexus_5_API_30 • Nexus 5 API 30 • Google • android To run an emulator, run 'flutter emulators --launch <emulator id>'. To create a new emulator, run 'flutter emulators --create [--name xyz]'. You can find more information on managing emulators at the links below: https://developer.android.com/studio/run/managing-avds https://developer.android.com/studio/command-line/avdmanager
启动模拟器
// 启动指定设备名的模拟器设备 flutter emulator --launch 设备名 // 默认启动ios设备模拟器 open -a Simulator //---------其他方式---> // 同时启动所有模拟器设备 flutter run -d all // 指定要启动的模拟器设备 flutter run -d 设备名
vscode开发插件安装
插件扩展中安装flutter 和 dart
创建flutter应用
一切就绪，现在可以创建你的第一个flutter应用啦。
// 创建flutter项目 flutter create 项目名（数字字母+下划线组成）
结束
以上是基于macOS的flutter开发环境搭建示例，在windows上搭建，安装方式，环境变量的配置不同，其他命令的使用都是一样的。
至此，关于flutter的开发环境搭建就介绍完了，如果你正准备搭建flutter开发环境，那祝你顺利发车。
文章评论