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

这篇具有很好参考价值的文章主要介绍了【Flutter】macOS从零开始使用FVM搭建Flutter开发环境。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

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

附上开发设备配置

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

一、安装vscode

以vscode为编码工具

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

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

下载后解压安装即可

二、安装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

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

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

三、配置IOS模拟器

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

open -a Simulator

 fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

PS:

问:终端在哪里? 

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

四、安装Homebrew

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

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

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

下图为回车后的执行结果

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

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

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

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

此处提示是否需要安装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 - 爱码网

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

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

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


Homebrew安装参考资料:

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

Homebrew使用参考资料:

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

五、安装FVM

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

brew tap leoafarias/fvm

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

brew install fvm

安装完成如下图

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

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安装,Flutter,macos,flutter,xcode,vscode,android studio

 fvm releases获取可安装的sdk版本

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

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

下图以安装3.10.2版本为例

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

 fvm list查看已安装的sdk版本

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

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

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

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

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

九、flutter自检查

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

PS:

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

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

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

 如上图所示,有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.html
      On first launch it will assist you in installing the Android SDK
      components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup
      for 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

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

复制红框的路径

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

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

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

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

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

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

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

 执行后会有几个询问,都输入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 plugin
        code 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-plugins
      To install see
      https://guides.cocoapods.org/using/getting-started.html#installation for
      instructions.

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

sudo gem install cocoapods

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

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

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

sudo gem install activesupport -v 6.1.7.3

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

sudo gem install cocoapods

cocoapods安装完成

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

 [!] 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)

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

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

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

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

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

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

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

显示没有发现问题 

 参考资料:

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

十、创建并运行flutter项目

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

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

iOS端运行

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

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

 项目成功运行

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

安卓端运行

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

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

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

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

 选择系统,继续点击Next

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

 点击Finish,完成设备创建

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

 点击小三角运行设备

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

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

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

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

fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

项目成功运行

 fvm安装,Flutter,macos,flutter,xcode,vscode,android studio

 本文结束文章来源地址https://www.toymoban.com/news/detail-707904.html

到了这里,关于【Flutter】macOS从零开始使用FVM搭建Flutter开发环境的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • MacOS 配置 Fvm环境

    系统环境:MacOS 13,M1芯片 1. 安装HomeBrew: 2. 使用brew安装Fvm: 3.配置FVM_HOME: 4. 安装flutter SDK 查看远程flutter 发布的SDK 报错信息: Failed to retrieve the Flutter SDK from: https://flutter-io.cn/flutter_infra_release/releases/releases_macos.json Fvm will use the value set on env FLUTTER_STORAGE_BASE_URL to check versio

    2024年02月07日
    浏览(42)
  • 从零开始搭建Springboot开发环境(Java8+Git+Maven+MySQL+Idea)

    所谓万事开头难,对于初学Java和Springboot框架的小伙伴往往会花不少时间在开发环境搭建上面。究其原因其实还是不熟悉,作为在IT界摸爬滚打数年的老司机,对于各种开发环境搭建已经了然于胸,自己当年也是这么过来的。 今天我就毕其功于一役,解放大家的时间,让凡人

    2024年04月17日
    浏览(83)
  • 【环境搭建】MacOS系统M1芯片从零开始安装torch torch-geometric(PyG) torch-sparse torch-scatter步骤详解、配置图神经网络(GNN)训练环境教程

    前言:实际上只装PyTorch或者torch不会遇到什么问题,但是torch-geometric、torch-scatter、torch-sparse在M1 chip的Mac上非常难安装( PyG DocumentationInstallation 里注明了“Conda packages are currently not available for M1/M2/M3 macs”)。博主试错过程中遇到了很多无解的bug,还把conda搞炸了,最终不得不

    2024年02月02日
    浏览(45)
  • FVM管理Flutter 环境

    开发中,会经常切换不同版本的 Flutter 环境。使用 FVM(Flutter Version Manager )来进行 Flutter 版本切换是一个很不错的选择。 下面=从安装FVM、环境配置、切换Flutter这几个主要步骤总结下 FVM 的使用 一、安装 homebrew 网址:https://brew.sh/ ,按照步骤操作即可 安装成功后: 1、设置当

    2024年03月12日
    浏览(62)
  • flutter环境之安装FVM

    1:  一定要安装 choco 用管理员身份运行 cmd | Powershell @powershell -NoProfile -ExecutionPolicy unrestricted -Command \\\"iex ((new-object net.webclient).DownloadString(\\\'https://chocolatey.org/install.ps1\\\'))\\\" SET PATH=%PATH%;%ALLUSERSPROFILE%chocolateybin 否则不好全局管理FVM,全部输入Y 2:  choco install fvm 3:  fvm config --cache

    2024年02月09日
    浏览(37)
  • MacOS搭建Flutter 环境

    第一步:官网下载对应版本的flutter SDK MacOS有两个版本:x64和 arm64 查看命令:uname -a 官网链接:Flutter SDK archive | Flutter 下载成功后会自动解压,把Flutter文件放到自己指定的位置。 第二步:打开控制进行临时配置 第三步:进入自己的工具(Android studio/vs code),在设置中配置flu

    2024年02月07日
    浏览(54)
  • Windows/macOS使用VSCode搭建C/C++的开发/Debug环境

    本文面向的对象是初次接触搭建C语言开发环境的学生或编程爱好者,以及想脱离诸如VC++6.0等过时开发工具从而转用VScode的人群 本文内容较多,篇幅较长,可按照需要选择阅读,文中如有纰漏,欢迎斧正。 我郑重承诺下面会是一篇极为详细的教程: 目录 一、安装并配置VSc

    2024年02月08日
    浏览(52)
  • Spring Cloud--从零开始搭建微服务基础环境【四】

    😀前言 本篇博文是关于Spring Cloud–从零开始搭建微服务基础环境【四】,希望你能够喜欢 🏠个人主页:晨犀主页 🧑个人简介:大家好,我是晨犀,希望我的文章可以帮助到大家,您的满意是我的动力😉😉 💕欢迎大家:这里是CSDN,我总结知识的地方,欢迎来到我的博客

    2024年02月09日
    浏览(46)
  • Spring Cloud--从零开始搭建微服务基础环境【二】

    😀前言 本篇博文是关于Spring Cloud–从零开始搭建微服务基础环境【二】,希望你能够喜欢 🏠个人主页:晨犀主页 🧑个人简介:大家好,我是晨犀,希望我的文章可以帮助到大家,您的满意是我的动力😉😉 💕欢迎大家:这里是CSDN,我总结知识的地方,欢迎来到我的博客

    2024年02月10日
    浏览(53)
  • Spring Cloud--从零开始搭建微服务基础环境【三】

    😀前言 本篇博文是关于Spring Cloud–从零开始搭建微服务基础环境【三】,希望你能够喜欢 🏠个人主页:晨犀主页 🧑个人简介:大家好,我是晨犀,希望我的文章可以帮助到大家,您的满意是我的动力😉😉 💕欢迎大家:这里是CSDN,我总结知识的地方,欢迎来到我的博客

    2024年02月09日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包