如何在 Flutter Web 中添加插件?
Posted
技术标签:
【中文标题】如何在 Flutter Web 中添加插件?【英文标题】:How to add plugin in flutter web? 【发布时间】:2019-12-24 16:22:37 【问题描述】:我想在我的 Flutter Web 项目中添加任何插件,但添加插件后出现错误。我已经运行了 flutter pub get 它给了我代码 0。但是当我尝试时:
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
它说找不到包。
pubspec.yaml
environment:
# You must be using Flutter >=1.5.0 or Dart >=2.3.0
sdk: '>=2.3.0 <3.0.0'
dependencies:
flutter_web: any
flutter_web_ui: any
dev_dependencies:
build_daemon: ^2.0.0
build_runner: ^1.6.6
build_web_compilers: ^2.1.0
pedantic: ^1.7.0
dependency_overrides:
flutter_web:
git:
url: https://github.com/flutter/flutter_web
path: packages/flutter_web
flutter_web_ui:
git:
url: https://github.com/flutter/flutter_web
path: packages/flutter_web_ui
【问题讨论】:
你能发布你的 pubspec.yaml 文件吗? 你检查过这个包是否支持 Flutter web 我看到有人使用相同的插件,但它对我来说不起作用。 @RSSingh 你能链接到你看到有人使用它的地方吗?我敢打赌他们是在 Flutter(用于移动设备)中使用它,而不是在 Flutter Web(用于网站)。 mtechviral.com/myportfolio/# 他正在使用相同的粒子插件进行颤动,当我尝试时它对我不起作用。这个网站是用 Flutter for web 制作的。 【参考方案1】:您还没有添加font_awesome_flutter
插件。它需要在您的 pubspec.yaml 文件中,如下所示:
environment:
# You must be using Flutter >=1.5.0 or Dart >=2.3.0
sdk: '>=2.3.0 <3.0.0'
dependencies:
flutter_web: any
flutter_web_ui: any
font_awesome_flutter: ^8.5.0
dev_dependencies:
build_daemon: ^2.0.0
build_runner: ^1.6.6
build_web_compilers: ^2.1.0
pedantic: ^1.7.0
dependency_overrides:
flutter_web:
git:
url: https://github.com/flutter/flutter_web
path: packages/flutter_web
flutter_web_ui:
git:
url: https://github.com/flutter/flutter_web
path: packages/flutter_web_ui
不幸的是,即使您确实在其中安装了它,它仍然无法工作,因为 Flutter Web 甚至还不支持 font_awesome_flutter
插件。有关如何在 Flutter Web 上添加自定义字体的示例,请参阅 Flutter Web 存储库中的 custom_fonts example。
【讨论】:
我也试过了,但没有用。添加“获取依赖项”后,完全没问题,但是当我尝试导入 'package:font_awesome_flutter/font_awesome_flutter.dart';它说找不到。 @RSSingh 说真的。看我回答的最后一段。您拥有让 Font Awesome 自己工作所需的一切。 如果不可能,那么示例 Web 项目如何使用particle_background 插件用于 Web。 flutter.github.io/samples/particle_background/# 我看过一些使用插件的例子,但没有一个显示代码。我不明白为什么。【参考方案2】:更新:以下说明不再有效。由于以前的项目存储库已存档。
在这个特定的投资组合网站中,我不确定他是否使用了任何 fontawesome 插件。你可以在这里查看他的代码。 https://github.com/iampawan/myportfolio
请检查此migration guide 以查看您是否遵循了这些部分中提到的这些步骤。
此外,要使用新插件,这是我在项目中遵循的。例如,这是我在项目中使用 graphql-2.1.0 包的方式。
-
我去flutter包的版本页面。在这种情况下here。
下载最新版本并解压到我的文件夹中 项目。例如
$project_dir\packages
旁边 -- $project_dir\lib, $project_dir\web
将 $project_dir\packages\font-awesome-folder\lib 中的所有导入替换为
package:flutter to package:flutter_web
dart:ui to package:flutter_web_ui/ui.dart
编辑$project_dir\packages\font-awesome-folder\pubspec.yaml
以使用the migration guide 中定义的flutter_web sdk。
flutter pub get
和pub get
当然,通过这种方法,我们会丢失更新的版本。此外,如果 font-awesome 取决于我们为它做的其他事情。但暂时我觉得这对我有用。
您可以在此分支中查看 kevmoo 移植的提供程序包如何与 Flutter web here 一起使用。
【讨论】:
【参考方案3】:Pubspec.yaml
flutter_web_ui:
git:
url: https://github.com/flutter/flutter_web
path: packages/flutter_web_ui
小部件构建
ui.platformViewRegistry.registerViewFactory("my_div_", (int viewId)
DivElement element = DivElement()
..id = "reader"
..innerhtml = "Hello World";
return element;
);
脚手架
import 'dart:ui' as ui;
Column(children:[ HtmlElementView(viewType: 'my_div')])
【讨论】:
在 dom 上使用 getElementById 的 id 无法访问 div。 div 被插入到 shadow dom 上。以上是关于如何在 Flutter Web 中添加插件?的主要内容,如果未能解决你的问题,请参考以下文章
在 1.20.4 版本中添加 Flutter web-view 插件时出错