前言

这是我第一次学习使用Flutter，主要还是按照文档来安装使用Flutter，以下安装是基于我当前的环境配置来进行的：Mac OS、VSCode编辑器、Xcode模拟器。官方文档基本写的很清楚，一路下来没遇到问题，这里只是自己简单做一下记录，简化了一下文档。

安装 Flutter

下载Flutter并设置环境变量

1.clone Flutter的beta仓库到当前的系统路径中：

git clone -b beta https://github.com/flutter/flutter.git

2.在你的~/.bash_profile或～/.zshrc添加镜像和路径的环境变量配置：

//前两个是镜像地址，后面的`/flutter/bin:$PATH`是你clone的仓库地址，这里默认就是在你当前的系统路径中
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=`pwd`/flutter/bin:$PATH

3.配置好之后，在终端中重启配置：

source ~/.bash_profile
或
source ~/.zshrc

4.重启成功之后，echo $PATH就能看到配置的路径

运行 flutter doctor

运行以下命令查看是否需要安装其它依赖项来完成安装：

flutter doctor

该命令检查您的环境并在终端窗口中显示报告。Dart SDK已经在捆绑在Flutter里了，没有必要单独安装Dart。 仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务

比如以下是我运行flutter doctor的一些提示，包括一些版本的升级等：

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.5.1, on Mac OS X 10.13.6 17G65, locale zh-Hans-CN)
[✗] 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.
[!] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
    ✗ libimobiledevice and ideviceinstaller are not installed. To install, run:
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
    ! CocoaPods out of date (1.5.0 is recommended).
        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 upgrade:
        brew upgrade cocoapods
        pod setup
[✗] Android Studio (not installed)
[!] VS Code (version 1.25.1)
[!] Connected devices
    ! No devices available

! Doctor found issues in 5 categories.

编辑器插件安装

我使用的是VS Code，所以这里就介绍VS Code的插件安装：

安装 VS Code

VS Code, 安装1.20.1或更高版本.

安装 Dart Code 插件

1. 启动 VS Code
2. 调用 View>Command Palette…
3. 输入 ‘install’, 然后选择 Extensions: Install Extension action
4. 在搜索框输入 dart code , 在搜索结果列表中选择 ‘Dart Code’, 然后点击 Install
5. 重新启动 VS Code

通过Flutter Doctor验证您的设置

1. 调用 View>Command Palette…
2. 输入 ‘doctor’, 然后选择 ‘Flutter: Run Flutter Doctor’ action（这时IDE可能会找不到PATH路径，直接在提示里选择你clone flutter时候的目录）
3. 查看“OUTPUT”窗口中的输出是否有问题

体验Flutter

创建项目

1. 启动 VS Code
2. 调用 View>Command Palette…
3. 输入 ‘flutter’, 然后选择 ‘Flutter: New Project’ action
4. 输入 Project 名称 (如hello_world), 然后按回车键
5. 指定放置项目的位置，然后按蓝色的确定按钮
6. 等待项目创建继续，并显示main.dart文件

上述命令创建一个Flutter项目，项目名为hello_world，其中包含一个使用Material 组件的简单的演示应用程序。

在项目目录中，您的应用程序的代码位于 lib/main.dart.

运行应用程序

1. 确保在VS Code的右下角选择了目标设备（如果你没有连接设备的话，会默认选择最新的模拟器，比如我这里打开的是iPhone X，但是如果我提前自己打开了iphone 8的模拟器，则会运行在iphone 8上面）
2. 按 F5 键或调用Debug>Start Debugging
3. 等待应用程序启动
4. 如果一切正常，在应用程序建成功后，您应该在您的设备或模拟器上看到应用程序

体验热更新

热更新就是你不用重新运行程序就能实时加载修改后的程序，在Flutter里热更新十分方便，比如在我们新建的程序里lib/main.dart文件修改里面的文案，然后保存（cmd-s / ctrl-s），你就能马上实时看到模拟器上的文案修改。

参考

Flutter中文文档
Flutter英文文档