flutter开发系列之一--环境配置

flutter出来已经一段时间，相信有不少开发同学都去尝试了，现在跨平台开发技术火爆移动开发圈，比如RN，Weex等等，但是这些方案如果不是有特殊需求，一般并没有动力去学，flutter不同，google大厂出品，值得信赖。这系列文章主要是用来记录自己学习flutter的一些经验和遇到的问题。

1. 准备

因我使用的开发环境是Mac系统，因此本系列所有的配置都是Mac为主由于网络问题，部分用户可能无法打开flutter官网，这里推荐Flutter中文站

在开始flutter之前，请先安装好Xcode和Android Studio

2. 安装Xcode和Android Studio

2.1 Xcode

直接在Mac App Store下载安装Xcode。

安装完Xcode后还需要安装一些依赖库。而这些库需要通过brew安装。

首先安装brew(已经安装过的跳过此步骤)

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安装一些依赖库

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

命令行启动模拟器

open -a Simulator  //打开默认模拟器

或者也可以打开指定的模拟器

xcrun instruments -s //列出你安装的所有可用的设备
xcrun instruments -w "iPhone X" //打开指定模拟器

2.2 Android Studio

温馨提示，这些步骤可能因为国内网络问题导致不成功，请自行解决访问国外网络的问题。

下载并安装Android Studio
启动AS，根据配置向导一步步安装即可。
因Flutter默认使用的Android API 27和buildtools 27.0.3。而AS默认安装的最新版。所以这两个东西需要我们自己手动安装。按照下图打开SDK Manager。

打开后界面如下，按图勾选show package details

然后选中Android SDK Platform 27

接下来切换到SDK tools，选中27.0.3

最后点击下面的apply，弹出下载界面，等待安装完成即可。

3. 配置Flutter

3.1 命令行中通过git下载flutter SDK包

git clone -b master https://github.com/flutter/flutter.git
./flutter/bin/flutter --version

或者点击此处直接下载zip压缩包

3.2 配置环境变量

以ohmyzsh为例，在.zshrc中添加

export PATH=`pwd`/flutter/bin:$PATH  //pwd是你flutter sdk目录的前置路径

修改完成后记得source一次使配置生效

source ~/.zshrc

3.3 检查flutter是否设置成功

命令行运行如下命令

flutter doctor

运行完成会出现一些提示，成功的会打 ✓，有缺失的会打 ✗，提示 ✗ 的下面有对应提示，根据提示运行对应命令或安装Flutter插件。插件安装请查看下面的开发工具选择章节。

示例：

 ~ flutter doctor                                                                              
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, v0.5.8-pre.109, on Mac OS X 10.13.6 17G65, locale zh-Hans-CN)
[!] Android toolchain - develop for Android devices (Android SDK 28.0.1)
    ✗ Android SDK file not found: /Users/simon/Library/Android/sdk/platforms/android-28/android.jar.
[✓] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
[✓] Android Studio
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] Android Studio (version 3.1)
[!] IntelliJ IDEA Ultimate Edition (version 2018.1.5)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] VS Code (version 1.25.1)
[!] Connected devices
    ! No devices available

! Doctor found issues in 3 categories.

糟糕，我运行flutter doctor后提示了一些问题，Android toolchain提示警告!。赶紧看看是什么问题，原来是 ✗ Android SDK file not found: /Users/simon/Library/Android/sdk/platforms/android-28/android.jar. 因为Flutter版本升级，可能需要的API版本发生变化。上面提示我android 28找不到，那我就按照前面的步骤，去安装一下Android SDK 28.0.1。

如果你此时下面的IDE全都是 ✗，请不要惊慌，下面的开发工具选择章节会教你插件如何安装。到此时你只需要保证前面的三项都显示 ✓就行了。可能你会好奇为什么会有这么多 ✗，其实仔细看这些提示。第一行是Flutter SDK的一些信息，一般都是打钩。第二行是Android环境的一些提示，如果打 ✗，就安装提示解决对应的问题，比如我这个提示缺失android sdk 28，那么按照前面的步骤安装好即可。第三行是iOS的开发环境，如果按照上面的步骤都完成的话，一般不会有问题，如果也提示 ✗，按照提示解决。后面的是你本地支持Flutter开发的一些IDE工具，我一般使用Android Studio 和VScode。我这里有两个版本的Android Studio。但是我常用的是3.1。所以我只需要保证Android Studio(version 3.1)和VS Code打钩即可，其他的都是提示你缺少Flutter插件。

好了，我刚已经按照提示安装android 28了。再次运行flutter doctor看看结果。

 ~ flutter doctor                                                                             
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, v0.5.8-pre.109, on Mac OS X 10.13.6 17G65, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK 28.0.1)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
[✓] Android Studio
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] Android Studio (version 3.1)
[!] IntelliJ IDEA Ultimate Edition (version 2018.1.5)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] VS Code (version 1.25.1)
[!] Connected devices
    ! No devices available

! Doctor found issues in 2 categories.

Good，Android toolchain已经正确的提示 ✓ 了。此时，我们的环境便已经搭建好了，接下来只需要安装好Flutter提供的插件就能开始开发啦。

3.4 开发工具选择

开发工具一般使用VS Code、Android Studio、IntelliJ。根据实际使用对比，推荐使用Android Studio，毕竟是谷歌亲儿子，插件完善度比VS Code的高，当然会后续发展也许VS Code会完善，到时候用也不错。

Android Studio 以Android Studio为例，看看我们如何安装Flutter的插件。

在输入框中输入flutter，点击安装。

Vs Code

检查是否安装成功，打开命令面板，输入flutter

3.5 一些小技巧

Flutter开发和其他一样，也需要引入各种库，但是部分网络情况下可能会出现依赖库无法下载的问题，我们可以指定国内的镜像地址。

在环境变量中配置国内源（以ohmyzsh为例，在.zshrc中添加）

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

然后运行

source ~/.zshrc

Flutter更新

flutter upgrade

Flutter切换最新版 Flutter目前还在迭代阶段，默认提供的beta版本，如果我们想使用preview版本该怎么办呢？可以通过flutter channel命令来切换

 ~ flutter channel                                                                            
Flutter channels:
 * beta
   dev
   master

执行flutter channel发现默认指向是beta，我们通过下面的命令可以切换到master

flutter channel master

文章参考： https://flutter.io/setup-macos/