flutter系列之开发环境搭建_蓝戒的博客


flutter系列之开发环境搭建

前情概述

在经过flutter起步到入门过程中一番折腾,走过一些坑,积累了一些经验,所以我会把比较优雅的姿势总结出来分享给大家,如果有更好的姿势也可在留言区分享。各位同学请扶稳坐好,马上发车了。

开整

兵预善其器,必先利其器。再动手安装环境之前,先介绍一下flutter的sdk版本管理神器fvm,类似于node的版本管理工具nvm,很多时候我们开发过程中不同项目需要使用的flutter的sdk版本也不一样,多版本快速切换工具就显的非常必要,好了fvm就应运而生了。本文将给大家介绍fvm安装、使用;flutter安装、检查;vscode开发工具的插件安装及环境变量的配置等,创建你的第一个flutter应用。尽可能帮大家避坑,快速的搭建好flutter的开发环境。

fvm的安装

macOS 为例

brew tap leoafarias/fvm
brew install fvm
默认的 flutter SDK 缓存路径为 ~/fvm/versions 在 Mac 上将 .zsh 用作默认 Shell

fvm 环境变量配置:

安装成功之后,就是配置你的环境变量到脚本工具中: 由于mac的脚本工具有 .bash 和 .zsh 两个,一般默认的是 bash,具体切换,可以在这里参看苹果官网的切换方法
  • 如果是
.bash作为默认Shell,可以在终端中使用
open -e .bash_profile 命令打开文件
  • 如果是
.zsh作为默认Shell,可以在终端中使用
open .zshrc 命令打开文件

将下面的命令添加到你的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
Sidekick:一个主要为 Flutter fvm 提供 GUI 的应用程序。
  1. 使用fvm比较简便快捷
  2. 里面有当前的 flutter stable/beta/dev 以及历史版本,方便下载使用
  3. 有一些 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 emulatorss

示例结果:

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开发环境,那祝你顺利发车。

本文固定链接: http://www.webzsky.com/?p=1419 | 蓝戒的博客

cywcd
该日志由 cywcd 于2022年10月29日发表在 前端综合 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: flutter系列之开发环境搭建 | 蓝戒的博客
关键字:

flutter系列之开发环境搭建:等您坐沙发呢!

发表评论


快捷键:Ctrl+Enter
来自的朋友,欢迎您 点击这里 订阅我的博客 o(∩_∩)o~~~
×