在Windows上搭建Flutter开发环境

用镜像

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

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

注意： 此镜像为临时镜像，并不能保证一直可用，读者可以参考详情请参考 Using Flutter in China 以获得有关镜像服务器的最新动态。

系统要求

要安装并运行Flutter，您的开发环境必须满足以下最低要求:

操作系统: Windows 7 或更高版本 (64-bit)
磁盘空间: 400 MB (不包括Android Studio的磁盘空间).
工具: Flutter 依赖下面这些命令行工具.
- Git for Windows (Git命令行工具)
  
  如果已安装Git for Windows，请确保命令提示符或PowerShell中运行 git 命令，不然在后面运行flutter doctor时将出现Unable to find git in your PATH错误, 此时需要手动添加C:\Program Files\Git\bin至Path系统环境变量中。如果是32位的Windows系统，请将Program Files换成Program File (X86)

获取Flutter SDK

去flutter官网下载其最新可用的安装包，点击下载；

注意，Flutter的渠道版本会不停变动，请以Flutter官网为准。另外，在中国大陆地区，要想正常获取安装包列表或下载安装包，可能需要翻墙，读者也可以去Flutter github项目下去下载安装包。
将安装包zip解压到你想安装Flutter SDK的路径（如：C:\src\flutter；注意，不要将flutter安装到需要一些高权限的路径如C:\Program Files\）。
在Flutter安装目录的flutter文件下找到flutter_console.bat，双击运行并启动flutter命令行，接下来，你就可以在Flutter命令行运行flutter命令了。

注意： 由于一些flutter命令需要联网获取数据，如果您是在国内访问，由于众所周知的原因，直接访问很可能不会成功。上面的PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL是google为国内开发者搭建的临时镜像。详情请参考 Using Flutter in China

上述命令为当前终端窗口临时设置PATH变量。要将Flutter永久添加到路径中，请参阅更新路径。

要更新现有版本的Flutter，请参阅升级Flutter。

更新环境变量

要在终端运行 flutter 命令，你需要添加以下环境变量到系统PATH：

转到 “控制面板>用户帐户>用户帐户>更改我的环境变量”
在“用户变量”下检查是否有名为“Path”的条目:
- 如果该条目存在, 追加 flutter\bin的全路径，使用 ; 作为分隔符.
- 如果条目不存在, 创建一个新用户变量 Path ，然后将 flutter\bin的全路径作为它的值.
在“用户变量”下检查是否有名为”PUB_HOSTED_URL”和”FLUTTER_STORAGE_BASE_URL”的条目，如果没有，也添加它们。

重启Windows以应用此更改

运行 flutter doctor

打开一个新的命令提示符或PowerShell窗口并运行以下命令以查看是否需要安装任何依赖项来完成安装：

 flutter doctor

在命令提示符或PowerShell窗口中运行此命令。目前，Flutter不支持像Git Bash这样的第三方shell。

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

例如:

[-] Android toolchain - develop for Android devices
    • Android SDK at D:\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.io/setup/#android-setup for detailed instructions.

第一次运行一个flutter命令（如flutter doctor）时，它会下载它自己的依赖项并自行编译。以后再运行就会快得多。

以下各部分介绍如何执行这些任务并完成设置过程。你会看到在flutter doctor输出中，如果你选择使用IDE，我们提供了，IntelliJ IDEA，Android Studio和VS Code的插件，请参阅编辑器设置以了解安装Flutter和Dart插件的步骤。

一旦你安装了任何缺失的依赖，再次运行flutter doctor命令来验证你是否已经正确地设置了。

该flutter工具使用Google Analytics匿名报告功能使用情况统计信息和基本崩溃报告。这些数据用于帮助改进Flutter工具。Analytics不是一运行或在运行涉及flutter config的任何命令时就发送，因此您可以在发送任何数据之前退出分析。要禁用报告，请执行flutter config --no-analytics并显示当前设置，然后执行flutter config。请参阅Google的隐私政策。

编辑器设置

使用 flutter 命令行工具，您可以使用任何编辑器来开发Flutter应用程序。输入flutter help在提示符下查看可用的工具。

我们建议使用我们的插件来获得丰富的IDE体验，支持编辑，运行和调试Flutter应用程序。请参阅编辑器设置了解详细步骤

Android设置

安装Android Studio

要为Android开发Flutter应用，您可以使用Mac，Windows或Linux（64位）机器.

Flutter需要安装和配置Android Studio:

下载并安装 Android Studio.
启动Android Studio，然后执行“Android Studio安装向导”。这将安装最新的Android SDK，Android SDK平台工具和Android SDK构建工具，这是Flutter为Android开发时所必需的

设置您的Android设备

要准备在Android设备上运行并测试您的Flutter应用，您需要安装Android 4.1（API level 16）或更高版本的Android设备.

