创建您的第一个 Flutter 应用

目标：创建一个 Flutter 应用程序（该项目可运行并包含至少一个测试），并且体验运行、测试、打包的流程。

演示平台：macOS

Flutter 是什么

Flutter 是一款移动应用程序SDK，一份代码可以同时生成 iOS 和 Android 两个应用程序。应用程序是用 Dart 语言编写的。

安装 Flutter SDK

下载 Flutter SDK

我们可以使用 Git 命令行下载（如果尚未安装 Git，可以查看 Git 安装配置教程）：

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

我们也可以在 Flutter 网站 下载：

解压安装包

下载 Flutter SDK 压缩包到后，我们将在 (~/workspace/flutter) 安装 Flutter SDK ，即把压缩包解压到想要安装的目录下。可以手动解压，也可以用命令行解压：

# 跳转到想要安装的目录下
cd ~/workspace
   
# 解压压缩包，压缩包的路径是~/Downloads/flutter_macos_2.5.3-stable.zip
unzip ~/Downloads/flutter_macos_2.5.3-stable.zip

添加 PATH

为了运行 flutter 命令，可以在终端输入以下语句，这样仅能保证当前窗口可运行 flutter 命令。要想永久将 Flutter 添加到 PATH中，请参考下面更新环境变量部分。

# 因为本例将在主目录级别(~/flutter)安装 Flutter SDK，所以路径是"$PATH:$HOME/workspace/flutter/bin"
# 根据实际情况填写路径
export PATH="$PATH:$HOME/workspace/flutter/bin"

验证能否运行 flutter 命令，在终端输入以下命令，获取帮助：

flutter help

检查安装

在终端输入以下命令，查看是否需要安装其它依赖：

flutter doctor

flutter doctor 命令会检查缺少的依赖，并给出操作提示。Dart SDK已经在捆绑在Flutter里了，没有必要单独安装Dart。一般会提示 Xcode 或 Android Studio 未安装或版本太低，请按照提示解决。要想安装 Android Studio，请参考下面安装Android SDK部分。

Xcode 是运行在操作系统 Mac OS X上的集成开发工具，可用于开发 macOS 和 iOS 应用程序。

Android Studio 是开发 Android 应用程序的官方集成开发工具。

接下来，遇到什么问题，可以使用命令 flutter doctor 再次检查并获得操作提示。

在本例中，我们选择用 Flutter 项目生成一个 Android 应用程序，所以选择 Android 相关的提示进行操作：安装 Android SDK，安装 Android Studio。如果需要生成 iOS 应用程序，可以选择 iOS 相关操作。

更新环境变量

1. 确定 Flutter SDK 的目录。比如 ~/workspace/flutter/bin。

2. 打开或创建 $HOME/.bash_profile 。不同设备，文件路径和文件名可能不同。

3. 在终端输入以下命令，更改[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的路径

    export PATH=~/workspace/flutter/bin:$PATH

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

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

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

   echo $PATH

   如果目录是已经在PATH中，运行该命令会输出步骤3设置的路径。

   或者，打开新的终端窗口，输入以下命令，输出帮助说明，则设置成功：

   flutter help

安装 Android SDK

构建 Android 应用程序需要 Android SDK。

• 我们可以在提示网址下载安装 Android Studio 。首次启动时，它将帮助您安装 Android SDK 组件。

• 在 Android Studio 安装 Flutter 插件、 Dart 插件，辅助 Flutter 开发工作。打开插件首选项侧边栏>Plugins，在搜索框分别输入 flutter/dart ，选择 flutter/dart 插件并点击 install。

  

  

• 重启后插件生效

• 运行命令 flutter doctor 验证 Android 工具链是否正常工作。

  以下提示表示 Android 工具链正常工作。

  [✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)

  也许会提示你未接受与 Android 的许可协议或别的问题，请详细阅读提示并按提示操作。

创建 Flutter App

选择菜单栏 > File > New > New Project > New Flutter Project，选择 Flutter SDK 的路径，然后点击 next。

填写项目名称 Project Name，比如 "my_flutter"；选择 Project Location 项目位置，比如"～/workspace"；选择 Project Type 项目类型为 Flutter Application（Flutter 应用），然后点击 next。

Android Studio 会自动生成一个可运行的简单 Flutter 应用。目前，我们只需要关注两个文件：lib > main.dart 和 test > widget_test.dart。文件 lib > main.dart 是应用程序的入口点，文件 test > widget_test.dart 是测试文件。

运行

在 Android Studio 上方的工具栏选择一个运行该应用的 Android 设备，或选用 Chrome(web) 浏览器模拟。这里我们直接选用最方便的 Chrome(web) 。

点击三角形符号 run 或菜单栏 > Run > Run main.dart ，运行应用程序，下方的控制台会提示运行情况。

Android Studio 以 debug 模式在 chrome 浏览器打开应用程序。界面有中间有一个数字 0，右下角有一个按钮。应用程序功能：点击按钮，数字加一。

测试

打开终端窗口，进入项目所在位置，输入命令 flutter test 运行 Flutter 项目的测试。

输出类似以下信息，表示通过测试：

% flutter test
00:02 +1: All tests passed!   

打包

选择菜单栏 > Build > Flutter > Build APK，把应用程序打包为 apk。

控制台提示生成文件位置： Built build/app/outputs/flutter-apk/app-release.apk

APK(Android application package)，Android 应用程序包，是 Android 操作系统使用的一种应用程序包文件格式，用于分发和安装移动应用及中间件。一个Android应用程序的代码想要在 Android 设备上运行，必须先进行编译，然后被打包成为一个被 Android 系统所能识别的文件才可以被运行，而这种能被 Android 系统识别并运行的文件格式便是 “APK”。