Mac版最详细的Flutter开发环境搭建

上周任务很少，闲来无事想学习一下flutter耍一耍，发现flutter的环境搭建步骤仍是很繁琐的，官网的搭建教程只是按步骤让你进行操做，中间出现的问题彻底没有说起，对我这种没搞过原生开发的小白来讲超级不友好。而网上不少相关博客教程，感受不够详细，许多环境搭建过程当中的坑确实是提到了，但解决的办法写的比较笼统，在此我将本次环境搭建锁遇到的各类奇奇怪怪的问题一一汇总，争取结合各路大神的博客加上本身实际遇到的问题整理出一篇超级实用且详细的教程，让童鞋们在学习flutter的路上少走弯路，让你的起跑顺畅起来，大神们请指正或忽略。

系统环境要求

Flutter是相对新出的框架，对系统有必定的要求。

• 操做系统: macOS (64-bit)
• 磁盘空间: 700 MB (不包括Xcode或Android Studio的磁盘空间，ps：Xcode大概6个G,学习的状况下能够2选一）
• 软件 Xcode、Android studio、VsCode
• 工具: Flutter 依赖下面这些命令行工具：
  • bash, mkdir, rm, git, curl, unzip, which
  • brew 是 Mac 下的一个包管理工具，相似于 centos 下的 yum，能够很方便地进行安装/卸载/更新各类软件包，例如：nodejs, elasticsearch, kibana, mysql, mongodb 等等，能够用来快速搭建各类本地环境，程序员必备工具，不少Mac都没有安装brew，但它在环境搭建中有着超级大的做用，因此没有的童鞋先去安装brew，教程：学习安装brew

下载Flutter SDK

两种方式：官网下载和github下载

• flutter官网下载地址点击进入
• 在国内由于中所周知的缘由，要想正常获取安装包列表或下载安装包，可能须要FQ，你们也能够去Flutter github项目下去下载安装包，转到下载页
• 懒癌患者能够直接点击本连接下载，随着版本的升级此连接可能会失效：点击直接下载

将下载好的sdk保存后解压。

• 若是已经安装了解压软件能够直接解压
• 或者在命令行使用unzip进行解压
  • 例如：

  cd ~/development unzip ~/Downloads/flutter_macos_v1.5.4-hotfix.2-stable.zip 

• 记住解压后的文件路径，接下来要用到。

配置环境变量和镜像

因为在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，能够将以下环境变量加入到用户环境变量中。

如何更改环境变量？

1. 使用快捷键Command+R（或者Windows键+R），或者直接点击Launchpad,进入Launchpad，点击其余这个工具集合，选择终端（或者terminal），进入命令行工具。

2. 输入：echo $PATH，按回车执行命令查看当前变量值。

3. 输入：sudo vi ~/.bash_profile，按回车输入密码后用vi打开用户目录下的bash_profile文件。必定要用sudo，不然没权限保存文件。

4. 按i键，在空白处开始编辑

    

5. 将如下代码添加进去

   • Flutter临时镜像

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

   • 更新flutter的PATH变量，以即可以运行flutter命令在任何终端会话中。

   export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH 

   注意!!!：PATH_TO_FLUTTER_GIT_DIRECTORY 为你解压过的flutter文件路径，上一步提到过，好比“~/document/code”，千万别顺手全粘贴上去，考试连姓名都抄的同窗不是一个合格的学渣。

6. 运行 source ~/.bash_profile或重启命令行刷新当前终端窗口。

7. 运行 echo $PATH验证目录是否在已经在PATH中,正确的输出以下，每一个电脑输出可能不同，但当你看到flutter路径出现即说明配置成功。

   /mySpace/flutterSDK/flutter/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/mongodb:/usr/local/go/bin~

检查开发环境

到此咱们已经安装完flutter了，但此时还不具有开发的能力，flutter运行须要不少插件，运行如下命令查看是否须要安装其它依赖项来完成安装：

flutter doctor

这时候它会将你未安装的依赖一一列出，每一个电脑缺乏的依赖都不尽相同，例以下面这样：

✗ Android toolchain - develop for Android devices • Android SDK at /Users/obiwan/Library/Android/sdk ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ • Try re-installing or updating your Android SDK, visit https://flutter.dev/setup/#android-setup for detailed instructions. To install, run: brew install --HEAD libimobiledevice brew install ideviceinstaller ✗ ios-deploy not installed. To install: brew install ios-deploy ✗ CocoaPods not installed. CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side. Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS. For more info, see https://flutter.io/platform-plugins To install: brew install cocoapods pod setup 

先搞定须要brew安装的，若是你英文好，按着提示一条一条的安装，若是英文很差的话，那你能够找关键词，好比上面的输出，能够从中找到 brew install字眼，将全部须要brew安装的通通安装上便可。仍是以上面为例,能够看到brew相关的有：

brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy
brew install cocoapods

执行上面命令逐条安装依赖。再次运行flutter doctor， 这个时候须要安装的一些插件错误已经不会报了，但仍是会有些其它的常见问题将会在下面一一列举出来。

常见问题汇总

• Cocoapods is installed but not initializedCocoapods已经安装但没有初始化，执行下面语句完成初始化（可能较慢，耐心等待）：

  pod setup

• ✗ Xcode installation is incomplete; a full installation is necessary for iOS development. Download at: https://developer.apple.com/xcode/download/ Or install Xcode via the App Store. Once installed, run: sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer 

  提示xcode安装不完整须要完整安装，运行如下命令而后输入root密码即可：

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

• 执行brew install --HEAD libimobiledevice命令会抛出以下异常：

  configure: error: Package requirements (libusbmuxd >= 1.1.0) were not met:
  
    Requested 'libusbmuxd >= 1.1.0' but version of libusbmuxd is 1.0.10 Consider adjusting the PKG_CONFIG_PATH environment variable if you installed software in a non-standard prefix. Alternatively, you may set the environment variables libusbmuxd_CFLAGS and libusbmuxd_LIBS to avoid the need to call pkg-config. See the pkg-config man page for more details. READ THIS: https://docs.brew.sh/Troubleshooting 

  这时候须要运行brew unlink usbmuxd & brew install --HEAD usbmuxd而不是libusbmuxd。

• flutter doctor没有检测到Android SDK, 安装sdk便可，如何安装？

  • 先下载android sdk for mac 给二个靠谱的网址：

    a. http://down.tech.sina.com.cn/page/45703.html

    b. http://mac.softpedia.com/get/Developer-Tools/Google-Android-SDK.shtml

    到这个面下载后，解压到某个目录

  • 设置下载的代理服务器

    • 命令行进入tools目录

    • 而后输入 ./android sdk 请出SDK Manager的图形界面

    • Android SDK Manager -> Preferences...

       

    • http proxy server这里填写： mirrors.neusoft.edu.cn （感谢东软搭建国内的镜像服务器，为广大程序员造福无数）

    • 端口填写80，而后把Force https:// 前的勾勾上

  • mac顶部菜单Tools->Manage Add-on Site

     

  • 把下面这堆网址全手动New加进去，而后就能够下载了(注：上图中加圈的项，建议勾上，不然有可能建立不了Android模拟设备)：

    http://mirrors.neusoft.edu.cn/android/repository/addon-6.xml 
      http://mirrors.neusoft.edu.cn/android/repository/addon.xml 
      http://mirrors.neusoft.edu.cn/android/repository/extras/intel/addon.xml 
      http://mirrors.neusoft.edu.cn/android/repository/sys-img/android-tv/sys-img.xml 
      http://mirrors.neusoft.edu.cn/android/repository/sys-img/android-wear/sys-img.xml 
      http://mirrors.neusoft.edu.cn/android/repository/sys-img/android/sys-img.xml 
      http://mirrors.neusoft.edu.cn/android/repository/sys-img/google_apis/sys-img.xml 
      http://mirrors.neusoft.edu.cn/android/repository/sys-img/x86/addon-x86.xml 
      http://mirrors.neusoft.edu.cn/android/repository/addons_list-2.xml 
      http://mirrors.neusoft.edu.cn/android/repository/repository-10.xml

 

 

平台设置

macOS支持为iOS和Android开发Flutter应用程序。如今完成两个平台设置步骤中的至少一个，以便可以构建并运行你的第一个Flutter应用程序

iOS 设置 点击前往教程

Android 设置 点击前往教程

至此，所有环境搭建步骤结束，不敢保证所有正确，但我尽量的把个人安装过程和问题都列了出来，但愿能够帮到各位同窗，祝你们起跑顺利，若果安装过程当中有任何问题，你们能够评论或在个人公众号前端小苑留言，看到后我会第一时间回复。

最后欢迎你们关注公众号前端小苑，我会按期在这里发表原创文章。