Flutter环境配置保姆级教程,让doctor一绿到底

写在前面

前端，是一个涉猎广泛的职业！不仅仅局限在web页面，我们还需要去写一些手机app,那么，我们就需要去学习Flutter或者React-Native等技术。

• 安装Flutter是件苦活，我在自己摸索的过程遇到了很多bug，过程是比较痛苦的
  • 比如安装好后，但是不能用，那这些会不会堆积下来影响电脑的性能？对追求完美的程序员来说，简直就是精神折磨
• 下面就和大家泰勒说说如何配置Flutter环境

Download Flutter Sdk

• 进入Flutter官网进行下载
  • 点击Get started进入到下一个页面
    • 右上角和主页下翻一点都可以找到这个按钮

• 点击macOS后进行到下载页面
  • System requirements写了硬件的要求
  • 下面的Get the Flutter SDK就是我们要下载地方了

• 下面完成后,我们新建一个development文件夹然后解压到这个文件夹里面

Update Path Variable

• 然后运行下面的命令

cd ～/development
export PATH="$PATH:`pwd`/flutter/bin"

• echo $SHELL命令可以知道你现在在用哪个SHELL
• 创建.zshrc文件
  • touch .zshrc
  • 然后我们在文件夹下使用命令command+shift+.就可以看到隐藏文件了
• 打开.zshrc文件,进行编辑
  • export PATH="$PATH:[PATH_OF_FLUTTER_GIT_DIRECTORY]/bin"
    • [PATH_OF_FLUTTER_GIT_DIRECTORY]表示flutter/bin的文件目录
  • 所以，可能命令会是这样export PATH="$PATH:/User/41/development/flutter/bin
  • 注意：不要直接复制上面的命令啊，要用自己的目录去替换！！！
• 使用命令来运行rc文件
  • 网上是说source $HOME/.zshrc
  • 我是用source $HOME/development/.zshrc成功运行的
• 之后使用Flutter，成功运行就说明SDK已经没问题了

---

• 运行flutter doctor来康康有啥问题，卧槽，大吃一惊

• 还有四个大错
  • cmdline-tools
  • Android license status unknown
  • Xcode
  • Android Studio

Install Xcode

• 在App Store搜索Xcode直接进行下载安装就可以了
  • 就可以了吗？太天真了
  • 下载完使用flutter doctor还是有Xcode的报错
• 运行下面的命令来解决这个问题

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

• 现在Xcode的问题就正式解决了

Install Android Studio

• 先去android studio官网下载sdk
  • 点击下载Android Studio
  • 点击Download Android Studio
  • 有个文档让你看，点已经读了，然后下载对应版本
    • 芯片型号在关于本机中查看

• 安装到应用中，这样才能解决doctor的问题

• 新版的Android Studio长这样
  • 我们在More Action中可以找到SDK Manager
  • 在这个里面我们可以解决cmdline-tools的bug
  • 然后选择下面几个sdk然后apply进行下载，最后点ok就可以了

Accept Android Licenses

• 这个问题根据flutter doctor的提示运行下面的命令
• flutter doctor --android-licenses

一绿到底

• 然后我们再次运行flutter doctor
  
• bug，不存在的！