如何使用 Flutter 构建移动应用程序？

2024 年 10 月 17 日

几乎不可能找到一家不想在线提供服务的商业企业。其中的逻辑很简单——全世界的人花在智能手机上的时间比花在任何其他事情上的时间都多。现在很容易看出其中的原因。

企业可以通过移动应用快速吸引客户。如今，人们希望在手机上轻松获得一切。但由于移动应用程序开发有如此多的选择，可能需要一些时间才能了解使用什么技术来创建快速应用程序并保持领先于竞争对手。为了帮助实现这一点， 谷歌于 2018 年推出了跨平台应用开发工具包和 UI 框架 Flutter.

Flutter 是一款功能强大的工具，允许开发人员仅使用一个代码库为多个平台创建原生应用。许多知名品牌（包括 Google 广告、eBay 汽车、SpaceX 应用、Google Pay 和 Philips Hue）都使用 Flutter 开发应用并展示其能力。

让我们开始使用 Flutter 创建您的移动应用吧！本指南将引导您完成每个步骤，并帮助您了解成功的方法。

使用 Flutter 构建移动应用程序 – 分步指南

步骤 1：配置开发环境

（一）安装Flutter SDK

安装计算机的 Flutter 软件开发工具包 (SDK) 是第一步。请遵循以下简单步骤：

1. 要访问 Flutter 的官方网站，请访问 [https://flutter.dev](https://flutter.dev)。

2. 将正确的 SDK 记录下载到您的操作系统（Mac OS、Windows 或 Linux）以开始使用 Flutter。

3. 解压下载的文件并将其保存在任意目录中。

（b）将 Flutter 添加到系统路径

为了在命令行中有效地运行 Flutter 命令，您可能需要将其添加到系统的路径环境变量中：

✅ 对于Windows：

1. 打开开始菜单并搜索“环境变量”。

2. 点击“编辑系统环境变量”。

3. 从菜单中选择“环境变量”。

4.在“系统变量”下找到并选择“路径”，然后单击“编辑”。

5. 点击“新建”，将路径添加到 Flutter SDK 目录.

✅ 对于 macOS 和 Linux：

1. 打开终端。

2. 使用代码编辑器访问主目录中的“.bash_profile”或“.zshrc”文件。

3. 在文件末尾添加以下行：  

   导出 PATH=”$PATH:[PATH_TO_FLUTTER_DIRECTORY]/flutter/bin

   替换 `[FLUTTER目录路径]` 替换为您的 Flutter SDK 的实际路径。

保存文件后，运行 macOS 的“source.zshrc”以使修改生效。

（c）验证 Flutter 安装

在新的终端或命令提示符窗口运行以下命令，以确保 Flutter 已正确安装：

颤动医生

此命令检查您的系统是否有任何必要的依赖项，并在需要时提供有关安装它们的说明。

第 2 步：编写你的第一个 Flutter 应用

现在您的 Flutter 开发环境已经设置好了，是时候开始创建您的第一个 Flutter 项目了。

（a）使用 Flutter 命令行

打开您喜欢的命令行界面。对于 Windows 用户，这可能是命令提示符或 PowerShell。对于 macOS 和 Linux 用户，它是终端。

（b）创建一个新的Flutter项目

使用以下命令启动一个新的 Flutter 项目：

Flutter 创建 my_first_app

替换 `我的第一个应用` 替换为您所需的项目名称。此命令将设置一个包含必要文件和依赖项的新 Flutter 项目。

（c）了解项目结构

创建项目后，使用“cd”命令进入新创建的目录。主要目录和文件如下供您参考。应使用以下命令启动新的 Flutter 项目：

–`LIB`：此目录包含您的应用程序的 Dart 代码。

–`安卓`和`IOS`：Android 和 iOS 平台特定的代码分别存储在这些目录中。

–`实验`：您可以在此目录中为您的应用创建并执行测试。

（d）运行你的 Flutter 应用

使用下面的命令来查看程序的运行情况：

颤动运行

此命令编译您的应用并将其部署到模拟器或连接的设备。

步骤 3：了解 Flutter 中的 Widget

（a）什么是小部件？

在 Flutter 中，一切都是 widget！widget 是移动应用用户界面的基础。widget 的复杂程度可以从单个按钮到整个屏幕不等。创建动态且可交互的移动应用需要对 widget 功能有扎实的理解。

（b）无状态与有状态的 Widget

Flutter 将 Widget 分为两种主要类型：无状态和有状态。

✅ 无状态小部件

无状态小部件没有任何可更改的内部状态。其外观和行为完全由其配置和应用程序的状态决定。示例包括图标、文本标签和按钮。

✅ 有状态的小部件

另一方面，有状态小部件可以维护随时间变化的内部状态。它允许小部件对用户交互、数据更改和其他事件做出反应。示例包括复选框、滑块和表单。

（c）Widget 树

小部件以树状结构排列，称为小部件树。小部件'材料应用'，它建立了应用程序的基本结构和功能，通常位于此树的根部。

从这里开始，您可以通过组合各种小部件来构建用户界面。例如，您可能有一个“列”小部件，其中包含许多“文本”小部件和一个“按钮”小部件。此配置指定组件在屏幕上的排列方式。

（d）构建自定义小部件

虽然 Flutter 提供了丰富的预构建小部件，但您通常需要创建自定义小部件来封装特定的功能。它可以帮助您保持代码库井然有序并提高可重用性。

通过扩展“无状态小部件”或“有状态小部件”并重写“build”方法来生成所需的 UI，您可以构建自定义小部件。

步骤4：设计用户界面（UI）

Flutter 的 widget 系统让您可以轻松创建设计精美的 UI。`Container`、`Column`、`Row` 和 `Stack` 等 widget 允许您灵活、动态地排列屏幕上的元素。

（a）使用容器组织小部件

容器就像是容纳其他小部件的盒子。它们可用于定义 UI 元素的格式和外观。以下是包含文本标签的容器示例：

容器（

  填充：EdgeInsets.all（16.0），

  颜色：Colors.blue，

  子项：文本（

    “你好，Flutter！”

    样式：TextStyle（fontSize：24.0，颜色：Colors.white），

  ),

)

