Flutter详细环境搭建(文章绝对很小白,很通俗)Mac版

最近终于看到Flutter初正式稳定版了,不知是工作的原因还是市场确实如此,都感觉原生的开发都有一定幅度的削弱,而且谷歌也顺应时代般的推出了Flutter,个人比较喜欢,所以想一起来尝尝鲜学习下。本人小白一枚,所以有不对之处请见谅,下面就是我在mac环境下的搭建环境变量的过程。

(这是在公司的电脑上搭建的,是MAC的搭建过程。有空再在自己的Windows上也来一把吧。)

第一步:

当然是去下载flutter的sdk了

https://flutter.io/docs/development/tools/sdk/archive?tab=macos#macos

现在有正式版的1.0

将下载好的flutter的sdk解压到我们自己想要指定的目录。

 

第二步:

其他的临时环境变量我们就跳过不说了,这里我们直接来说如何正式配置我们日常的flutter环境变量。

首先要进入我们的终端环境

如果你是第一次配置环境变量,可以使用“touch .bash_profile” 创建一个.bash_profile的隐藏配置文件(如果你是为编辑已存在的配置文件,则使用"open -e .bash_profile"命令):

 

我这里已经创建过该文件了,没有创建过打开的肯定是一片空白咯。

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

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

export PATH=指定安装好的路径/flutter/bin:$PATH

export ANDROID_HOME="/Users/个人用户名/Library/Android/sdk"

export PATH=${PATH}:${ANDROID_HOME}/tools

export PATH=${PATH}:${ANDROID_HOME}/platform-tools

这里就是我的环境变量,也是我们搭建flutter所需的环境变量

前三行是flutter的,后三行是android的,输入完后保存。

然后输入命令行source .bash_profile是我们的配置生效,那么到底有没有生效,我门可以 echo $PATH来检查一下

 

接下来我们执行flutter doctor就知晓我们的flutter环境变量是否真正的搭建完毕可用,下面这张图就是我们的目标状态

而下面就是我的初始状态

有不少问题,接下来我就我的问题来一一解决。

其实很多提示都很明显,小白也可以按照提示来一一进行解决,因为我就是小白,哈哈。

一个!即代表一个小问题:

第一个:

sdk问题,这个按照提示来:

flutter doctor --android-licenses

一路点y就ok。

 

第二个:

因为我本身是搞android开发的,所以之前也没有安装xCode,这个用来开发iosApp的开发工具,那这样只好下载咯,去苹果应用商店直接查xCode进行安装就好。

安装完后我们可以打开看一看,然后我就没管了。

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer,接下来按照提示输入命令后该问题消失

第三个:

这个问题也是我们缺失了某些环境导致的,这个环境就是HomeBrew

https://brew.sh/,这个是他的官方网站,进入后可以直接按提示在终端输入

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

接下来就是一个漫长的下载过程,等待就好,当一切等待结束后接下来就容易啦,在终端里输入或者复制执行就好了

brew update

brew install --HEAD usbmuxd

brew link usbmuxd

brew install --HEAD libimobiledevice

brew install ideviceinstalle

 

brew install ios-deploy

又一个问题解决了。

第四个:

很简单,还是少环境。

在终端输入sudo gem install cocoapods

应该是直接输brew install cocoapods也可以,我也是直接去百度到的就这么输入了,大家可以试下,输入执行后会下载cocoapods,等待下载完成后,在执行pod setup命令执行通过后就万事大吉了,

 

这种问题基本就是没有安装flutter的插件导致的,vscode我用来开发小程序所以安装过,没安装过我就不知道会显示啥了,像我这样的问题直接去插件里搜索flutter并安装就完事了,AndroidStudip也是一样的,搜索flutter和dart两个插件安装重启完事儿。

此时再次还行flutter doctor的话就像下面这样的了,no issues 没问题,哈哈。

 

下面我们就可以一起进入HelloWorld的世界了,哈哈!!!

如有不符合指出可参考Flutter中文网:https://flutterchina.club/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章