1.1. 操作系统选择

学习阶段： Windows或者macOS（苹果操作系统）都是可以的

开发阶段：一般需要使用macOS，因为我们需要针对iOS进行调试，通常方便起见还是选择macOS

1.2. 安装Flutter SDK

配置镜像

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

macOS或者Linux系统:
打开terminal, 先进入用户主目录cd ~，然后使用命令行sudo vim ~/.bash_profile，编辑.bash_profile文件，添加如下代码：
```
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
```
然后使用命令行：source ~/.bash_profile，使其生效。
Windows
1.1 点击计算机图标 - 属性 - 高级系统设置 - 高级 - 环境变量
1.2 新建变量：
PUB_HOSTED_URL，其值为https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL，其值为https://storage.flutter-io.cn

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

下载Flutter的SDK

来到Flutter的官网网站，选择最新稳定的Flutter SDK的版本

网站地址：https://flutter.dev/docs/development/tools/sdk/releases?tab=macos
选择自己的操作系统和最新稳定的版本（Stable版本）（我当前最新稳定的版本是1.12.13）

安装Flutter

解压下载好的Flutter SDK：
这个在Windows和macOS都是一样的（选择一个自己想要安装的目录），但是在macOS中，我通常会讲flutter目录拖入到应用程序中，将其当作我的一个应用（个人习惯而已）
配置Flutter和Dart的环境变量：
因为我们之后需要在命令行执行Flutter的命令，所以需要配置环境变量
- macOS或者Linux系统：sudo vim ~/.bash_profile
```
export FLUTTER_HOME=/Applications/flutter
export PATH=$PATH:$FLUTTER_HOME/bin
export PATH=$PATH:$FLUTTER_HOME/bin/cache/dart-sdk/bin
```
然后使用命令行：source ~/.bash_profile，使其生效。
- Windows
  1.1 点击计算机图标 -> 属性 -> 高级系统设置 -> 高级 -> 环境变量 -> 找到Path目录(如果没有，创建一个新用户变量 Pathh)。
  1.2 在Path中分别添加Flutter和Dart的bin目录所在路劲。

1.3. 安装 Xcode

要为iOS开发Flutter应用程序，您需要Xcode 9.0或更高版本:
安装Xcode 9.0或更新版本(通过链接下载或苹果应用商店).

直接在App Store上搜索Xcode，找到安装即可
1.1 这种安装方式有一个缺点，安装的一定是最新版本的（当然是用最新版本的最好）
1.2 但是最新版本的Xcode会对macOS系统有一定的要求，所以可能还要设计到系统升级
1.3 如果不希望系统升级，可以选择第二种方式
第二种方式是安装自己想要的Xcode的版本，需要手动去下载
2.1 进入https://developer.apple.com/download/more[2]页面
2.2 登录自己的Apple ID
2.3 在搜索框输入Xcode，回车搜索，找到各种版本Xcode下载即可
配置Xcode命令行工具以使用新安装的Xcode版本 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer 对于大多数情况，当您想要使用最新版本的Xcode时，这是正确的路径。如果您需要使用不同的版本，请指定相应路径。
确保Xcode许可协议是通过打开一次Xcode或通过命令sudo xcodebuild -license同意过了.
使用Xcode，您可以在iOS设备或模拟器上运行Flutter应用程序。

1.4. 安装Android Studio

如果想为Flutter配置Android开发环境，需要在我们的电脑上安装一个Android Studio

Android Studio是基于IntelliJ IDEA的、Google 官方的 Android 应用集成开发环境 (IDE)。

Android Studio的下载

官网地址：https://developer.android.com/studio/?utm_source=android-studio
直接在官方下载即可
安装直接双击安装即可

创建Android模拟器

Configure -> AVD Manger -> create virtual device -> 选择想安装的模拟器设备 -> 下载

注意：安装Android Studio之前需先保证已安装JDK1.8

升级 Flutter

Flutter SDK分支

Flutter SDK有多个分支，如beta、dev、master、stable，其中stable分支为稳定分支（日后有新的稳定版本发布后可能也会有新的稳定分支，如1.0.0），dev和master为开发分支，安装flutter后，你可以运行flutter channel查看所有分支，如笔者本地运行后，结果如下：

Flutter channels:
  beta
  dev
* master

