Skip to main content

创建您的第一个 Flutter 应用

· 约8分钟
Josie Chow

目标:创建一个 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_download

解压安装包

下载 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-plugins

    dart_plugins

  • 重启后插件生效

  • 运行命令 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。

create-app-01

填写项目名称 Project Name,比如 "my_flutter";选择 Project Location 项目位置,比如"~/workspace";选择 Project Type 项目类型为 Flutter Application(Flutter 应用),然后点击 next。

create-app-02

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

运行

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

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

run-app-01

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

run-app-02

run-app-03

测试

打开终端窗口,进入项目所在位置,输入命令 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

build-apk

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

© 2022 深圳可链科技有限公司. All Rights Reserved