在此示例中，容器有填充、蓝色的背景颜色，并且包含一个文本小部件。

（b）使用行和列

行和列对于水平和垂直排列小部件至关重要。它们允许您为 UI 创建网格和结构。以下是列的示例：

柱子（

  孩子们： [

    文本（'第一项'），

    Text('第二项'),

    Text('第三项'),

  ],

)

此列包含三个垂直排列的文本小部件。

（c）添加交互式小部件

Flutter 提供按钮、复选框和文本输入字段等交互式小部件。这些小部件允许用户与您的应用进行交互。例如，这是一个简单的按钮：

升高按钮(

  按下时：（）{

    // 在此处添加按钮按下逻辑

  },

  子项：文本（‘点击我’），

)

（d）加入图像和图标

图像和图标对于增强应用的视觉吸引力至关重要。Flutter 可以轻松显示来自各种来源的图像和图标。

图片.network('https://example.com/image.jpg')

图标（Icons.star、颜色：Colors.yellow、大小：48.0）

（e）添加导航

如果您的应用有多个屏幕，则需要实现导航。Flutter 提供了“Navigator”小部件来管理导航堆栈。

导航器.推（

  语境，

  MaterialPageRoute（builder：（context）=> SecondScreen（）），

)

（f）实验和迭代

设计 UI 是一种迭代技术。不断调整小部件、样式和布局，直到获得您应用喜欢的外观和感觉。

步骤 5：在 Flutter 中管理状态

要更新小部件的状态，通常使用 `setState()` 方法。它会触发小部件树的重建并根据新状态更新 UI。以下是更新计数器的示例：

CounterApp 类扩展了 StatefulWidget {

  @覆盖

  _CounterAppState 创建状态() => _CounterAppState();

}

_CounterAppState 类扩展了 State {

  int _counter = 0;

  无效 _incrementCounter（）{

    设置状态（）{

      _计数器++；

    }）;

  }

  @覆盖

  小部件构建（BuildContext 上下文）{

    返回脚手架（

      应用栏：应用栏（

        标题：文本（'计数器应用程序'），

      ),

      主体：中心（

        子项：文本（

          '$_counter'，

          样式：TextStyle（fontSize：48.0），

        ),

      ),

      浮动操作按钮：浮动操作按钮（

        onPressed：_incrementCounter，

        子项：图标（Icons.add），

      ),

    );

  }

}

在此示例中，`_柜台` 是按下浮动操作按钮时更新的状态。`设置状态（）`方法触发小部件树的重建。

✅ 州管理图书馆

对于更复杂的应用，您应该更有条理地管理状态。Flutter 提供了各种状态管理库，例如 Provider、Bloc、Redux 和 Riverpod 等。这些库提供了用于在大型应用程序中管理状态的结构化模式。

步骤6：添加功能和逻辑

（a）用 Dart 编写逻辑

