Mac搭建Flutter开发环境

299 阅读2分钟

src=http___img6.51tietu.net_pic_2019-082018_4lenpa1us1n4lenpa1us1n.jpg&refer=http___img6.51tietu.webp

前言

最近公司说是要用Flutter搞个App,但是我完全不会!只能现学了。学习的第一步是要搭建Flutter的开发环境,看了官网Flutter文档,上手的时候仍然有很多迷惑的地方,走一步要查很多东西,感觉文档不太友好。在此把自己的搭建过程记录一下,给大家做个参考。

使用镜像

由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,大家可以将如下环境变量加入到用户环境变量中,即./zshrc文件

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

安装Java8

安装地址 www.oracle.com/java/techno…

image.png

安装完成后配置环境变量,结合自己的文件地址修改。

export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_211.jdk/Contents/Home
export PATH=$JAVA_HOME/bin:$PATH:.
export CLASSPATH=$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:.

下载Flutter SDK

到官网自行选择对应的稳定版下载 docs.flutter.dev/development…

1652781702154.jpg 下载后的zip文件放到想要存放的目录解压

$ unzip flutter_macos_2.5.3-stable.zip

imag1e.png 添加flutter相关工具到path中

export PATH=~/flutter/bin:$PATH

imwrage.png 运行flutter doctor

imag2423e.png

安装Android Studio

下载地址developer.android.google.cn/studio, 下载安装包,解压后点击开始安装。

imweqwrage.png 如果有需要导入的配置,选择第一个,没有第二个。

中途遇到需要设置Proxy的,我用的是mirror.nyist.edu.cn,端口号80。网上随便搜有很多。

选择安装类型,Standard(标准) 或 Custom(自定义)。

image.png 中途有个勾选的,选不了,我就一路继续,然后最后显示:Nothing to do! Android SDK is up to date. SDK emulator directory is missing

finish后,我又重新安装,遇到设置Proxy的地方选择了取消,然后就好了,好奇怪,不懂为啥。进去之后在plugins安装flutter和dart。

ima11ge.png 再次运行$ flutter doctor检查一下

imag11111e.png 按照下图所示勾选并apply,下载sdk。

image11111111.png 再运行$ flutter doctor

imag111222e.png 输入命令 $ flutter doctor --android-licenses 一路y。

配置Android Studio

export ANDROID_HOME=~/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools

再运行$ flutter doctor

image222222.png

安装xcode

在app store下载xcode,很大要下大半天。下载完成后:

image33333.png

安装homebrew和cocoapods

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

在终端输入命令按照提示安装。 安装完成后重启终端,安装cocoapods。

$ brew install cocoapods

成功后再次$ flutter doctor,如下图就好啦。

image44444.png