带"*"号的分支即你本地的Flutter SDK 跟踪的分支，要切换分支，可以使用flutter channel beta 或 flutter channel master，Flutter官方建议跟踪稳定分支，但你也可以跟踪master分支，这样可以查看最新的变化，但这样稳定性要低的多。

升级Flutter SDK和依赖包

要升级flutter sdk，只需一句命令：

flutter upgrade

该命令会同时更新Flutter SDK和你的flutter项目依赖包。如果你只想更新项目依赖包（不包括Flutter SDK），可以使用如下命令：

flutter packages get获取项目所有的依赖包。
flutter packages upgrade 获取项目所有依赖包的最新版本。

1.3.2 IDE配置与使用

理论上可以使用任何文本编辑器与命令行工具来构建Flutter应用程序。不过，Flutter官方建议使用Android Studio和VS Code之一以获得更好的开发体验。Flutter官方提供了这两款编辑器插件，通过IDE和插件可获得代码补全、语法高亮、widget编辑辅助、运行和调试支持等功能，可以帮助我们极大的提高开发效率。下面我们分别介绍一下Android Studio和VS Code的配置及使用（Android Studio和VS Code读者可以在其官网获得最新的安装，由于安装比较简单，故不再赘述）。

Android Studio 配置与使用

由于Android Studio是基于IntelliJ IDEA开发的，所以读者也可以使用IntelliJ IDEA。

安装Flutter和Dart插件

需要安装两个插件:

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

安装步骤：

启动Android Studio。
打开插件首选项 (macOS：Preferences>Plugins, Windows：File>Settings>Plugins)。
选择 Browse repositories…，选择 flutter 插件并点击 install。
重启Android Studio后插件生效。

接下来，让我们用Android Studio创建一个Flutter项目，然后运行它，并体验“热重载”。

创建Flutter应用

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

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

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

运行应用程序

定位到Android Studio工具栏，如图1-3所示：

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

图1-4

体验热重载

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

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

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

VS Code的配置与使用

VS Code是一个轻量级编辑器，支持Flutter运行和调试。

安装flutter插件

启动 VS Code。
调用 View>Command Palette…。
输入 ‘install’, 然后选择 Extensions: Install Extension action。
在搜索框输入 flutter ，在搜索结果列表中选择 ‘Flutter’, 然后点击 Install。
选择 ‘OK’ 重新启动 VS Code。
验证配置
- 调用 View>Command Palette…
- 输入 ‘doctor’, 然后选择 ‘Flutter: Run Flutter Doctor’ action。
- 查看“OUTPUT”窗口中的输出是否有问题

创建Flutter应用

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

体验热重载

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

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

1.3.3 连接设备运行Flutter应用

Window下只支持为Android设备构建并运行Flutter应用，而macOS同时支持iOS和Android设备。下面分别介绍如何连接Android和iOS设备来运行flutter应用。

连接Android模拟器

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

启动 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真机设备

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

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

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

连接iOS模拟器

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

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

连接iOS真机设备

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

安装 homebrew （如果已经安装了brew,跳过此步骤）。
打开终端并运行如下这些命令:
```
brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup
```
如果这些命令中的任何一个失败并出现错误，请运行brew doctor并按照说明解决问题.
遵循Xcode签名流程来配置您的项目:
- 在你Flutter项目目录中通过 open ios/Runner.xcworkspace 打开默认的Xcode workspace.
- 在Xcode中，选择导航面板左侧中的Runner项目。
- 在Runner target设置页面中，确保在 General > Signing > Team 下选择了你的开发团队。当你选择一个团队时，Xcode会创建并下载开发证书，向你的设备注册你的帐户，并创建和下载配置文件（如果需要）。
- 要开始您的第一个iOS开发项目，您可能需要使用您的Apple ID登录Xcode，如图1-5：
  
  图1-5
  
  任何Apple ID都支持开发和测试，但若想将应用分发到App Store，就必须注册Apple开发者计划，有关详情读者可以自行了解。
- 当您第一次attach真机设备进行iOS开发时，需要同时信任你的Mac和该设备上的开发证书。首次将iOS设备连接到Mac时，请在对话框中选择 Trust。
  
  添加信任
  
  然后，转到iOS设备上的设置菜单，选择 常规>设备管理 并信任您的证书。
