Mac Flutter 开发环境配置 从0到1 流程

文章目录

mac 开发环境配置 从入门到完成

本文首发简书 转载请注明出处

高能提示:文章字数不多,图很多,请做好战斗准备

前言

写这篇文章的原因是我自己的 macbook 开不开机,返修后,所有开发环境全部没有了,正好要重新配置开发环境,所以写一个从零配置的文章 因为 flutter 涉及到跨平台开发,所以预想中会包含四部分 mac 篇,android 篇,ios 篇,flutter 篇

术语相关

cmd = command 键(空格左边) opt/alt = option 键(cmd 左边) ctrl = control(opt 左边) cli = 命令行工具(command-line interface,命令行界面) as = Android Studio

写在前面

最低需要 xcode 9.0.0 以上的 xcode 版本 但是不建议从非官方渠道下载 xcode,以免遇到之前盗版 xcode 的问题

我就是都装好了 8.3 才告诉我这个,没办法只能升级系统,再升级 xcode

mac 篇

所谓 mac 篇就是一些基础的环境,和效率工具

后面会使用

cli

我这里使用,一个免费的开源的命令行工具 默认的命令行工具用 launchpad=> 其他 => 终端打开

zsh,用于替换 bash 环境,直接命令行中敲 zsh,即可进入,修改默认 zsh 的可以自行百度 oh my zsh,一个 zsh 插件 具体可以自行百度

一个很方便的包管理工具,基于 ruby+git 命令行敲 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"即可 这里会自动安装 xcode 命令行环境,git 环境,需要输入密码确认

效率篇

Alfred 一个快速开启 app 的辅助工具 Paw http 工具 Sip 取色器

dmg 相关

遇到提示 dmg 损坏,不要着急 并不一定是真的损坏里,参考这里 ,允许所有的来源即可

对于 mac 新手来说,可能不会使用 dmg,双击打开,有允许点允许,有 dmg 密码输入密码,最后将应用拖入到 application/应用里,一般 dmg 里都有快捷方式,没有的话自己打开 finder/访达,拖到应用程序里面也行

image.png

环境变量相关

不会配置环境变量的,这要仔细看了 在 cli 中敲对应的命令即可

export NAME=VALUE //加入环境变量 unset NAME //删除环境变量

source fileName //使重新读取配置文件

这个敲击仅当前 cli 或衍生 cli 有效,想要永久生效就要将配置加入配置文件中

默认是 bash,所以我们编辑 bash 的配置文件 vi .bash_profile 我这里使用的是 vim 工具,如果不习惯 后续的 vi 可以换成 open ,遇到文件不存在就先敲 touch $fileName

默认是没有.bash_profile 文件的,创建 并添加 export PATH=XXXXX:$PATH 这里 XXX 代表了你自己的环境变量(adb,jdk,flutter)等

因为我使用的是 zsh,这里配置 zsh 相关的,让 zsh 可以“读取”到 bash 的配置即可

1vi .zshrc

在最后一行添加 source .bash_profile 保存,退出

vi 个人常用命令 i 插入 a 在后插入 shift+4 行尾 l+数字,enter 指定行号 dd 删除行 yy 复制行 p 粘贴行 :wq 保存退出 :q 保存退出 :q! 强制退出不保存

ios 篇

从 app store 安装 xcode,建议不要使用迅雷等工具下载

image.png

image.png

我这里不是最新的 mac os 版本,所以需要下一个旧的 xcode

等待漫长的安装,然后运行 xcode

image.png

只能同意

等待中

image.png

image.png

看到这里 xcode 就算 ok 了

插一句,我这里因为先安装了 brew,所以 xcode 命令行工具预先安装到了 mac 里,如果没装 brew,这里可能会提示安装 xcode 命令行工具,git 等等,请同意即可

点击 cmd+,打开首选项

首选项

左下角加号 apple id 来登陆你自己的苹果开发者账号/ 不是开发者也能开发 ios 就是不能上传 apple store

img

android 环境篇

android studio 安装

这里我使用一个中文镜像 下载 有梯子的可以去 android 官网下载

拖到 application 里

打开

出现这个不要紧 cancel 就行

image.png

一路 next

image.png

finish

image.png

等待,这里大部分的资源目前应该不需要梯子,头几年都是要翻才能下的

image.png

finish

image.png

出现这个窗口就说明 android 的环境 ok 了

image.png

配置 android 的环境变量