在您的设备上启用 开发人员选项 和 USB调试 。详细说明可在Android文档中找到。
使用USB将手机插入电脑。如果您的设备出现提示，请授权您的计算机访问您的设备。
在终端中，运行 flutter devices 命令以验证Flutter识别您连接的Android设备。
运行启动您的应用程序 flutter run。

默认情况下，Flutter使用的Android SDK版本是基于你的 adb 工具版本。如果您想让Flutter使用不同版本的Android SDK，则必须将该 ANDROID_HOME 环境变量设置为SDK安装目录。

设置Android模拟器

要准备在Android模拟器上运行并测试您的Flutter应用，请按照以下步骤操作：

在您的机器上启用 VM acceleration .
启动 Android Studio>Tools>Android>AVD Manager 并选择 Create Virtual Device.
选择一个设备并选择 Next。
为要模拟的Android版本选择一个或多个系统映像，然后选择 Next. 建议使用 x86 或 x86_64 image .
在 Emulated Performance下, 选择 Hardware - GLES 2.0 以启用硬件加速.
验证AVD配置是否正确，然后选择 Finish。

有关上述步骤的详细信息，请参阅 Managing AVDs.
在 Android Virtual Device Manager中, 点击工具栏的 Run。模拟器启动并显示所选操作系统版本或设备的启动画面.
运行 flutter run 启动您的设备. 连接的设备名是 Android SDK built for <platform>,其中 platform 是芯片系列, 如 x86.

在macOS上搭建Flutter开发环境

使用镜像
系统要求
获取Flutter SDK
- 运行 flutter doctor
- 更新环境变量
编辑器设置
平台设置
iOS 设置
Android设置
下一步

使用镜像

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

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

注意： 此镜像为临时镜像，并不能保证一直可用，读者可以参考详情请参考 Using Flutter in China 以获得有关镜像服务器的最新动态。

系统要求

要安装并运行Flutter，您的开发环境必须满足以下最低要求:

