如何将 Flutter 移动应用迁移到 Flutter Web

Posted 2023-02-23

【中文标题】如何将 Flutter 移动应用迁移到 Flutter Web

【英文标题】：How to migrate flutter mobile app to flutter web

【发布时间】：2019-10-25 10:22:11

【问题描述】：

我有一个用 Flutter 编写的移动应用程序，我想将其转换为一个 flutter_web 应用程序（集成 flutter_web 尚不可用）。 我目前遇到包问题。

我已按照本网站https://www.codemitter.com/how-to-add-web-counterpart-in-an-existing-flutter-project/中列出的说明进行操作

我收到以下错误

webdev could not run for this project.
You have a dependency on `cached_network_image` which is not supported for flutter_web tech preview. See https://flutter.dev/web for more details.
You have a dependency on `cloud_firestore` which is not supported for flutter_web tech preview. See https://flutter.dev/web for more details.
You have a dependency on `cupertino_icons` which is not supported for flutter_web tech preview. See https://flutter.dev/web for more details.
You have a dependency on `firebase_core` which is not supported for flutter_web tech preview. See https://flutter.dev/web for more details.
You have a dependency on `flutter` which is not supported for flutter_web tech preview. See https://flutter.dev/web for more details.
You have a dependency on `path_provider` which is not supported for flutter_web tech preview. See https://flutter.dev/web for more details.
You have a dependency on `sqflite` which is not supported for flutter_web tech preview. See https://flutter.dev/web for more details.
pub finished with exit code 78

以下插件的 flutter_web 版本是什么？ 如何手动/自动更改这样的插件以在flutter_web上支持？

【参考方案1】：

迁移到 Flutter Web 时要遵循的步骤：

根据迁移指南更新构建配置

用flutter_web替换所有flutter导入

移除所有依赖原生平台（android 或 ios）的插件，并用 dart:html 或纯 dart 网络库 (https://pub.dev/web) 中的等效插件替换它们

使用依赖于 Flutter 框架的 fork 非原生库，例如 https://github.com/rrousselGit/provider/issues/82 您可能需要像这样自己创建一个 fork：https://github.com/kevmoo/provider/commit/bb739c96463347dd185331655e1d8895665172b9

步骤 1. 和 2. 是小菜一碟。但是 3. 和 4. 可能非常有色彩。

【参考方案2】：

插件是not yet supported on flutter_web，我们还没有关于迁移故事的详细信息。调用本机 Java 或 Swift 代码的插件将无法自动迁移。任何导入 dart:io 或 dart:isolate 的代码也不支持，需要重写。

【参考方案3】：

从 Flutter v1.10 开始，您可以将 Flutter 应用迁移到 Web。

通过运行启用网络支持：

flutter config --enable-web

现在，如果你想创建一个新项目，你可以运行

flutter create project_name

或者如果您想将现有的迁移到网络，请运行

flutter create .

通过运行检查连接的设备：

flutter devices

通过运行在 chrome 中运行您的应用：

flutter run -d chrome

【讨论】：

说明直接来自 Flutter 网页，请引用来源。此外，这并没有真正回答如何将现有项目移植到 web 的问题，它只是说明了如何为 Flutter web 设置项目框架。