【Flutter】macOS从零开始使用FVM搭建Flutter开发环境

article/2025/10/22 15:57:58

前言

本文为个人记录macOS系统使用fvm从零开始搭建flutter开发环境到项目运行的过程,非教程性质,仅供参考,如有疑问或建议,欢迎大家在评论区留言

附上开发设备配置

一、安装vscode

以vscode为编码工具

下载地址:Download Visual Studio Code - Mac, Linux, Windows

下载后解压安装即可

二、安装Xcode和Android Studio

Xcode

在 iOS 真机或者模拟器上运行 Flutter 应用,需要安装Xcode

在 Mac App Store 安装最新稳定版 Xcode

Android Studio

在 安卓 真机或者模拟器上运行 Flutter 应用,需要安装Android Studio

在 Download Android Studio & App Tools - Android Developers

下载安装最新稳定版 Android Studio

 根据自己的mac芯片类型选择安装版本

三、配置IOS模拟器

在终端输入一下指令代码运行iOS模拟器

open -a Simulator

 

PS:

问:终端在哪里? 

答:command键+空格键呼出搜索弹窗,搜索终端,一般为第一个

四、安装Homebrew

Homebrew 是 macOS 的套件管理工具,或称包管理器,可理解成与App Store类似的软件商店,在此用作安装FVM的工具

复制以下指令至终端,回车执行

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

下图为回车后的执行结果

 自行选择源,输入对应序号后回车,输入Y执行脚本

 等待片刻,Homebrew安装完成如下图所示,如果安装失败,换个源再试试

此处提示是否需要安装Core、Cask、services,可自行判断是否安装

PS:

问:Core、Cask、services是什么?

答:Homebrew Core是Homebrew 核心软件仓库

Homebrew cask是在brew 的基础上一个增强的工具,用来安装Mac上的Gui程序应用包(.dmg/.pkg), 比如qq、chrome等。它先下载解压到统一的目录中(/opt/homebrew-cask/Caskroom),省掉了自己去下载、解压、拖拽(安装)等步骤,同样,卸载相当容易与干净。然后再软链到~/Applications/目录下, 非常方便,而且还包含很多在 AppStore 里没有的常用软件。

Homebrew Services是一套可以通过 launchctl来管理安装的服务的套件,macOS使用launchctl命令加载开机自动运行的服务,brew service可以简化lauchctl的操作。

参考资料:

Homebrew Core 源使用帮助 — USTC Mirror Help 文档

Mac上的Homebrew和Homebrew-cask_Schuyler_yuan的博客-CSDN博客

homebrew学习(五)之homebrew cask和homebrew services - 爱码网

下图为选择安装并且安装完成后的显示

此处安装过程笔者的耗时较长~ 


Homebrew安装参考资料:

Homebrew国内如何自动安装(国内地址)(Mac & Linux) - 知乎

Homebrew使用参考资料:

Homebrew 使用详解,macOS 的第二个 Mac App Store - 知乎

五、安装FVM

在终端输入以下指令,将fvm所在库拷贝到本地

brew tap leoafarias/fvm

完成后再输入以下指令,安装fvm

brew install fvm

安装完成如下图

PS:

问:如果要卸载它们要怎样操作?

答:分别输入以下对应指令至终端

brew uninstall fvm
brew untap leoafarias/fvm

 参考资料:

Flutter版本管理器-FVM

六、配置sdk和依赖包资源环境变量

在终端输入以下指令配置中国镜像

export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn 

FLUTTER_STORAGE_BASE_URL指定了flutter sdk下载来源 

export PUB_HOSTED_URL=https://pub.flutter-io.cn

PUB_HOSTED_URL指定了pub get(依赖包)下载来源

PS:国内有可能会出现下载不了的情况,因此可以通过设置该变量指定镜像地址,这里提供上海交大Linux用户组的镜像以作备用