操作系统: macOS (64-bit)
磁盘空间: 700 MB (不包括Xcode或Android Studio的磁盘空间）.
工具: Flutter 依赖下面这些命令行工具.
- bash, mkdir, rm, git, curl, unzip, which

获取Flutter SDK

去flutter官网下载其最新可用的安装包，转到下载页。

注意，Flutter的渠道版本会不停变动，请以Flutter官网为准。另外，在中国大陆地区，要想正常获取安装包列表或下载安装包，可能需要翻墙，读者也可以去Flutter github项目下去下载安装包，转到下载页。

解压安装包到你想安装的目录，如：

cd ~/development
unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip

添加flutter相关工具到path中：
```
export PATH=`pwd`/flutter/bin:$PATH
```
此代码只能暂时针对当前命令行窗口设置PATH环境变量，要想永久将Flutter添加到PATH中请参考下面更新环境变量 部分。

要更新现有版本的Flutter，请参阅升级Flutter。

运行 flutter doctor

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

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.io/setup/#android-setup for detailed instructions.

一般的错误会是xcode或Android Studio版本太低、或者没有ANDROID_HOME环境变量等，请按照提示解决。下面贴一个笔者本机(mac)的环境变量配置，您可以对比修正：

  export PATH=/Users/用户名/Documents/flutter/flutter/bin:$PATH
  export ANDROID_HOME="/Users/用户名/Documents/android_sdk" //android sdk目录，替换为你自己的即可
  export PATH=${PATH}:${ANDROID_HOME}/tools
  export PATH=${PATH}:${ANDROID_HOME}/platform-tools
  export PUB_HOSTED_URL=https://pub.flutter-io.cn
  export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

第一次运行一个flutter命令（如flutter doctor）时，它会下载它自己的依赖项并自行编译。以后再运行就会快得多。

一旦你安装了任何缺失的依赖，再次运行flutter doctor命令来验证你是否已经正确地设置了。

更新环境变量

您在命令行只能更新当前会话的PATH变量，如Clone Flutter repo所示。但是，您可能需要的是永久更新此变量，以便您可以运行flutter命令在任何终端会话中。

对于所有终端会话永久修改此变量的步骤是和特定计算机系统相关的。通常，您会在打开新窗口时将设置环境变量的命令添加到执行的文件中。例如

确定您Flutter SDK的目录，您将在步骤3中用到。
打开(或创建) $HOME/.bash_profile. 文件路径和文件名可能在您的机器上不同.
添加以下行并更改[PATH_TO_FLUTTER_GIT_DIRECTORY]为克隆Flutter的git repo的路径:

export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH

注意：PATH_TO_FLUTTER_GIT_DIRECTORY 为你flutter的路径，比如“~/document/code”

 export PATH=~/document/code/flutter/bin:$PATH

运行 source $HOME/.bash_profile 刷新当前终端窗口.

注意: 如果你使用的是zsh，终端启动时 ~/.bash_profile 将不会被加载，解决办法就是修改 ~/.zshrc ，在其中添加：source ~/.bash_profile

5.通过运行flutter/bin命令验证目录是否在已经在PATH中:

echo $PATH

更多详细信息，请参阅this StackExchange question.

编辑器设置

使用 flutter 命令行工具，您可以使用任何编辑器来开发Flutter应用程序。输入flutter help在提示符下查看可用的工具。

我们建议使用我们的插件来获得丰富的IDE体验，支持编辑，运行和调试Flutter应用程序。请参阅编辑器设置了解详细步骤

平台设置

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

iOS 设置

安装 Xcode

要为iOS开发Flutter应用程序，您需要Xcode 7.2或更高版本:

安装Xcode 7.2或更新版本(通过链接下载或苹果应用商店).
配置Xcode命令行工具以使用新安装的Xcode版本 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer 对于大多数情况，当您想要使用最新版本的Xcode时，这是正确的路径。如果您需要使用不同的版本，请指定相应路径。
确保Xcode许可协议是通过打开一次Xcode或通过命令sudo xcodebuild -license同意过了.

使用Xcode，您可以在iOS设备或模拟器上运行Flutter应用程序。

设置iOS模拟器

要准备在iOS模拟器上运行并测试您的Flutter应用，请按以下步骤操作：

在Mac上，通过Spotlight或使用以下命令找到模拟器:
```
open -a Simulator
```
通过检查模拟器 硬件>设备 菜单中的设置，确保您的模拟器正在使用64位设备（iPhone 5s或更高版本）.
根据您的开发机器的屏幕大小，模拟的高清屏iOS设备可能会使您的屏幕溢出。在模拟器的 Window> Scale 菜单下设置设备比例
运行 flutter run启动您的应用.

安装到iOS设备

要将您的Flutter应用安装到iOS真机设备，您需要一些额外的工具和一个Apple帐户，您还需要在Xcode中进行设置。

安装 homebrew （如果已经安装了brew,跳过此步骤）.

打开终端并运行这些命令来安装用于将Flutter应用安装到iOS设备的工具

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

如果这些命令中的任何一个失败并出现错误，请运行brew doctor并按照说明解决问题.

遵循Xcode签名流程来配置您的项目:
1. 在你Flutter项目目录中通过 open ios/Runner.xcworkspace 打开默认的Xcode workspace.
2. 在Xcode中，选择导航面板左侧中的Runner项目
3. 在Runner target设置页面中，确保在 常规>签名>团队 下选择了您的开发团队。当您选择一个团队时，Xcode会创建并下载开发证书，向您的设备注册您的帐户，并创建和下载配置文件（如果需要）
  - 要开始您的第一个iOS开发项目，您可能需要使用您的Apple ID登录Xcode.
    
    任何Apple ID都支持开发和测试。需要注册Apple开发者计划才能将您的应用分发到App Store. 查看differences between Apple membership types.
  - 当您第一次attach真机设备进行iOS开发时，您需要同时信任你的Mac和该设备上的开发证书。首次将iOS设备连接到Mac时,请在对话框中选择 Trust。
    
    然后，转到iOS设备上的设置应用程序，选择 常规>设备管理 并信任您的证书。
  - 如果Xcode中的自动签名失败，请验证项目的 General > Identity > Bundle Identifier 值是否唯一.
运行启动您的应用程序 flutter run.

Android设置

安装Android Studio

要为Android开发Flutter应用，您可以使用Mac，Windows或Linux（64位）机器.

Flutter需要安装和配置Android Studio:

下载并安装 Android Studio.
启动Android Studio，然后执行“Android Studio安装向导”。这将安装最新的Android SDK，Android SDK平台工具和Android SDK构建工具，这是Flutter为Android开发时所必需的

设置您的Android设备

要准备在Android设备上运行并测试您的Flutter应用，您需要安装Android 4.1（API level 16）或更高版本的Android设备.

在您的设备上启用 开发人员选项 和 USB调试 。详细说明可在Android文档中找到。
使用USB将手机插入电脑。如果您的设备出现提示，请授权您的计算机访问您的设备。
在终端中，运行 flutter devices 命令以验证Flutter识别您连接的Android设备。
运行启动您的应用程序 flutter run。

设置Android模拟器

要准备在Android模拟器上运行并测试您的Flutter应用，请按照以下步骤操作：

在您的机器上启用 VM acceleration .
启动 Android Studio>Tools>Android>AVD Manager 并选择 Create Virtual Device.
选择一个设备并选择 Next。
为要模拟的Android版本选择一个或多个系统映像，然后选择 Next. 建议使用 x86 或 x86_64 image .
在 Emulated Performance下, 选择 Hardware - GLES 2.0 以启用硬件加速.
验证AVD配置是否正确，然后选择 Finish。

有关上述步骤的详细信息，请参阅 Managing AVDs.
在 Android Virtual Device Manager中, 点击工具栏的 Run。模拟器启动并显示所选操作系统版本或设备的启动画面.
运行 flutter run 启动您的设备. 连接的设备名是 Android SDK built for <platform>,其中 platform 是芯片系列, 如 x86.

Android Studio 安装

Android Studio: 为Flutter提供完整的IDE体验

安装Android Studio

Android Studio, 3.0或更高版本.

或者，您也可以使用IntelliJ：

IntelliJ IDEA Community, version 2017.1或更高版本.
IntelliJ IDEA Ultimate, version 2017.1 或更高版本.

安装Flutter和Dart插件

需要安装两个插件:

Flutter插件：支持Flutter开发工作流 (运行、调试、热重载等).
Dart插件：提供代码分析 (输入代码时进行验证、代码补全等).

要安装这些:

启动Android Studio.
打开插件首选项 (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux).
选择 Browse repositories…, 选择 Flutter 插件并点击 install.
重启Android Studio后插件生效.

Android Studio: 为Flutter提供完整的IDE体验.

创建新应用

选择 File>New Flutter Project
选择 Flutter application 作为 project 类型, 然后点击 Next
输入项目名称 (如 myapp), 然后点击 Next
点击 Finish
等待Android Studio安装SDK并创建项目.

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

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

运行应用程序

定位到Android Studio 工具栏:
在 target selector 中, 选择一个运行该应用的Android设备. 如果没有列出可用，请选择 Tools>Android>AVD Manager 并在那里创建一个
在工具栏中点击 Run图标, 或者调用菜单项 Run > Run.
如果一切正常, 您应该在您的设备或模拟器上会看到启动的应用程序:

体验热重载

Flutter 可以通过 热重载（hot reload） 实现快速的开发周期，热重载就是无需重启应用程序就能实时加载修改后的代码，并且不会丢失状态（译者语:如果是一个web开发者，那么可以认为这和webpack的热重载是一样的）。简单的对代码进行更改，然后告诉IDE或命令行工具你需要重新加载（点击reload按钮），你就会在你的设备或模拟器上看到更改。

将字符串
'You have pushed the button this many times:' 更改为
'You have clicked the button this many times:'
不要按“Stop”按钮; 让您的应用继续运行。
要查看您的更改, 只需调用 Save All (cmd-s / ctrl-s), 或点击 热重载按钮 (带有闪电⚡️图标的按钮).

你就会立即看到更新后的字符串。

Terminal + 编辑器: 您的编辑选择与Flutter的终端工具结合运行和构建

创建新的应用

使用 flutter create 命令创建一个project:

$ flutter create myapp
$ cd myapp

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

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

运行应用程序

检查Android设备是否在运行。如果没有显示, 请参照设置.

$ flutter devices

运行 flutter run 命令来运行应用程序:

$ flutter run

如果一切正常，在应用程序建成功后，您应该在您的设备或模拟器上看到应用程序:

体验热重载

打开文件lib/main.dart
将字符串
'You have pushed the button this many times:' 更改为
'You have clicked the button this many times:'
不要按“停止”按钮; 让您的应用继续运行.
要查看您的更改，请调用 Save (cmd-s / ctrl-s), 或者点击 热重载按钮 (带有闪电图标的按钮).

你会立即在运行的应用程序中看到更新的字符串

参考资料：

Dart中文网：https://www.kancloud.cn/marswill/dark2_document/709087

Flutter中文网：https://flutterchina.club/

Flutter官网（英文网）：https://flutter.dev/

Flutter SDK官网下载：https://flutter.dev/docs/development/tools/sdk/releases#windows

Flutter中文网开源项目：https://flutterchina.club/opensource.html

Flutter实战：https://book.flutterchina.club/

Flutter系列——一、搭建Flutter开发环境

在Windows上搭建Flutter开发环境

用镜像

系统要求

获取Flutter SDK

更新环境变量

运行 flutter doctor

编辑器设置

Android设置

安装Android Studio

设置您的Android设备

设置Android模拟器

在macOS上搭建Flutter开发环境

使用镜像

系统要求

获取Flutter SDK

运行 flutter doctor

更新环境变量

编辑器设置

平台设置

iOS 设置

安装 Xcode

设置iOS模拟器

安装到iOS设备

Android设置

安装Android Studio

设置您的Android设备

设置Android模拟器

Android Studio 安装

安装Android Studio

安装Flutter和Dart插件

创建新应用

运行应用程序

体验热重载

创建新的应用

运行应用程序

体验热重载

猜你喜欢