Flutter新手教程：如何搭建开发环境？

Flutter 可以运行在 Windows、MacOS、Linux 等系统的多个平台上。接下来，我们将介绍如何在 Windows 和 macOS 上构建 Flutter 开发环境，并回顾 Flutter 开发环境。

1 下载Flutter SDK

前往Flutter官网下载最新的SDK。 macOS版本下载界面如图所示。

Windows版本下载界面如图。

由于国内Flutter官方网站的访问有时会受到限制而无法访问，您可以从Flutter GitHub主页https://github.com/flutter/flutter/releases下载SDK，并选择下载最新的ZIP包裹。 。

下载ZIP包后，将安装ZIP包解压到要安装Flutter SDK的文件目录（例如C:\src\flutter）。请记住不要将 Flutter SDK 安装在需要某些高级权限的路径中。 ，例如 C:\Program Files\ 或 C:\Program Files (x86)。

2 设置镜像地址和环境变量

由于国内访问Flutter官网有时会受到限制，Flutter官方为国内开发者制作了一个临时镜像，需要添加以下环境变量。

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

请注意，该图像是临时的，不能保证始终可用。有关镜像服务器的最新更新，请访问 Flutter GitHub 主页 https://github.com/flutter/flutter/wiki。

要运行Flutter命令，还必须将Flutter SDK的完整路径（例如\flutter\bin）设置为PATH环境变量。具体设置方法如下。

在 macOS 中设置镜像地址。具体步骤如下。

(1) 打开 macOS 自带的终端，输入命令行 vi./.bash_profile。

(2) 将以下Flutter相关工具添加到PATH中。

export PATH=$PATH: [ 你计算机本地安装 Flutter 的路径 ]/flutter/bin

(3) 设置完以上变量后，输入命令使其生效。

Source ./.bash_profile

(4) 检查设置是否成功，输入以下命令行。

echo $PATH

3 安装和设置Android Studio

安装和设置Android Studio的具体步骤如下。 （1）进入Android开发者官方网站，下载并安装Android Studio。安装完成后，启动Android Studio并按照安装向导安装最新的Android SDK和Flutter相关工具。

(2) 进入Android Studio的设置界面，选择“Android Studio → Preferences... → Plugins”，安装Flutter Plugin和Dart Plugin。

(3) 在插件设置界面中，搜索“flutter”，点击“安装”按钮进行安装。

(4) 然后继续在插件设置界面中搜索“dart”，点击“安装”按钮进行安装。 （5）安装完成后，重新启动Android Studio，会看到“Create a new Flutter project”，这说明安装成功，可以直接创建Flutter项目了。

4 安装Visual Studio Code 和Flutter 开发插件

安装和设置Visual Studio Code（简称VS Code）的具体步骤如下。 （1）进入VS code官网，根据自己的电脑系统下载并安装对应的VS code。 Windows和MacOS的安装步骤类似，这里不再赘述。安装完成后，启动 VS Code，打开的界面如图所示。

（2）进入VS Code的打开界面后，选择左侧“扩展→搜索扩展”，搜索“flutter”，点击“安装”（或“Ins​​tall”）安装Flutter开发插件。

(3)同样的方法，继续在Search Extensions设置界面中搜索“dart”，点击“Install”（或“Ins​​tall”）按钮进行安装。

5 IDE使用与配置

Flutter官方推荐两款编辑器——VS Code和Android Studio，以获得更好的开发体验。代码补全、语法高亮、编辑辅助、启动、调试等功能可以通过IDE和插件实现，大大提高开发效率。

对于以上Flutter官方推荐的两种编辑器，基于调试和程序开发的方便，建议使用Android Studio编辑器。

6 安装 Xcode

要开发适用于 iOS 的 Flutter 应用程序，您需要一台 macOS 计算机并安装 Xcode。在 macOS 上安装 Xcode 的步骤非常简单。只需在 macOS 自带的 App Store 中搜索“Xcode”，然后一键安装即可。

7 检查Flutter开发环境

经过以上几节的安装操作，Flutter开发环境的搭建工作已经完成，但是在开始Flutter开发之旅之前，需要检查一下Flutter开发是否正常环境正常。在终端命令行中输入 flutter doctor，终端窗口中会出现以下消息信息。

Doctor summary (to see all details, run flutter doctor -v):[√] Flutter (Channel stable, 2.0.4, on macOS 11.2.3 20D91 darwin-x64, localezh-Hans-CN)[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)[√] Xcode - develop for iOS and macOS[√] Chrome - develop for the web[√] Android Studio (version 4.1)[√] VS Code (version 1.57.1)[√] Connected device (1 available)·No issues found!

结果显示没有缺失环境。如果出现红十字，我们就必须解决环境问题。