jdk

image.png

打开 dmg 双击 pkg 一路 next

新开一个命令行 javac -version java -version

能正确显示版本号即可

image.png

添加 javahome 环境变量

如果你是 pkg 安装的,先看看 java 安装目录,自己解压的压缩包那就按照自己的目录

1/usr/libexec/java_home -V

image.png

复制这里的最后一行 也就是那个 Home 的目录

配置在.bash_profile 里

1export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_181.jdk/Contents/Home
2export PATH=$JAVA_HOME/bin:$PATH

别忘了

1source .bash_profile
androidsdk

如果是通过刚刚的 android studio 自动安装的,则目录会在/Users/caijinglong/Library/Android/sdk下 这里根据你的用户名不同会有不同的地址,继续添加到.bash_profile 中

目前我的.bash_profile 是这样的

1export ANDROID_HOME=/Users/caijinglong/Library/Android/sdk/
2export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_181.jdk/Contents/Home
3export PATH=$JAVA_HOME/bin:$ANDROID_HOME/platform-tools:$PATH

第三行的$JAVA_HOME/bin 有没有其实没关系 现在返回 cli 中,敲adb会出现很长的英文,这个是 adb 命令的说明 能出现则说明成功,不成功的话请重新检查下环境变量是不是没配置好

flutter 篇

终于要开始 flutter 篇了

pub 环境变量

这里建议没有常驻翻墙的同学打开下面的页面,配置下中文的 pub 镜像,pub 是 dart 官方提供的一个中心仓库,可以将依赖/开源库上传到上面

官网

有能力的同学这里自己进入按照 mac 篇进行配置 或者继续看下去

开始安装 flutter

cli:

1cd ~/Library
2mkdir Flutter && cd Flutter

这里可能会比较慢 可以使用 gitee 的镜像来 clone

1//github
2git clone -b dev https://github.com/flutter/flutter.git
3
4//gitee(我同步github的库)
5git clone -b dev https://gitee.com/kikt/flutter.git

后续修改 git 的 remote 为 github 地址即可

1git remote set-url origin https://github.com/flutter/flutter.git

查看下

1git remote -v

image.png

配置 flutter 的环境变量

这里配置 flutter_home

1export FLUTTER_HOME=/Users/caijinglong/Library/Flutter/flutter
2export PATH=$JAVA_HOME/bin:$ANDROID_HOME/platform-tools:$FLUTTER_HOME/bin:$PATH

接着返回 cli

1cd ~
2source .bash_profile
3flutter doctor -v

这个 flutter doctor -v 就是显示 flutter 的环境问题,以后可能会经常敲

这里加-v 就是详情,如果有问题需要帮助,这里一定要带-v 这里加-v 就是详情,如果有问题需要帮助,这里一定要带-v 这里加-v 就是详情,如果有问题需要帮助,这里一定要带-v

这里加-v 就是详情,如果有问题需要帮助,这里一定要带-v

接着就是漫长的等待,这里会下载 flutter 的相关构建工具等等

image.png

image.png

这里带 X 的就是有问题的,我们需要一项项的去解决 大部分都给了 cli 方案 就是 run: 后面的东西 这里我们看到了建议大家使用 brew 去安装这些库,这也是为什么我这里开篇就介绍如何安装 brew 的原因

image.png

这里我标记了 6 个问题

  1. android 许可证问题

flutter doctor --android-licenses 一路 y 过去

image.png

  1. xcode 的问题

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

    1. flutter ios 工具链的问题

这里需要使用 brew 安装一些工具以帮助 flutter 可以调试 ios 程序,你模拟器能跑起来,但是 ios 真机不行大概率就是这里的原因 cli:

