简单记录 mac 中 flutter 环境的搭建,以及一些问题

搭建flutter开发环境,折腾了我好几个小时才弄好,在这里就简单记录一下搭建的过程,以及其中遇到的一些报错问题,供后人参考参考。

起始

打开 flutter官网 选择 macOS。建议先不要按官网走,我建议是先下 Xcode,要是不需要 ios 开发也可以不下。

搭建

下载 Xcode

我这里建议先下载 Xcode (用于ios端开发),要是你的 mac 版本支持,可以直接打开 App Store 然后获取。

但我这里 mac 是 12.3.1,不能直接获取;

  • 接下来的网页大多都要开启VPN了。

这时可以打开 该网址 查看 mac 版本对应的 Xcode,比如这里我最终选择了13.4.1。

然后在 该网址 先用你的 appid 登录,接着搜索对应的版本,点击选择下载。

下载完成后,建议将压缩包放到应用程序中,然后双击解压,此时出现大问题提示 无法展开归档 xcode因为所选宗卷的可用空间不足 ,内存不足了,我一看我内存还有30多G,怎么会不够了,经过搜索好像没什么办法,就是要你预留多点内存空间才能解压。

然后我就开始删软件,微信聊天记录什么的,然后好不容易挤到40多G,点击解压还是不行;

后面想到了一个能省很多空间的方法,我开始删 node_modules ,因为我有很多项目(有些是github上组件库的源码之类的)。删了很多挤到50多G空间了,终于解压成功,实际需要预留多少,我也不清楚,只能尝试了。

最后建议打开一下,看看是否正常。

获取 Flutter SDK

这里先不要点击下载,因为你 mac 版本下载的 Xcode 版本可能不支持 (最新版就直接选择对应芯片下吧)。我一开始就下了最新版,然后报错 Flutter 需要 Xcode 14 或更高版本

我最终选择了 3.10.6 的版本,因为 3.13.x 以上的版本好像要 mac 13.x 以上才行。下错了也没事,也就两个多g,后面会报错提示你版本不支持的,到时删了重新下个低版本的就好。

接下来的配置,跟着官网走就行,这里的目录其实就是上面 Xcode 的建议放进去的目录,然后这个 development 文件夹只是用来装 flutter 的不一定需要。

配置环境变量,当前命令行的路径需要和解压出来的 flutter 文件同层,也就是 development 路径下。官网也写了该环境变量只对当前命令行窗口有效,配置永久的还需要进一步 设置

bash 复制代码
export PATH="$PATH:`pwd`/flutter/bin"

永久 Path 环境变量

打开该文件

arduino 复制代码
open ~/.bash_profile

添加该行,command + s 保存

bash 复制代码
// /Users/user/develop 是我的 flutter 安装路径,根据自身修改
export PATH="$PATH:/Users/user/develop/flutter/bin"

刷新一下环境变量

bash 复制代码
source ~/.bash_profile

检查是否有效

bash 复制代码
which flutter

flutter doctor

执行 flutter doctor 检查当前环境还需要什么依赖。

flutter doctor

此时下面这几项应该会出现错误(好像就这几项了),vscode和chrome应该都是默认有了的吧。

Android

Android Studio 没下载会提示你先下载,报错信息会有个 地址 的,点击下载 Android Studio 就行。

同意条款,我这里就选这个了,intel的选另一个就好。

下载完成后,打开它,简单创建个项目,然后就会自动下一些 sdk 了。

但是报错信息中还会显示缺少一个工具包,然后还需要点击这里,选择 Command-line 下载。

此时再运行 flutter doctor, Android 的 ✅ 就勾上了。

Xcode 的 CocoaPods 报错

建议一直开着 vpn;

最后就剩 Xcode 中的 CocoaPods 的报错了。这个东西是搞了我最久了...

按照提示直接下载会报错。

arduino 复制代码
// 加上 -V 能看到下载的详细信息
sudo gem install cocoapods -V
  • 报错信息: You don't have write permissions for the /Library/Ruby/Gems/2.6.0 directory

原因简单来说就是 运行 ruby 时,会运行到 mac 自己安装的 ruby,所以出现问题。这篇文章 有详细解释。

接下来按照 该文章 就能成功下载 Ruby,下载完 Ruby 就能下载 CocoaPods 了。

我当时的流程大致如下,不一定适用你们的电脑,全程跟着上面文章走的话准没错。

bash 复制代码
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

退出并重新启动终端,检查是否下好。

brew doctor

执行下面命令

bash 复制代码
echo "eval $(/opt/homebrew/bin/brew shellenv)" >> ~/.zprofile
eval $(/opt/homebrew/bin/brew shellenv)

退出并重新启动终端,再次检查。我好像遇到一些警告,但我没管,也没什么问题。

brew doctor

使用 Ruby-Install 安装 chruby 和最新的 ruby

brew install chruby ruby-install

安装最新的Ruby

ruby-install ruby

执行下面命令

bash 复制代码
echo "source $(brew --prefix)/opt/chruby/share/chruby/chruby.sh" >> ~/.zshrc
echo "source $(brew --prefix)/opt/chruby/share/chruby/auto.sh" >> ~/.zshrc
echo "chruby ruby-3.2.2" >> ~/.zshrc

请注意,上述命令中的3.2.2是前面安装的版本。

退出并重新启动终端,然后检查

ruby -v

可以升级一下 gem,我当时操作的时候,也执行了很多其他的命令,可能存在还需要执行某些命令的情况。

sql 复制代码
sudo gem update --system

切换源,该步应该不需要做了,因为上面已经安装好 ruby 了,要是下面安装报错可以切换一下(我是已经切换了的)。

arduino 复制代码
gem sources --remove https://rubygems.org/
gem source -a https://gems.ruby-china.com
// 检查是否切换成功
gem sources -l 

现在执行 cocoapods 的安装应该就可以了。

bash 复制代码
sudo gem install -n /usr/local/bin cocoapods

最后

最后执行 flutter doctor 所有的 ✅ 应该都是完成的了。

dart 复制代码
// 我这里环境变量还没弄成永久,所以需要先执行下面这步,记得要去到flutter的同级目录下执行
export PATH="$PATH:`pwd`/flutter/bin"
flutter doctor

最后,完成搭建,那些压缩包就删了吧;软件,node_modules什么的,就下回来吧

相关推荐
学习使我快乐0121 分钟前
JS进阶 3——深入面向对象、原型
开发语言·前端·javascript
bobostudio199522 分钟前
TypeScript 设计模式之【策略模式】
前端·javascript·设计模式·typescript·策略模式
黄尚圈圈1 小时前
Vue 中引入 ECharts 的详细步骤与示例
前端·vue.js·echarts
浮华似水2 小时前
简洁之道 - React Hook Form
前端
正小安4 小时前
如何在微信小程序中实现分包加载和预下载
前端·微信小程序·小程序
_.Switch6 小时前
Python Web 应用中的 API 网关集成与优化
开发语言·前端·后端·python·架构·log4j
一路向前的月光6 小时前
Vue2中的监听和计算属性的区别
前端·javascript·vue.js
长路 ㅤ   6 小时前
vite学习教程06、vite.config.js配置
前端·vite配置·端口设置·本地开发
长路 ㅤ   6 小时前
vue-live2d看板娘集成方案设计使用教程
前端·javascript·vue.js·live2d
Fan_web6 小时前
jQuery——事件委托
开发语言·前端·javascript·css·jquery