export FLUTTER_STORAGE_BASE_URL=https://mirrors.sjtug.sjtu.edu.cn
export PUB_HOSTED_URL=https://dart-pub.mirrors.sjtug.sjtu.edu.cn

参考资料:

配置 Flutter 中国镜像 – 简书-Mikel

七、配置fvm和flutter环境变量

fvm

export FVM_HOME=$HOME/fvm

flutter

export PATH=$HOME/fvm/default/bin:$PATH

八、flutter sdk版本查询和下载

fvm -h获取fvm所有指令

 fvm releases获取可安装的sdk版本

 fvm install 版本号安装指定版本的sdk

下图以安装3.10.2版本为例

 fvm list查看已安装的sdk版本

因为之前安装了3.10.3版本,所以列表中存在两个版本

fvm global 版本号设置全局默认sdk版本

 设置全局默认sdk版本后可用fvm list查询是否生效

九、flutter自检查

在终端输入flutter doctor来查看当前环境是否需要安装其他的依赖(如果想查看更详细的输出,增加一个 -v 参数即可)

PS:

这个命令会检查你当前的配置环境,并在命令行窗口中生成一份报告。安装 Flutter 会附带安装 Dart SDK,所以不需要再对 Dart 进行单独安装。你需要仔细阅读上述命令生成的报告,看看别漏了一些需要安装的依赖,或者需要之后执行的命令(这个会以 加粗的文本 显示出来)。

如果按照本文的步骤进行,应该会获得以下报告

 如上图所示,有1个报错和2个警告,接下来我们一个一个解决

[✗] Android toolchain - develop for Android devices

[✗] Android toolchain - develop for Android devices✗ Unable to locate Android SDK.Install Android Studio from:https://developer.android.com/studio/index.htmlOn first launch it will assist you in installing the Android SDKcomponents.(or visit https://flutter.dev/docs/get-started/install/macos#android-setupfor detailed instructions).If the Android SDK has been installed to a custom location, please use`flutter config --android-sdk` to update to that location.

打开Android studio,刚安装后首次打开需要配置和下载一些资源,按提示点同意跟下一步就好,

最后走到finish

如下图,选择SDK Manager

复制红框的路径

 在终端输入flutter config --android-sdk 复制的路径

回到下图的界面,在SDK Tools的列表里选择Android SDK command-line Tools,点击右下角OK进行安装

 安装完成后,在终端输入指令flutter doctor --android-licenses,回车执行

 执行后会有几个询问,都输入y之后回车就好

 [!] Xcode - develop for iOS and macOS (Xcode 14.3)

[!] Xcode - develop for iOS and macOS (Xcode 14.3)✗ CocoaPods not installed.CocoaPods is used to retrieve the iOS and macOS platform side's plugincode that responds to your plugin usage on the Dart side.Without CocoaPods, plugins will not work on iOS or macOS.For more info, see https://flutter.dev/platform-pluginsTo install seehttps://guides.cocoapods.org/using/getting-started.html#installation forinstructions.

 在终端中输入以下指令安装cocoapods

sudo gem install cocoapods

执行后有可能会出现以下报错

按照提示在终端执行以下指令

sudo gem install activesupport -v 6.1.7.3

 执行完成后,在终端中再一次输入以下指令 

sudo gem install cocoapods

cocoapods安装完成

 [!] Network resources

[!] Network resources                   ✗ A network error occurred while checking "https://maven.google.com/": Operation timed out

依次找到flutter/packages/flutter_tools/lib/src/http_host_validator.dart文件(可以在访达的搜索栏中先搜索出flutter_tools再逐级进入,这里我有两个sdk版本,所以会有两个flutter_tools)

 用vscode打开http_host_validator.dart文件,将https://maven.google.com/ 修改为https://dl.google.com/dl/android/maven2/

在访达的搜索栏中搜索flutter_tools.snapshot删除该文件,再重复执行本文的第六步,即在终端中再次配置sdk和依赖包资源环境变量