1brew install --HEAD libimobiledevice`

这里会安装很多的二进制库

image.png

完成后继续下一步

1brew install ideviceinstaller

image.png

这里比较简短

1brew install ios-deploy

image.png

  1. 这里是 ios 开发相关的了

使用 cocoapod 作为 ios 的库管理工具,这个是 ios 开发中很常见的一个包管理工具,我们按照提示安装

1brew install cocoapods

image.png

接着是安装 pod 的库相关的索引

1pod setup

image.png

这里看到 下载速度还行,虽然没有国内快,但是也有接近 4m 的速度了,如果这里你的速度不佳,可以考虑使用 gitee 的 spec 中转,

image.png

这里因为涉及到的文件很多 百万级文件数量,所以会比较慢,耐心等待就行了 如果你是 imac/mac mini 没有固态,建议你自己想办法加一个,不然这步时间可能 1 ~ 3 小时不等 我的 2016 款 macbook pro 是 pcie 的 ssd,下载时间大概 5 分钟,“解压”也用了 5 分钟,全程 10 分钟左右

image.png

平心而论,pod 的索引方式个人感觉很蠢,最初数量级小的情况下还算能接受,现在 pod 的库数量越来越多,用这种方式来做中心库索引简直接受不了,后面会越来越臃肿

  1. android studio 插件问题

在 studio 中点 cmd+, 打开首选项 点击 plugin

image.png

image.png

选下载人多的

image.png

依赖dart

点 yes

然后耐心等待

image.png

完成后是这样的

重启即可

点击重启后

问题解决完毕


我们返回到 cli 中 敲

1flutter doctor -v

image.png

这里我发现我这遇到里之前没有的问题, 第一个 X 提示我 xcode 需要最低 9.0.0 的版本 第二个 X 提示我缺少一个叫 six 的 python 库

我这里因为系统版本的原因下载不了 9.0.0 以上的 xcode,只能升级版本后重新下载了,这个后面补上

先完成第二个,有两个选择 pip install six sudo easy_install six 根据提示敲击,我这里选择的是第二个

1sudo easy_install six

image.png

然后我们只剩下 xcode 的问题了,如果你的 xcode 版本没问题,那你可以跳过这里,直接看 flutter 的运行相关

系统更新

到 mac app store 中 去下载新的系统版本

image.png

完成后打开,接着一路下一步,都是中文,等待完成就行

image.png

image.png


系统更新完成,现在开始更新 xcode

image.png

完成后,回到 cli 中

1flutter doctor -v

image.png

提示我要同意协议 这里可以打开 xcode,也可以直接命令行敲击,建议直接打开 xcode

我这里用命令行同意

1sudo xcodebuild -license

image.png

这里点 enter(回车)

image.png

这里输入 agree 回车

image.png

这里的错误还是需要打开 xcode,所以前面建议你直接打开 xcode app

image.png

这里之前遇到过,install 就行了

到这里 xcode 的问题就都解决了

再次flutter doctor -v

image.png

pod 又出问题了,还是应该先升级系统,再一次性安装,这又来了无用功 按提示走把

1brew install cocoapods

image.png

告诉我已经安装了 提示我 reinstall

1brew reinstall cocoapods

image.png

image.png

这是最后一次了 除了没连接设备外,没其他问题了 😊

flutter 部分的环境配置到这里基本完成了,接着就该运行项目了

运行项目

初次建立项目建议使用 cli 创建,因为会很慢,用 as 的话 你很难知道自己在等什么,甚至网络链接失败你都不知道

cli 里敲击

1flutter create hello_world

项目名不能有大写字母,所以建议使用下划线作为单词的分隔

image.png

image.png

这样就代表项目的文件都 ok 了,接着按照提示进入项目内,这里慢的话 可能是获取依赖的时候卡住了

image.png

android 运行

右上角

image.png

image.png

image.png

我这里新装的 sdk,没有 android 的镜像,所以 download 下

image.png

等待中

完成后点 finish 即可

接着点选刚刚下载的,一路 next+finish

image.png

运行后关闭 device manager 回到主界面

image.png

image.png

这第一次运行会下载 gradle,速度不好说,可能会很慢

image.png

这个会下载这个,你可以用迅雷复制这里的链接下载下来,复制到如下图的文件夹下

image.png

我这里速度很好,很快就跑起来了

image.png

ios 运行

image.png

在 as 中点这个 会开启一个 ios 模拟器

image.png

在开启模拟器成功后,发现 as 识别不到,这种情况不要怕

命令行敲 flutter doctor -v 试试

image.png

我们看到,是有设备的,重启下 as 试试吧

image.png

设备出来了,我们点旁边的 run(绿三角)试试吧

image.png

项目也跑起来了,大功告成

后记

整篇文章是我边搭环境边写的 可以说很详细了,中间我还走了 xcode 版本号的弯路 但是项目后来还是成功的跑起来了,希望各位看我文章的 也能成功

可以看到我开始的截图 macos 版本是 10.12.3 后来安装了新版本 变成了 10.13.6

我单位的版本是 10.12.6 那个 macos 版本是可以安装 xcode 9.0 的