从推特热门推荐到APP开发的热门视频，Flutter 已经成为了整个互联网的流行语。毫无疑问，Flutter 一直以来显现的功能已经受到全球热捧，但如何在 5 天内创建 Flutter APP才是关键所在。

那些为了开发适合多种平台运行的应用程序而苦思冥想的日子已经一去不复返了。

随着 Google Flutter 的推出，现在你可以不用挑灯夜战就能学习新的语言和框架。虽然APP的开发从来都不是一件容易的事，但 Flutter 通过提供包含所有小部件和插件的高级软件开发工具包，帮助开发人员省略掉很多繁杂的程序。

使用 Flutter 开发APP并不是天马行空。实际上，无论你在APP开发上面有多厉害，你都必须处理大量技术问题及其缺陷。事实上，在移动APP开发的领域中，iOS 和 Android 两大巨头之间的竞争是永无止境的。

因此，作为一家初创公司，你需要考虑两个方面：

• 首先，如果你选择开发原生 iOS 和 Android APP，那么你需要很高的预算。
• 其次应该考虑如何占领更广泛的细分市场？

每个领域都需要特定的技能，因此，你从软件开发公司那里得到的最常见答案是 iOS 选择 Swift，Android 选择 Kotlin。

但我的回答是——都选FLUTTER！

Flutter：一个神器的传说

Flutter 是 Google 最近推出的 SDK，它允许开发人员使用单一代码库为 iOS 和 Android 创建APP。与其他流行的解决方案不同，它不是将 Flutter 称为框架，而是一个完整的 SDK，其中包含创建跨平台APP所需的一切。从渲染引擎、现成的小部件到测试和集成 API，Flutter 应有尽有。

从这里开始，在直接进行开发之前，让我快速介绍一下 Flutter 的亮点， 这些亮点使得它与众不同 ：

• 尽管它于 2017 年推出，但它已被全球39% 的开发人员使用，并迅速巩固了其作为跨平台APP开发第二高要求的框架的地位。

• Dart 是 Fl​​utters 面向对象的语言，它使用先进的技术并编译成本机代码，从而显著提高了速度。

• Flutter 使用操作系统作为画布来创建界面，并将手势、渲染和动画等服务移动到框架本身中，从而使开发人员可以完全控制系统。

• Flutter 拥有用于快速 UI 编码的现成和自定义小部件，使你能够随意进行自定义。

• 与其他程序相比，Flutter 具有最稳定的学习曲线和不断壮大的社区，这使得编程知识有限的开发人员也可以开始使用 Flutter 进行原型设计并创建APP。

• 热重载功能可以将开发速度提高十倍，并提高程序员的生产力，最终让你可以尝试新事物而不会被长时间的延迟所打扰。

• Flutter APP以其高性能而闻名，因为它使用 CPU 使用率、每秒请求数、平均响应时间、每秒帧数等。

• 它提供了出色的APP可移动性，并允许你从任何平台移动到 Flutter。

简而言之： Flutter 的所有这些特性和功能，绝对能鼓励你深入挖掘其核心机制并开始使用第一个 Flutter APP。现在你一定想知道如何在 5 天内创建一个 Flutter APP，而移动APP开发公司至少需要 4 到 6 周的开发时间。那么让我们直接进入 Flutter 应用程序开发过程

在 5 天内用 Flutter 创建一个APP

Flutter 是一种非常容易操作的APP开发技术。因此，在撰写本文时，我们既面对新手也面向专家，并尽量使本教程保持简单、有序和直截了当。

所以无论你是自由职业者还是APP开发公司，这部分知识一定会帮助你成为一名 Flutter 开发者。

通过本教程，你将更深入地了解 Android 平台的 Flutter 开发，但要记住，你需要 Android 的 Android Studio 和 iOS 的 XCode 。因此，在开发APP之前，设置环境是很有必要的。

首先，要确保 你的系统是 Android Studio 3.0+ 版本。如果你没有此功能，请按照以下简单步骤操作：

让我们从主要步骤开始：

第 1 步：安装 Android Studio

Android Studio 为 Flutter 提供了完整的集成 IDE 体验。此外，你可以将 Flutter SDK 用于任何文本编辑器进行开发体验。但是，IDE 为你提供了语法高亮、代码完成和调试器等功能，这些功能对APP开发很有用。

