使用 Flutter 创建自适应应用

Flutter 已被广泛采用，因为它可以灵活地构建应用程序，以使用一个代码库在您的 Android、iOS、macOS 和 Windows 机器上运行。 在大多数情况下，这些设备具有不同的尺寸，尽管 Flutter 具有跨平台功能，但您不能保证应用程序的界面默认情况下会在这些设备上按预期呈现。 这是您在开发过程中必须考虑的功能。

本文将演示如何使用 Flutter 创建自适应应用。 您将学习如何构建适应给定设备尺寸的基本电子商务应用程序，而无需随着屏幕尺寸的变化重新构建应用程序。 我们将介绍：

• 什么是自适应应用程序？

• 构建自适应应用程序时要考虑什么

• 使用颤振 LayoutBuilder创建自适应应用程序

• 项目概况

• 教程：使用 Flutter 创建自适应电子商务应用

  • 配置

  • 建设 Product小部件

  • 构建导航抽屉

  • 渲染手机屏幕

  • 渲染桌面屏幕

  • 实施 LayoutBuilder班级

什么是自适应应用程序？

当应用程序设计为在运行时根据特定参数更改其属性值以响应不同的输入或条件时，它被认为是自适应的。 例如，自适应应用程序使用相同的代码库在移动和桌面视图上呈现不同的界面。

重要的是要注意自适应设计不应与 响应式设计 相混淆。 响应式应用程序会根据可用的屏幕尺寸动态更改其界面布局，但会保持布局设计。 应用程序的内容只是重新排列以适应屏幕大小。

另一方面，自适应设计要求您创建特定于平台的设计、内容和模板。 也就是说，您的应用程序在移动设备上的设计在更大的屏幕（例如桌面设备）上会有所不同。

构建自适应应用程序时要考虑什么

为了改善用户体验，您应该设计您的应用程序以适应具有不同设计、尺寸、形状和操作系统的不同设备（手机、可折叠设备、平板电脑、智能手表和 PC）。 您的用户应该能够在这些不同的设备上探索您的应用程序，并且仍然享受设备和操作系统的原生体验。

您在设计或开发阶段必须做出的一个重要决定是确定应用程序应该切换其布局的阈值。 在 Android 文档的一部分中， 有一组推荐值，可帮助您决定应用程序在不同屏幕尺寸上的布局。

的影响，屏幕的可用宽度可能比可用高度更重要 在大多数情况下，由于垂直滚动 。 您还需要考虑每个平台特有的鼠标、键盘、触摸输入和其他特性。 您应该自定义应用程序的体验和界面以适应主机设备。

使用颤振 LayoutBuilder创建自适应应用程序

Flutter 提供了 许多 可以在构建自适应应用程序时使用的小部件。 还有一些外部包，例如 Flutter 自适应 UI 和 自适应布局 ，您可以将它们集成到您的应用程序中。 在本文中，我们将重点介绍使用 Flutter 提供的 LayoutBuilder widget构建自适应应用程序。

这 LayoutBuilder类对于构建响应式和自适应应用程序很有用，因为它有一个在布局时调用的构建器函数。 此函数返回一个小部件，接收应用程序上下文和约束，并根据约束的值执行特定操作。 例如，当设备宽度满足通过 constraints.maxWidth财产：

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验 了解更多 →

---

LayoutBuilder(
        builder: (ctx, constraints) {
          if (constraints.maxWidth < 600) {
              return widget;
          }else{
            return anotherWidget;
          }
        }
    );

项目概况

本教程的演示应用程序是一个电子商务应用程序，它在可滚动视图中显示其产品。 在移动设备上，每个产品都会占用可用的宽度，用户可以垂直滚动屏幕以查看每个可用的产品。 移动视图还将包含一个带有导航按钮的应用程序抽屉。

在更大的屏幕上，例如在桌面设备上，产品分布在屏幕的宽度和高度上。 桌面视图还将在屏幕顶部包含一个导航栏，以替换移动视图中的应用程序抽屉。

如前所述，应用程序将使用 Flutter LayoutBuilder class确保它在运行时根据可用的屏幕大小呈现指定的界面，而无需重新构建应用程序。

这是应用程序在不同屏幕尺寸上的预期输出：

先决条件

• 基础知识 Flutter

• 上 Flutter SDK 安装在你的机器

• 您选择的任何合适的 IDE； 我将使用 Android Studio 进行此演示

教程：使用 Flutter 创建自适应电子商务应用

配置