如何在Flutter网站中添加插件?

时间:2019-08-19 12:35:39

标签: flutter flutter-dependencies flutter-web hummingbird

我想将任何插件添加到我的Flutter Web项目中,但是添加插件后出现错误。我已经运行flutter pub了,它给了我代码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

3 个答案:

答案 0 :(得分:0)

您尚未添加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

不幸的是,即使您 did 在那里,它仍然无法正常工作,因为Flutter Web甚至还不支持font_awesome_flutter插件。有关如何在Flutter Web上添加自定义字体的示例,请参见Flutter Web存储库中的custom_fonts example

答案 1 :(得分:0)

  

更新:以下说明不再有效。由于以前的项目存储库已存档。

在这个特定的投资组合网站中,我不确定他是否使用过任何字体惊人的插件。您可以在此处查看他的代码。 https://github.com/iampawan/myportfolio

相反,请检查此migration guide,以了解您是否按照这些部分中提到的步骤进行操作。

另外要使用新的插件,这是我在项目中遵循的。例如,这就是我在项目中如何使用graphql-2.1.0程序包。

  1. 我转到flutter软件包的版本页面。在这种情况下,here
  2. 下载最新版本并将其解压缩到我的文件夹中 项目。例如

    •   

      $ project_dir \ packages

    •   

      沿-$ project_dir \ lib,$ project_dir \ web

  3. 替换$ project_dir \ packages \ font-awesome-folder \ lib内部的所有导入文件

    •   

      package:flutter to package:flutter_web

    •   

      dart:ui to package:flutter_web_ui/ui.dart

  4. 编辑$project_dir\packages\font-awesome-folder\pubspec.yaml以使用the migration guide中定义的flutter_web sdk。

  5. 最后做一个flutter pub getpub get

当然,使用这种方法,我们会放宽升级版本。同样,如果font-awesome依赖于其他内容,我们也可以这样做。但是暂时我发现这对我有用。

您可以在此分支中查看如何将flvm web here与kevmoo移植的提供程序包一起使用。

答案 2 :(得分:0)

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')])