• 因为我们专注于Android。所以建议专家使用Android Studio。
• 或者，你也可以使用 Flutter 插件 IntelliJ：
• IntelliJ IDEA 社区，版本 2017.1 或更高版本
• IntelliJ IDEA Ultimate， 2017.1 或更高版本

如果你使用的是 Android Studio 和 IntelliJ，需要重新启动 IDE 以激活最近启动的插件。此外，这将帮助你开始使用稳定版本的 IDE，因为 Flutter 插件可能无法在 Beta、Canary 或 EAP 版本上正常运行。

第 2 步：安装 Flutter 和 Dart 插件

自行或在软件开发公司的帮助下安装这些插件以创建项目：

• 启动 Android Studio
• 打开插件首选项（在 macOS 上转到 Preferences> Plugins；在 Windows 和 Linux 上转到 File>Settings>Plugins ）。
• 打开插件首选项（配置>插件 v3.6.3.0 或更高版本 ）。
• 浏览 Flutter 插件的仓库并点击安装
• 当提示安装 Dart 插件时，单击是。
• 出现提示时单击重新启动。

完成这些，现在你可以为 Flutter 创建一个新项目：File>New>New Flutter Project 。

第 3 步：创建 Flutter 项目

要创建一个新的Flutter 项目，你需要选择Flutter Application> Start a New Flutter Project> Android Studio。

图片由作者提供

单击 Flutter 应用程序后，在下一个屏幕，你需要提供 Flutter SDK 路径和基本项目详细信息。

让我们以创建歌曲APP为例，你需要相应地在以下列中添加详细信息：

图片来源：作者

最后，现在为包设置一个域名。为包使用唯一的名称很重要（用于签名和发布目的）。如果你没有任何域，那么你可以使用 com.github.<你的登录名>。并将其他选项设置为默认值，然后单击完成确认。

哦吼！现在我们已经成功创建项目了！

第 4 步：运行所建程序：Flutter Doctor

为确保你APP设置的环境正常工作，需要打开终端***（Android Studio 中的 Alt+F12）*** 并输入Flutter Doctor 命令。

为保证其正常运行，你至少需要一个可用的 Flutter 、IDE 和一个连接的设备（物理或模拟器）

• 在 Android 上检测

如果使用设备本身，要确保它必须通过 USB 电缆连接并启用 USB 调试。

对于 Android Emulator，你需要创建一个虚拟设备。为此，你可以聘请移动APP开发人员，也可以使用工具栏上的 或按Ctrl Alt+F12 并输入操作名称来打开 AVD 管理器。

图片由作者提供

保留屏幕上的默认设置。现在是时候运行你的APP了。只需选择所需的设备或模拟器，然后按“Shift+F10”或直接使用运行按钮即可。当你单击运行按钮时，下面的图标将自动更改。

图片由作者提供

• 在 iOS 上测试APP

在 iOS 模拟器上测试APP时，你首先需要使用下拉设备菜单。注意，Xcode 安装程序会提示你安装APP中缺少的组件。

但是，在使用物理 iOS 设备的情况下，测试可能有点复杂。当设备通过 USB 电缆连接并解锁时，你需要先在 Xcode 中打开 iOS 模块。

图片由作者提供

打开 Xcode 后，接下来转到APP的签名和功能设置。登录你的 Apple ID，关闭“帐户”窗口后，将生成配置文件。

如果你发现任何无法注册应用标识符的错误，则意味着其他人已经在使用该标识符。在这里，你需要将 Bundle Identifier 值更改为其他值。完成配置签名后，你可以尝试从 Android Studio 运行该APP。由于配置文件在设备上不受信任，因此第一次尝试将以失败告终。

在 iOS 设备上测试APP时，它不可能在运行 iOS 13.3.1 的设备上运行使用 Personal Team 配置文件配置的 Flutter APP。这个限制是由Apple自己设置的。一旦个人资料被录入，你就可以从主屏幕启动APP。由于在 iOS 设备上进行测试非常复杂，因此聘请具有所有专业知识的应用程序开发人员十分重要。

图片来源点击此处

第 5 步：开始编写 Flutter APP

由于你已经创建了名为 Song_App 的项目。一旦开始编写APP，大多数APP开发人员都会编辑 Dart 代码所在的 lib/main.dart。你可以替换 lib/main.dart 的内容或删除 lib/main.dart 中的所有代码。将所有代码替换为以下在屏幕中央显示“歌曲库”的代码。

