时间戳

首页 > 解决方案 > 如何组织一个包含多个应用（Android、iOS 和 Web）的 Flutter 项目？

flutter - 如何组织一个包含多个应用（Android、iOS 和 Web）的 Flutter 项目？

问题描述

我正在尝试找到组织项目的最佳方式，我将从 Flutter 开始。这是我需要开发的：

一些代码（模型和逻辑）和功能将在三个应用程序上通用（如果我可以配置生产和开发环境，那就太好了）。

您将如何设置您的项目以便轻松地做到这一点？

只有一个具有多种风格的项目似乎是个好主意吗？我喜欢我不必处理多个项目的想法。只是为了保持开发流程非常简单。并且在应用程序的 main() 函数中可能有一个条件检查风味然后打开正确的屏幕。

您是否希望拥有一个可供多个项目使用的公共库？这似乎是一个很好的方法。但我不确定这个（小）项目是否值得花时间组织 3 个不同的项目 + 一个库。

还有什么想法吗？

非常感谢您提前

标签： flutter

解决方案

您应该能够在没有不同项目的情况下重新共享您的大部分代码。

这是小部件和MediaQuery的美妙之处。

在小部件中创建所有主要组件，您的项目列表可以是 ItemList();，主菜单可以是 MainDrawer(); 等。

对于用于不同屏幕尺寸的小部件，在布局构建器中，您可以返回 LargeScreenWidget() 或 SmallScreenWidget()。

使用LayoutBuilder或OrientationBuilder，并编写代码以响应屏幕大小、宽度和方向的变化。这样它就可以共享大部分相同的代码。

当您返回布局构建器时，请遵循一般伪代码：

isLargeScreen 
? return Row(children[LeftWidget(), RightWidget()]) 
: return SingleChildScrollView(child: MobileWidget());

如果有人在桌面上有一个非常小的 Chrome 窗口，它可以通过这种方式切换到移动布局。

顺便说一句，我几乎总是从以下代码开始我的代码，这样我就可以调整布局。

var size = MediaQuery.of(context).size;
var isLargeScreen = false;

if (MediaQuery.of(context).size.width > 900) {
  isLargeScreen = true;
} else {
  isLargeScreen = false;
}

这样，当我构建小部件时，我可以执行以下操作：

Container(
constraints: BoxConstraints(maxWidth: (isLargeScreen ? 700 : size.width * 0.9)),
),

您还可以通过Platform.isIOS/isWindows/isAndroid询问用户他们使用的操作系统。

前任：

onTap: () {
    Navigator.push(context, MaterialPageRoute(
        builder: (context) {
            return Platform.isIOS ? AndroidPage() : iOSPage();
          },
      )); // MaterialPageRoute
   },

或者在使用 FutureBuilder 时

return Platform.isIOS ? CupertinoLoading() : CircularProgressIndicator();

最重要的是，您可以将 VoidCallbackMethod 与 OrientationBuilder 一起使用来更改应用程序的运行方式。

在我分享的文章中，如果屏幕很小，它会打开一个 Navigation 路由，否则它会将数据传递给右侧的一个小部件。例如，这适用于消息传递应用程序。

这里有一些文章可以帮助你。

使用 Flutter 开发移动应用的响应式布局

在 Flutter 中开发多种屏幕尺寸和方向

当然，最终这取决于您的项目、您和/或您的团队想要什么，以及您对文件大小/额外 if 语句一直运行的舒适程度。

不过我要补充一点，至少对于移动应用程序，我通常只使用一个项目。Web/桌面可能是一个不同的项目。

快乐飘飘！

推荐阅读