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

由于在国内访问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 initialized Cocoapods已经安装但没有初始化，执行下面语句完成初始化（可能较慢，耐心等待）：

  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. down.tech.sina.com.cn/page/45703.…

    b. mac.softpedia.com/get/Develop…

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

  • 设置下载的代理服务器

    • 命令行进入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 设置点击前往教程

至此，全部环境搭建步骤结束，不敢保证全部正确，但我尽可能的把我的安装过程和问题都列了出来，希望可以帮到各位同学，祝大家起跑顺利，若果安装过程中有任何问题，大家可以评论或在我的公众号前端小苑留言，看到后我会第一时间回复。

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