Dart 是 Fl​​utter 开发中使用的编程语言。它是一种灵活的语言，允许您记录应用程序的逻辑。让我们来看看您可能需要执行的一些常见任务。

（b）处理用户输入

最常见的功能之一是处理用户输入。输入可以是按钮、文本输入字段或手势。以下是按钮按下处理程序的示例：

升高按钮(

  按下时：（）{

    // 按下按钮时执行的逻辑

    打印（'按钮按下！'）；

  },

  child: Text(‘按我’),

)

（c）发出网络请求

如果您的程序想要从服务器检索数据，请使用 Dart 中的“http”包或其他等效包发送 HTTP 请求。以下是如何从 API 获取记录的示例：

导入'package:http/http.dart' 作为 http;

void fetchData() 异步 {

  最终回应 = 等待 http.get(Uri.parse('https://api.example.com/data'));

  如果 (响应.statusCode == 200) {

    打印（'获取的数据：${response.body}'）;

  } {

    print('获取数据失败');

  }

}

（d）实现业务逻辑

业务逻辑是指管理应用功能的规则和操作。它可能涉及计算、数据处理或特定于应用用途的其他任务。

int 计算总数（列表数字）{

  int总计=0；

  对于（数字中的 int 数字）{

    总计+= 数量；

  }

  返回总数；

}

（e）屏幕间导航

如果您的应用有多个屏幕，则需要实现导航逻辑。Flutter 提供了“Navigator”小部件来管理导航堆栈。

导航器.推（

  语境，

  MaterialPageRoute（builder：（context）=> SecondScreen（）），

);

（f）处理事件和状态变化

还记得管理状态的重要性吗？当应用的状态发生变化时（由于用户操作、数据更新等），你将使用`设置状态（）` 来触发 UI 的重建。

步骤 7：测试你的应用

测试有助于发现和修复错误，确保新功能不会破坏现有功能，并增强对应用稳定性的信心。Flutter 提供了强大的测试工具和库来简化此过程。

Flutter 支持不同类型的测试：

（一个） 单元测试

单元测试专注于隔离单个函数、方法或类。它们验证代码的特定部分是否按预期工作。Flutter 使用`实验` 单元测试包。

（二） 小部件测试

Widget 测试允许您单独测试 UI 组件。它们确保 Widget 正确呈现并对用户交互做出适当响应。Flutter 的 `flutter_test` 包有助于小部件测试。

（C） 整合测试

集成测试评估应用的不同部分如何协同工作。它们测试整个功能或流程，模拟用户交互。Flutter 的`集成测试`包支持集成测试。

（四） 编写单元测试

这是一个简单的 Dart 单元检查示例：

int 添加（int a，int b）{

  返回a + b;

}

无效主（）{

  测试（'添加数字'，（）{

    期望（添加（2，3），等于（5））；

    期望（添加（0，0），等于（0））；

  }）;

}

在这个例子中，我们测试“add”函数以确保它返回正确的总和。

（五） 编写小部件测试

小部件测试可以帮助您模拟用户交互并验证随后的 UI。

下面是一个例子：

