How to add plugin in flutter web?

Question

I want to add any plugin to my flutter web project but I am getting an error after adding the plugin. I have run flutter pub get it gave me code 0. But when I try:

import 'package:font_awesome_flutter/font_awesome_flutter.dart';

It says package not found.

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

Answer 1

You haven't added the font_awesome_flutter plugin yet. It needs to be in your pubspec.yaml file like this:

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

Unfortunately, even if you did have it in there, it still wouldn't work as the font_awesome_flutter plugin isn't even supported yet for Flutter Web. See the custom_fonts example in the Flutter Web repository for an example of how to add custom fonts on Flutter Web.

Answer 2

Update: The following instructions are not valid anymore. As the former project repository is archived.

In this particular portfolio site I am not sure if he used any fontawesome plugin. you can check his code here. https://github.com/iampawan/myportfolio

Instead Check this migration guide to see if you followed these steps mentioned under these sections.

Additionally to use a new plugin this is what I follow in my project. For instance this i how I use graphql-2.1.0 package in my project.

1. I go to the flutter package's version page. In this case here.

2. Download the latest version and unpack it into a folder in my project. eg

   • $project_dir\packages

   • along side -- $project_dir\lib, $project_dir\web

3. Replace all the imports inside the $project_dir\packages\font-awesome-folder\lib with

   • package:flutter to package:flutter_web

   • dart:ui to package:flutter_web_ui/ui.dart

4. Edit $project_dir\packages\font-awesome-folder\pubspec.yaml to use the flutter_web sdk as defined in the migration guide.

5. Finally do a flutter pub get and pub get

Of course with this approach we loose the upated versions. Also if font-awesome depends on the something else we have do the same for it. But for time being I find this working for me.

You can check how kevmoo ported provider package to be used with flutter web here in this branch.

Answer 3

Pubspec.yaml

  flutter_web_ui:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web_ui

widget build

ui.platformViewRegistry.registerViewFactory("my_div_", (int viewId) {
  DivElement element = DivElement()
    ..id = "reader"
    ..innerHtml = "Hello World";
  return element;
});

Scaffold

import 'dart:ui' as ui;

Column(children:[ HtmlElementView(viewType: 'my_div')])