- 如果Xcode中的自动签名失败，请验证项目的 General > Identity > Bundle Identifier 值是否唯一，如图1-7所示：
  
  验证bundle id是否唯一
- 运行 flutter run启动flutter应用程序。

1.3.4 常见配置问题

Android Studio问题

缺少依赖库问题

上手安卓最常遇见的问题之一，错误如图1-8所示，此时点击超链接即可自动跳转到安装页面

图1-8

安装之后重新运行即可，如图1-9：

install_request_components.png

连接不上Android Repository

这也是最常见的问题之一，当你发现自己无法下载部分依赖的时候，请优先考虑这种情况。进入 File -> Settings -> Appearance & Behavior -> System Settings -> Android SDK -> SDK Update Sites 列表，可以看到此时的 Android Repository 无法连接，如图1-10所示：

下载依赖失败

这是由于要去Google下载Android SDK，但在国内目前无法访问Google所致，因此，我们可以配置代理或使用vpn。

安卓包配置问题

一般格式为

Could not HEAD **
Could not Get **

如：Android Studio Could not GET gradle-3.2.0.pom

这一类问题是由于无法连接到 Maven 库造成的，解决方法如下：

进入当前所在项目名/android
打开 build.gradle

找到下面这一部分，并加上 maven { url 'http://maven.aliyun.com/nexus/content/groups/public/' }

allprojects {
    repositories {
      google()
      jcenter()
      maven { url 'http://maven.aliyun.com/nexus/content/groups/public/' } //添加这一句
    }
}

进入 File/ Settings/ Build, Execution, Deployment/ BuildTools/ Gradle/ Android Studio 中，勾选上 Enable embedded Maven repository ，重启 Android Studio 即可解决。

注意：存在这样的一种情况，当你根据上述步骤设置了之后，依旧无法解决这个问题，并有类似于 Could not HEAD maven.aliyun.com 的报错信息，请检查 C:\Users\{user_name}\.gradle\gradle.properties 是否有设置代理。删除后问题即可解决。

Flutter 环境配置及创建

Flutter 环境配置及创建

1.1. 操作系统选择

学习阶段： Windows或者macOS（苹果操作系统）都是可以的

开发阶段：一般需要使用macOS，因为我们需要针对iOS进行调试，通常方便起见还是选择macOS

1.2. 安装Flutter SDK

配置镜像

下载Flutter的SDK

安装Flutter

1.3. 安装 Xcode

1.4. 安装Android Studio

Android Studio的下载

创建Android模拟器

升级 Flutter

Flutter SDK分支

升级Flutter SDK和依赖包

1.3.2 IDE配置与使用

Android Studio 配置与使用

安装Flutter和Dart插件

创建Flutter应用

运行应用程序

体验热重载

VS Code的配置与使用

安装flutter插件

创建Flutter应用

体验热重载

1.3.3 连接设备运行Flutter应用

连接Android模拟器

连接Android真机设备

连接iOS模拟器

连接iOS真机设备

1.3.4 常见配置问题

Android Studio问题

缺少依赖库问题

连接不上Android Repository

安卓包配置问题

Flutter 环境配置及创建

1.1. 操作系统选择

学习阶段： Windows或者macOS（苹果操作系统）都是可以的

开发阶段： 一般需要使用macOS，因为我们需要针对iOS进行调试，通常方便起见还是选择macOS

1.2. 安装Flutter SDK

配置镜像

下载Flutter的SDK

安装Flutter

1.3. 安装 Xcode

1.4. 安装Android Studio

Android Studio的下载

创建Android模拟器

升级 Flutter

Flutter SDK分支

升级Flutter SDK和依赖包

1.3.2 IDE配置与使用

Android Studio 配置与使用

安装Flutter和Dart插件

创建Flutter应用

运行应用程序

体验热重载

VS Code的配置与使用

安装flutter插件

创建Flutter应用

体验热重载

1.3.3 连接设备运行Flutter应用

连接Android模拟器

连接Android真机设备

连接iOS模拟器

连接iOS真机设备

1.3.4 常见配置问题

Android Studio问题

缺少依赖库问题

连接不上Android Repository

安卓包配置问题

开发阶段：一般需要使用macOS，因为我们需要针对iOS进行调试，通常方便起见还是选择macOS