从为移动设备开发的相同代码库为 Flutter Web 开发单独的 UI

Posted 2023-02-23

【中文标题】从为移动设备开发的相同代码库为 Flutter Web 开发单独的 UI

【英文标题】：Developing a separate UI for flutter web from same codebase developed for mobile

【发布时间】：2021-08-21 05:49:12

【问题描述】：

我已经使用 Flutter 开发了一个移动应用程序，它可以在 ios 和 android 上完美运行。我现在想做的是从相同的代码库中获取 Web 应用程序，但使用不同的 ui。当前的应用程序可以完美地运行在浏览器也是如此，但它很奇怪，因为我使用了底部导航等移动特定组件。我用 BLoC 模式 开发了这个，并且用户界面与业务逻辑分离。我的问题是，我可以开发 web 应用程序的 ui 并重用现有代码中的业务逻辑实现吗？如果可以的话，如果有人可以提供一些我可以使用的参考资料，我很高兴。

【问题讨论】：

您可以使用常量kIsWeb 来检查您的应用是否在网络中运行。

@rickimaru 这也可以作为答案

【参考方案1】：

是的，您可以利用 Bloc 并重新实现 UI。

正如@rickimaru 建议的那样，您可以检查kIsWeb。但我的建议是检查您的屏幕尺寸。随着 Flutter 越来越多的目标如 windows、linux、macOS 等。

为更大的屏幕构建不同的 UI 可能更合适，而不仅仅是针对 Web（除非您执行特定于 Web 平台的逻辑，但情况似乎并非如此）。此外，仅在网络上运行并不意味着更大的屏幕尺寸，您的用户可能会通过他们的手机浏览器访问。

您可以使用MediaQuery 和断点手动检查屏幕大小，或者您可以利用已经制作的包，例如responsive_framework。