FLUTTER WEB: 如何在Flutter应用程序和Web上实现单一代码库？

Question

我们在Flutter中有一个适用于Android和iOS的单一代码库。我们尝试将同一代码库用于Flutter Web，但效果不佳。

由于某些库/插件目前不受Flutter SDK支持，为了缓解这些问题，我们维护两个单独的存储库，一个用于Android-iOS，另一个用于Web。

此外，要注意的是，每个Flutter产品都有一个独特的pubspec.yaml文件，因此需要分别维护两个存储库。目前有一些插件仅在应用程序上受支持，而尚未在Flutter Web上受支持，例如Awesome Notifications、Clevertap插件等。

将这些插件集成到Web上会导致Web停止运行。因此，保持相同的代码库对于所有平台（即Android、iOS和Web）来说变得技术上复杂，因为应用程序具有许多功能。

同时测试、调试和解决Web中的问题需要很长时间。那么，我们如何在不为Web创建另一个存储库的情况下，维护所有平台（即Android、iOS和Web）的相同代码，并获得优势以使我们的代码库流程化？

如果我在pubspec文件中注释了用于Web的awesome_notifications包，那么无论我们在哪里使用其功能，都会出现问题（如屏幕截图所示）。为了在移动端和Web端都能成功运行，是否有可用的方法可以同时使用移动端和Web端的包？

- Rohit Bhargava

---

你好，你最终采取了什么方法？我也面临类似的挑战，发布了这个问题 - https://dev59.com/Bsb6oIgBc1ULPQZFDbs- - Krishna Shetty

@KrishnaShetty 嗨，看看我的答案吧！ https://dev59.com/Bsb6oIgBc1ULPQZFDbs-#73783036 - Rohit Bhargava

Answer 1

理想情况下，您希望使用单个代码库来托管Web和移动版本，以最小化代码维护并提高效率。为此，您需要能够找到代码运行的平台，以便可以通过编程方式调用代码。

您可以使用常量kIsWeb来检查应用程序是否已编译为Web，并且您可以使用该条件仅在支持它的平台上运行特定于平台的代码（例如awesome_notifications包）。这样，您仍然可以导入所需的软件包，但只有在应用程序在移动版本上运行时才调用它们。

这应该允许您将代码库压缩成一个存储库，而不会牺牲可能无法跨所有平台工作的任何功能。

- Lucas

Answer 2

你需要做的是一个条件导入，例如：

import 'package:eam_flutter/form/mobileui.dart'
if (dart.library.html) 'package:eam_flutter/form/webui.dart'
as multiPlatform;   

- Fred Grott