【问题标题】:How to organise a Flutter project with multiple apps (Android, iOS and Web)?如何组织一个包含多个应用(Android、iOS 和 Web)的 Flutter 项目?
【发布时间】:2020-09-27 06:16:13
【问题描述】:

我正在努力寻找组织项目的最佳方式,我将从 Flutter 开始。这是我需要开发的:

  • 1 个面向客户的 Android 和 iOS 应用
  • 1 个面向专业人士的 Android 和 iOS 应用
  • 1 个用于管理的 Web 应用程序
  • 后端将通过 Firebase 完成(Firebase 身份验证、Firestore 等)

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

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

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

您希望拥有一个供多个项目使用的通用库吗?这似乎是一个很好的方法。但我不确定这个(小)项目是否值得花时间组织 3 个不同的项目 + 一个库。

还有什么想法吗?

非常感谢您

【问题讨论】:

  • 如果那是我的项目,我会使用风味,但项目规模会很大。我认为最好的选择是制作 3 个独立的项目并编写你的库

标签: flutter


【解决方案1】:

您应该能够在没有不同项目的情况下转发大部分代码。

这就是 widgetsMediaQuery 的美妙之处。

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

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

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

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

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();

除此之外,您还可以使用带有 OrientationBuilder 的 VoidCallbackMethod 来更改应用程序的运行方式。

在我分享的文章中,如果屏幕小,则打开一个Navigation route,否则将数据传递给右侧的一个widget。例如,这适用于消息传递应用程序。

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

Develop A Responsive Layout Of Mobile App With Flutter

Developing for Multiple Screen Sizes and Orientations in Flutter


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

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

快乐飘飘!

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2019-07-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-01-24
    • 1970-01-01
    • 2015-04-17
    相关资源
    最近更新 更多