图片由作者提供

专业提示： 将这些代码粘贴到你的APP中时，你可以使用我们在步骤 1 中提到的工具解决此问题。

其次，按照第 4 步指南运行APP，并根据你的设备使用建议的 Android 和 iOS IDE。

第 6 步：使用外部包

为了使任务有序且简单，建议你开始使用开源包名称 english_words。尝试使用一些功能性常用英语单词。通常，flutter APP开发公司会在 Pub.dev 上找到 english_words 包和其他开源包。https://pub.dev/

在 lib/main.dart 中，导入新包：

导入 ‘package:flutter/material.dart’;

导入’包：english_words/english_words.dart’;

一旦开始输入，Android Studio 将开始为你提供有关要导入的库的建议。然后通过提醒你导入的库尚未保存，将导入字符串显示为灰色。

此外，要使用英文单词包生成文本，而不是使用字符串“ Songs_Gallery ”。

图片库

接下来，如果APP正在运行，你可以使用热重载功能使用你在APP中所需的更改来更新正在运行的APP。可参考下图，其中包含随机选择在APP中运行的一对单词。如果你的APP运行不正常，可查找拼写错误或尝试 Flutter 的调试工具。软件开发公司更愿意使用“ pubspec.yaml ”或“ lib/main.dart ”来调试APP。

第 7 步：向APP添加有状态小部件

在 Flutter APP开发中，都可以看成是一个小部件，因为它本身就是一个APP。无状态和有状态小部件是具有可变和不可改变条件的小部件。脚手架小部件是一个包含标准屏幕组件的框架。层次结构可能是一个相当困难的过程，并且有应用栏、正文、菜单等。

Flutter 的 Widget 为你在APP开发上节省了大量的时间和精力，但它也涉及到一种构建 Widget 的方法，小部件应包含其他小部件。

无状态小部件是不可变的，这意味着它们的属性无法更改，并且所有值都将保持最终状态。另一方面，有状态小部件维护可能在小部件的生命周期内更改的状态。所以当你实现一个有状态的小部件时，它至少需要两个类：

1) 一个 StatefulWidget 类，它创建一个实例

2) 状态类

StatefulWidget 类本身是不可变的，可以丢弃和重新生成。但是 State 类会在小部件的整个生命周期中持续存在。

所以大体上，你需要通过添加 RandomWordsState 来添加 State 类。要添加 _RandomWordsState，作为现有 MyApp Stateless Widget 中的子项，你需要遵循以下两点：

图片由作者提供

通过在以下代码中进行更改以从APP中删除单词生成代码。

图片由作者提供

最后重新启动APP以使其行为与以前一样，并在每次热重新加载或保存应用程序时显示一个单词配对。

步骤 8：创建无限滚动列表视图

这里创建一个最常用单词的列表，添加标记单词的可能性，并标记出我们最喜欢的单词然后将它们拖到新屏幕上以添加一些功能性。总的来说，完整的逻辑位于条件类中。因此，这里是你需要的带有注释的单个类遵循的简单编码：

0_bA7k_2gowT4BSjtQ660×1600 194 KB

图片由作者提供

APP的最终输出将如下图所示：

恭喜！你已经学会了编写可在 iOS 和 Android 上运行的交互式 Flutter APP。

使用 Flutter-Closing Statement 设置第一个APP

通过本篇的快速教程，你一定已经了解 Flutter 如何让开发人员的APP开发过程更轻松、更快捷、更简单。使用 Flutter开发APP可以使开发人员的生产力提高十倍，并允许企业将他们的APP快速推向市场。

通过本APP开发教程，你可以学到：

• 创建 Flutter APP开发场地。
• 编写 Dart 代码。
• 使用外部或第三方库。
• 使用热重载功能加快开发周期
• 实现有状态的小部件
• 创建了一个无限滚动列表。

APP开发步骤虽然很长，但仔细理解后，你可以快速将这些步骤完成。但是，如果你仍然有疑问，那么最好快点寻求移动APP开发公司的帮助。

原文作者 Sara Khan
原文链接 https://saraakhaan121.medium.com/create-your-app-with-flutter-in-5-days-412ee41de22a