flutter系列之开发环境搭建
前情概述
在经过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开发环境,那祝你顺利发车。