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

1. 解压下载好的Flutter SDK：
   这个在Windows和macOS都是一样的（选择一个自己想要安装的目录），但是在macOS中，我通常会讲flutter目录拖入到应用程序中，将其当作我的一个应用（个人习惯而已）
2. 配置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或更新版本(通过链接下载或苹果应用商店).

1. 直接在App Store上搜索Xcode，找到安装即可
   1.1 这种安装方式有一个缺点，安装的一定是最新版本的（当然是用最新版本的最好）
   1.2 但是最新版本的Xcode会对macOS系统有一定的要求，所以可能还要设计到系统升级
   1.3 如果不希望系统升级，可以选择第二种方式
2. 第二种方式是安装自己想要的Xcode的版本，需要手动去下载
   2.1 进入https://developer.apple.com/download/more[2]页面
   2.2 登录自己的Apple ID
   2.3 在搜索框输入Xcode，回车搜索，找到各种版本Xcode下载即可
3. 配置Xcode命令行工具以使用新安装的Xcode版本 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer 对于大多数情况，当您想要使用最新版本的Xcode时，这是正确的路径。如果您需要使用不同的版本，请指定相应路径。
4. 确保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插件： 提供代码分析 (输入代码时进行验证、代码补全等)。

安装步骤：

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

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

创建Flutter应用

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

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

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

运行应用程序

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

   图1-3

2. 在 target selector 中, 选择一个运行该应用的Android设备。如果没有列出可用，请选择 Tools>Android>AVD Manager 并在那里创建一个。

3. 在工具栏中点击 Run图标。

4. 如果一切正常, 您应该在您的设备或模拟器上会看到启动的应用程序：

   图1-4

体验热重载

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

1. 打开lib/main.dart文件

2. 将字符串 'You have pushed the button this many times:' 更改为 'You have clicked the button this many times:'

3. 不要按“停止”按钮; 让您的应用继续运行.

4. 要查更改，请调用 Save (cmd-s / ctrl-s)，或者点击 热重载按钮 (带有闪电⚡️图标的按钮)。

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

VS Code的配置与使用

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

安装flutter插件

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

创建Flutter应用

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

体验热重载

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

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

1.3.3 连接设备运行Flutter应用

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

连接Android模拟器

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

1. 启动 Android Studio>Tools>Android>AVD Manager 并选择 Create Virtual Device.

2. 选择一个设备并选择 Next。

3. 为要模拟的Android版本选择一个或多个系统印象，然后选择 Next. 建议使用 x86 或 x86_64 image .

4. 在 “Emulated Performance”下, 选择 Hardware - GLES 2.0 以启用 硬件加速.

5. 验证AVD配置是否正确，然后选择 Finish。

   有关上述步骤的详细信息，请参阅 Managing AVDs.

6. 在“Android Virtual Device Manager”中，点击工具栏的 Run。模拟器启动并显示所选操作系统版本或设备的启动画面。

7. 运行 flutter run 启动您的设备。 连接的设备名是 Android SDK built for <platform>，其中 platform 是芯片系列，如 x86。

连接Android真机设备

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

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

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

连接iOS模拟器

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

1. 在你的MAC上，通过 Spotlight 或以下命令找到模拟器：

   open -a Simulator
   

2. 通过检查模拟器 Hardware > Device 菜单中的设置，确保模拟器正在使用64位设备（iPhone 5s或更高版本）。

3. 根据你电脑屏幕大小，模拟高清屏iOS设备可能会溢出屏幕。可以在模拟器的 Window> Scale 菜单下设置设备比例。

4. 运行 flutter run启动flutter应用程序。

连接iOS真机设备

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

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

2. 打开终端并运行如下这些命令:

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

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

3. 遵循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 库造成的，解决方法如下：

1. 进入当前所在项目名/android

2. 打开 build.gradle

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

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

4. 进入 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 是否有设置代理。删除后问题即可解决。