Flutter入门之Mac最详环境搭建

xBaoshu
1,466 阅读5分钟

看到越来越多的同学准备入坑Flutter开发，而Flutter的环境搭建还是挺繁琐的，官网和网上的一些文章写的都不全。结合自己实际环境搭建中遇到的一些问题，同时整合了一些看到的文章，希望此文可以帮助准备学习Flutter的同学少踩坑，不要让环境搭建就把大家挡在了Flutter的门外。

系统环境要求

  • 操作系统: macOS (64-bit) 10.14以上（因为最新的Flutter SDK要求Xcode10.1以上，而Xcode10需要10.14以上的系统）

  • 磁盘空间: 3GB (Flutter SDK 3GB左右，不包括Xcode或Android Studio的磁盘空间，ps：Xcode大概10G,一版建议Mac选择Xcode)

  • 软件: 建议先安装Xcode、 VsCode

  • 工具: brew 是 Mac下的一个包管理工具，它在环境搭建中有着超级大的作用，所以没有的同学先去安装

Sept 1.下载Flutter SDK包

去官网下载Flutter SDK包，进入页面后向下滑，看到如下图所示的界面，点击按钮，下载Flutter SDK。

Step 2.配置环境变量

压缩包下载好以后，找个位置进行解压。这个位置很重要，因为下面配置环境变量的时候要用到。比如你解压到了根目录下的Flutter文件夹.

打开终端工具，打开环境变量配置文件，这里使用vim，命令如下：

vim ~/.bash_profile

在打开的文件里增加一行代码，意思是配置flutter命令在任何地方都可以使用

export PATH=/你放Flutter SDK的绝对路径/bin:$PATH

配置完成后，需要用source命令重新加载一下环境变量文件 ，具体命令如下：

source ~/.bash_profile

完成这步以后，就算我们flutter SDK的安装工作完成了。可以使用下面命令来检测一下，是否安装成功了。

flutter –h

出现下面的结果，说明到目前为止，我们安装一切顺利

Step 3.检测Flutter运行环境，安装相关依赖

接下来用flutter自带命令检测一下flutter的运行环境

flutter doctor

按照检测结果的说明，如果有[!] ✗ 标志，表示本行检测不通过，需要做一些设置或者安装一些软件。我这里Mac的运行环境已经配置完成，不准备配置Android的开发环境，所以Android的警报忽略。

初次运行flutter doctor的时候可能会报一些环境错误

[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.io/setup/#android-setup for detailed instructions).
      If Android SDK has been installed to a custom location, set ANDROID_HOME to that location.
      You may also want to add it to your PATH environment variable.

[!] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
    ✗ libimobiledevice and ideviceinstaller are not installed. To install with Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        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 CocoaPod plugins will not work on iOS.For more info, see https://flutter.io/platform-plugins
    To install:
        brew install cocoapods
        pod setup
[!] Android Studio (not installed)
[!] IntelliJ IDEA Ultimate Edition (version 2018.3.5)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] Connected device
    ! No devices available

! Doctor found issues in 5 categories.

看到这个，不要慌，先保证brew安装好，然后按照提示，安装相关依赖软件就行。

brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy
brew install cocoapods
pod setup

安装pod setup速度奇慢，国内大佬们摸索出一种取巧的方法，具体步骤如下：

  1. 到 github.com/CocoaPods/S… 网址把文件clone下来，默认文件夹名字为Specs-master

  2. 前往文件夹 ~/.cocoapods/repos(用 commad+shift+. 快捷键可以现实隐藏文件)

  3. 终端cd到你的工程目录中执行 pod setup，等待一会，等到开始下载的时候，会发现在~/.cocoapods/repos 下面多一个master文件，这时，需要复制master下面的.git 文件夹到Specs-master下面，同时停止pod setup

  4. Specs-master文件夹名字修改为master，并替换~/.cocoapods/repos 下的master文件夹

还有一种更简单的方法，如果有同事已经配好了flutter环境，直接将他的~/.cocoapods/repos/master文件夹拷贝一份，替换自己本地的就行。

常见问题总汇: 

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。

Step 4.更新环境变量

由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到用户环境变量中，添加方法第二步一样。

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

至此，Flutter运行环境搭建搭建完成，我们可以在Mac上写Flutter应用，安卓的环境如果有需要，我会再写一篇安卓环境搭建。

Step 5.运行第一个Flutter应用

建立一个Flutter项目的文件夹，在文件夹下运行

flutter create xxx

这里需要注意的是，创建的应用名不能采用驼峰命名法，同时有可能会出现flutter命令识别的情况，再运行一下 source ~/.bash_profile 命令就可以使用flutter命令了创建一个flutter应用，创建完成后目录结构如图所示：

打开模拟器，Mac下可以使用open -a Simulator打开模拟器，然后进入flutter目录里运行flutter run命令，如图所示:

等待几分钟，就可以在模拟器上看的你自己第一个flutter应用的界面，官方提供的一个计数器示例。主代码在lib/main.dart文件里，修改代码，按R就可以更新到界面上，调试是不是很方便。

现在你已经可以自己写自己的flutter应用了，在Flutter的世界中遨游吧！

avatar
文章
阅读
粉丝