在终端中再次执行flutter doctor进行自检查

显示没有发现问题 

 参考资料:

flutter学习之旅(一)_结成明日奈是我老婆的博客-CSDN博客

十、创建并运行flutter项目

先创建一个文件夹用来存放项目,用vscode打开该文件夹,使用快捷键control + `呼出终端,在终端输入fvm flutter create 项目名后回车创建项目

iOS端运行

在终端执行open -a Simulator打开iOS模拟器(参考本文步骤三),然后在vscode终端中执行cd 项目名进入项目文件夹,最后执行fvm flutter run运行项目

 项目成功运行

安卓端运行

运行Android Studio,打开项目文件夹,点击右上角Device Manager(如下图)

 再点击Create device,根据需求选择设备后点击Next(如果已经创建过设备则可跳过此步骤)

 选择系统,继续点击Next

 点击Finish,完成设备创建

 点击小三角运行设备

 点击Window按钮可单独显示虚拟机窗口

 在vscode终端中执行cd 项目名进入项目文件夹,再执行fvm flutter run运行项目(首次执行花费时间可能会较长)

项目成功运行

 

 本文结束


http://chatgpt.dhexx.cn/article/yGF5EkxP.shtml

相关文章

flutter fvm 版本控制

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EjoR1x37-1626914814179)(https://ducafecat.tech/2021/07/22/translation/version-management-in-flutter/2021-07-22-08-39-22.png)] 老铁记得 转发 ,猫哥会呈现更多 Flutter 好文~~~~ …

Flutter之fvm管理版本

对于flutter SDK版本,相信很多人都有深有体会,项目多了以后,可能每个项目使用的SDK都不同。 我个人的经历是:官方从2.12版本推出空安全版本,由于最初的项目用的空安全之前版本,老项目无法尽数适配空安全&a…

flutter版本控制工具 `FVM`

文章目录 FVM 切换VSCode 的Flutter版本在windows上安装fvm方法一:先安装 choco检查安装是否成功 常用指令接下来安装fvm方法二:pub方式安装 fvmVSCode配置安卓studio Flutter版本切换项目缓存目录列出配置 设置缓存路径配置 常用命令安装删除列出releas…

flutter 版本控制fvm

1先安装 choco powershell 管理员身份运行 不会的话,先打开一个powershell 窗口 ,然后右击任务栏,选择第一个,即可进入 输入命令 Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::Securi…

FVM - Mac上管理 Flutter 多版本的神奇

随着flutter2.0的发布,相信很多同学都是激动的心,颤动的手,想快速尝试一波,做一个吃螃蟹的人,本人也是怀揣着这样的心情,头脑一热的将本地的flutter版本更新到2.0了,螃蟹吃完了,但是…

官方蓄力已久,FVM虚拟机将使IPFS激励层生态迎来加速爆发期?

VM(Virtual Machine)指虚拟机,简单来说就是智能合约的执行引擎。 FVM指IPFS激励层公链上的虚拟机。 10月27日,胡安在万向峰会上做主题演讲时提及FVM,将社区内对于FVM的讨论推上了新顶峰。IPFS激励层官方对虚拟机的部署由来已久,社区方面也在积极讨论,此前在IPFS激励层周年…

FVM初启,Filecoin生态爆发着力点在哪?

Filecoin 小高潮 2023年初,Filecoin发文分享了今年的三项重大变更,分别是FVM、数据计算和检索市场的更新,这些更新消息在发布后迅速吸引了市场的广泛关注。 特别是在3月14日,Filecoin正式推出了FVM,这一变革使得Filec…

一篇弄懂 offsetWidth、offsetHeight、offsetleft、offsetTop和offsetParent的区别!(1)

快速理解offset之间的区别 1.offsetWidth与offsetHeight2.offsetParent3.offsetleft、offsetTop 以下代码均在Chrome浏览器中测试 1.offsetWidth与offsetHeight 1.offsetWidth:元素的布局宽度。   2.offsetHeight:元素的布局高度。   offsetWidth、o…

搞清楚 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

网页可见区域高:document.body.clientHeight 网页正文全文高:document.body.scrollHeight 网页可见区域高(包括边线的高):document.body.offsetHeight 网页被卷去的高:document.body.scrollTop 屏幕分辨率…

使用TS中元素使用offsetHeight,offsetTop,offsetLeft报错

使用ts后,可以使用scroll家族和client家族,但使用offset家族会报错但也能运行 报错 类型“Element”上不存在属性“offsetHeight” 原因:ts中Element类型上没有定义offsetHeight,解决如下:通过as HTMLDivElement解决…

彻底搞懂offsetHeight,clientHeight,scrollHeight,scrollTop,offsetTop

offsetHeight和clientHeight都是获取dom元素自身的高度的,它们之间的区别在于: offsetHeight:获取的高度除了自身高度外,还包含了padding和border clientHeight:获取的高度除了自身高度外,还包含了padding …

正文内容过长时,offsetHeight的获取和监听变化

正文内容过长时,超过4行隐藏,点击全部展开,可视高度(可见高度)offsetHeight的获取和监听变化_无围之解的博客-CSDN博客 核心逻辑代码 mounted() {this.$nextTick(() > {this.h1 this.$refs.div11.offsetHeight;});…

offsetHeight及其他

网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽&a…

clientHeight offsetHeight scrollHeight offsetTop scrollTop

文章目录 各属性详解实现 offsetParent、offsetLeft/offsetTop深度剖析element.offsetParent定义祖先元素中不存在定位元素webkit内核、Firefox下的特殊情况 element.offsetWidth / element.offsetHeight定义 element.offsetLeft / element.offsetTop定义element在正常文档流中…

div之各种高度篇-offsetHeight、clientHeight、scrollHeight、 offsetHeight等等

资历尚浅,真的记不住这些花里胡哨的高度宽度、但是又经常要用到,头大 以下都是自己的理解,如果有误可以提醒下谢谢~ 以上图div为例子 一、offsetHeight = height + border + padding = 342 (返回不带px的数值) 二、clientHeight = height + padding = 340 (返回不…

关于offsetTop与offsetHeight的区别以及使用方法

offsetTop和offsetHeight是设置一个元素的位置和获取圆度大小经常会使用的参数,下面具体讲一下他们的区别于联系: 例如obj为html的一个元素对象, obj.offsetTop指的是obj距离上方或者父级元素(position非static)的位…

clientHeight和offsetHeight

clientHeight:包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素。 offsetHeight:包括padding、border、水平滚动条,但不包括margin的元素的高度。对于in…

PHP 简单封装返回JSON数据接口

前言 本文使用 php 来做一个简单的接口&#xff0c;客户端传入数据&#xff0c;该接口返回 JSON 格式数据。 api.php <?php/* * (PHP简单封装JSON数据接口) * param integer $code 状态码 * param string $message 提示信息 * param array $data 数据 * return json(str…

PHP微信支付接口开发

在开始之前先看下功能 然后选择刷卡支付 输入手机微信钱包的授权码&#xff0c;成功运行 方法步骤&#xff1a; 需要先下一个DEMO&#xff0c;下DEMO的地方有两个&#xff1a; 一个是微信官方开发者文档地址 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter11_1…

Shopify 全套接口开发,产品上传、订单检索、自动履行【PHP接口】开发

PHP 接口: 以下接口为基础实现接口,可以自由调用。 以下基础方法实现了: 产品的自动发布,将产品直接发布到店铺中。 订单的自动检索,将店铺中需要履行的订单全部拉下来。 订单的自动履行(发货),将运单号同步到店铺后台发货。 产品上传推荐使用CSV 方式,即将多个产品…