testWidgets('计数器增量', (WidgetTester 测试器) 异步 {

  等待测试人员.pumpWidget（MyApp（））；

  期望（find.text（'0'，findsOneWidget）；

  期望（find.text（'1'，findsNothing）；

  等待测试人员.tap（find.byIcon（Icons.add））；

  等待测试仪.pump（）；

  期望（find.text（'0'，findsNothing）；

  期望（find.text（'1'，findsOneWidget）；

}）;

这里，我们正在测试一个计数器应用。当我们按下添加按钮时，计数应该会按预期从“0”增加到“1”。

（六） 运行测试

使用以下命令运行测试：

颤动测试

此命令将运行项目中的所有测试。

步骤 8：在设备或模拟器上运行你的应用

👉 在物理设备上测试

您可以在实际硬件上测试您的程序，以便在真实环境中使用它。要在真实设备上运行您的软件，请遵循以下步骤：

1. 连接您的设备： 通过 USB 将您的系统连接到 PC。确保您的工具已启用 USB 调试和开发者模式。

2. 验证设备连接： 在终端或命令提示符下运行后续命令：

   Flutter 设备

此命令列出所有已连接的设备。您的设备应该显示在列表中。

3. 选择设备： 当您的设备被索引后，使用以下命令在其上启动您的应用程序：

   颤振运行-d

要连接已连接的设备，请输入上一步中的 ID，而不是“设备编号“

4. 应用程序部署： 您的应用将由 Flutter 编译并发布到链接的设备。现在您可以在物理设备上与您的应用进行交互和测试。

👉 在模拟器上测试

如果无法访问真实设备，可以使用模拟器测试应用。Flutter 提供 Android 和 iOS 模拟器。操作方法如下：

1. 启动模拟器： 启动您最喜欢的 iOS 模拟器或运行 AVD 管理器（Android 虚拟设备管理器）。

2. 验证模拟器连接： 在终端或命令提示符中运行“flutter devices”以查看模拟器是否列出。

3. 运行您的应用程序： 要在模拟器上运行您的移动应用程序，请编写以下命令：

 颤动运行

Flutter 将检测可用的模拟器并将您的应用部署到选定的模拟器。

4. 交互和测试：您现在可以在模拟器上与您的应用程序交互并测试其功能。

另请阅读 - Xamarin 与 Flutter：哪个框架更适合移动应用程序开发？

常见问题

✔️ 我可以用 Flutter 制作移动应用程序吗？

答： 当然！借助 Google 的 Flutter UI 工具包，您可以轻松从单一代码库设计原生移动、Web 和计算设备应用程序。它非常适合创建一流的 Android 和 iOS 移动应用程序。

✔️ Flutter 适合移动应用程序开发吗？

答： Flutter 是开发移动应用的绝佳选择。它具有许多优势，包括出色的性能、跨平台兼容性、热重载快速开发以及各种可自定义的小部件。对于寻求构建高质量移动应用的组织和开发人员来说，它是一流的解决方案。

✔️ 如何开始使用 Flutter 构建应用程序？

答： 要开始使用 Flutter 创建应用程序，请遵循以下步骤：

• 安装Flutter： 可以从可靠或官方网站下载并安装 Flutter。
  
• 创建 IDE： 在您首选的集成开发环境 (IDE)（例如 Android Studio 或 Visual Studio Code）中部署 Flutter 和 Dart 插件。
  
• 建立新项目： 使用 Flutter create 创建一个新项目 项目名 命令。
  
• 启动您的应用程序： 在控制台中输入命令“flutter run”即可在连接的设备或模拟器上查看您的应用的运行情况。
  

✔️ 如何使用 Flutter 构建 Android 应用程序？
答： 按照这些简单的步骤来构建 Android 应用程序。

• 安装Android Studio和Flutter： 设置一个像 Android Studio 这样的 IDE，安装 Flutter，并自定义您的开发环境。
  
• 创建一个新的 Flutter 项目： 使用 'Flutter create project_name' 命令来创建一个新项目。
  
• 在 Android 设备上运行该应用程序： 连接物理 Android 设备或使用模拟器，然后使用命令 `颤动运行“。
  

✔️ Flutter 容易学吗？
答： 是的，Flutter 以易于掌握而闻名。由于其反应式框架和 Dart 编程语言，不同经验水平的开发人员都可以使用它。此外，Flutter 详尽的文档和活跃的社区也使其学习起来更加简单。

✔️ Flutter 使用哪种语言？

答： Dart 是 Fl​​utter 使用的编程语言。Google 开发了现代面向对象语言 Dart。它旨在构建适合客户端开发的跨平台、高性能应用程序。

创新中心 RichestSoft 有助于使用 Flutter 构建移动应用程序吗？

在瞬息万变的市场环境中保持竞争优势至关重要 移动应用开发 如今，Flutter 已经成为主流。好消息是，谷歌开发了 Flutter。这款尖端的 UI 工具包可帮助企业使用单一代码库为众多平台创建高性能、原生构建的应用程序。作为领先的 Flutter 应用开发公司， RichestSoft 带来丰富的技能和创造力来提升您的在线形象。

原因呢？

• 专门的内部团队
  
• 富有表现力的用户界面
  
• 灵活的参与模式
  
• 综合开发服务
  
• 准时项目交付
  
• 持续维护支持
  
• 清晰的 UI 设计
  
• 敏捷方法论
  
• 定制方法
  
• 详细文档
  

结语

开始一个项目看似简单，但编码特性和功能可能会变得复杂。要构建 Web 或移动应用程序，必须具备相关经验。聘请 Flutter 应用程序开发公司 如果您缺乏应用程序开发专业知识，强烈建议您创建 Flutter 应用程序。

如果你需要熟练 招聘 Flutter 开发人员，我们可以为您提供帮助。我们的 Flutter 应用开发服务包括使用最新技术趋势开发高性能 Flutter 应用。如果您对 Flutter 应用开发有任何疑问，我们随时为您提供解答。最终，决定权在您手中。