Import & use javascript libraries in your flutter web projects

Last update: Oct 1, 2022

Overview

Import JS Library

Import & use javascript libraries in your flutter web projects.

flutter:
  assets:
    - assets/howler.js

importJsLibrary(url: "./assets/howler.js", flutterPluginName: "audio_plugin_example");

Why

Audio library compatible with Flutter Web : https://pub.dev/packages/assets_audio_player

Howler.js Audio library for the modern web : https://howlerjs.com/

And after weeks, month, years, eternity later....

How to use it

1. Create your plugin Package

https://flutter.dev/docs/development/packages-and-plugins/developing-packages

flutter create --template=package audio_plugin_example

2. Add the js library in your assets

Downloaded from https://github.com/goldfire/howler.js/tree/master/dist

3. Declare it inside your pubspec.yaml

flutter:
  assets:
    - assets/howler.js

4. Import import_js_plugin

dependencies:
  import_js_library: ^1.0.1

5. In your Flutter plugin project, import your .js lib

For example, on the registerWith()

pluginName: the name of your plugin, based on pubspecs.yaml, here audio_plugin_example

Using the method importJsLibrary(url: PATH_OF_JS, flutterPluginName: NAME_OF_FLUTTER_PLUGIN);

class AudioPlugin {

  static void registerWith(Registrar registrar) {
    final MethodChannel channel = MethodChannel(
      'audio_plugin',
      const StandardMethodCodec(),
      registrar.messenger,
    );

    importJsLibrary(url: "./assets/howler.js", flutterPluginName: "audio_plugin_example");
    
    final AudioPlugin instance = AudioPlugin();
    channel.setMethodCallHandler(instance.handleMethodCall);
  }
   
  ...

6. Using package:js, wrap your js methods/classes

@JS()
library howl.js;

import 'package:js/js.dart';

@JS("Howl")
class Howl {
  external Howl({List<String> src}); 

  external play();
}

7. Use your library !

final audio = Howl(src: ["./assets/astronomia.mp3"]);
audio.play();

for example in the plugin

  Howl audio;

  Future<dynamic> handleMethodCall(MethodCall call) async {
    print(call.method);
    switch (call.method) {
      case "play":
        if(audio != null){
          audio.play();
        }
        break;
      case "pause":
        if(audio != null){
          audio.pause();
        }
        break;
      case "open":
        final String path = call.arguments["path"];
        audio = Howl(src: [path]);
        break;
    }
  }

Concrete use-case

`import_js_library" is used to import & wrap Howl.js for the library https://pub.dev/packages/flutter_web_howl

And flutter_web_howl is included inside Assets Audio Player to handle the features on flutter web

https://pub.dev/packages/assets_audio_player

https://github.com/florent37/Flutter-AssetsAudioPlayer/blob/master/lib/assets_audio_player_web.dart

Comments

Fix Android build error

Fixes #3 by removing the android directory, which is not required anymore in Flutter.

It was required for a short amount of time when web was new, however, Flutter will now simply ignore plugins without an android directory when building Android projects.

opened by creativecreatorormaybenot 2
Android "Plugin project :import_js_library not found" when building

The following error is thrown on every Gradle build on Android:

Plugin project :import_js_library not found. Please update settings.gradle.

It does not impact functionality as import_js_library does not require Android code, but I suspect that your Android module is set up incorrectly.

This issue was reported by @kaboc here: https://github.com/creativecreatorormaybenot/wakelock/issues/48 (due to this plugin being a transitive dependency)

opened by creativecreatorormaybenot 0
Potential copyright issue with distribution of the example assets

I was looking through my disk for audio files, and noticed that one of the examples you are sharing is Stephan F's remix of Astronomia, titled "Astronomia 2K19".

I can't seem to find anything specifying that this song has free distribution rights, unless you have authorization from the publisher, you should probably remove it from your example's assets.

opened by miyoyo 0
Missing support for null safety

The package needs to be migrated to null safety (with a pre-release version), so that dependencies can migrate to null safety.

I will make a PR for this.

opened by creativecreatorormaybenot 6
How to pass Dart Function to a Web plugin ?

May be I am asking the wrong question, but can you throw some light on my query.

Basically I am trying to integrate a payment gateway provider js for web project. I am successful till the point where I am able to execute the payment flow. But I am unable to get the response back to the main dart code.

Can help me out on this ?

opened by jogiji 0

Import & use javascript libraries in your flutter web projects

Related tags

Overview

Import JS Library

Why

How to use it

1. Create your plugin Package

2. Add the js library in your assets

3. Declare it inside your pubspec.yaml

4. Import import_js_plugin

5. In your Flutter plugin project, import your .js lib

6. Using package:js, wrap your js methods/classes

7. Use your library !

Concrete use-case

Comments

Fix Android build error

Android "Plugin project :import_js_library not found" when building

Potential copyright issue with distribution of the example assets

Missing support for null safety

How to pass Dart Function to a Web plugin ?

Owner

Florent CHAMPIGNY

Life-saving helpers for working with JavaScript libraries when compiling Dart/Flutter to Web.

Dart JS interop for Mermaid - The Javascript tool that makes use of a markdown based syntax to render customizable diagrams, charts and visualizations.

The purpose of the go_router is to use declarative routes to reduce complexity, regardless of the platform you're targeting (mobile, web, desktop), handling deep linking from Android, iOS and the web while still allowing an easy-to-use developer experience.

MXFlutter 是一套使用 TypeScript/JavaScript 来开发 Flutter 应用的框架

A dart implementation of the chord.js javascript package to display beautiful chord diagrams

Dart equivalent of console.count() in JavaScript

In this project, we will design a travel app UI with a parallax effect for a unique scroll experience. You will learn how to create your own parallax effect without using external libraries.

Flutter architecture you can use in your projects.

Git+ is your ultimate GitLab mobile app that lets you interact with your projects like as if you were using desktop.

An examples of navigation with the Flutter and GetX libraries

A Flutter plugin for the native FingerprintJS Pro libraries

Firebase API Client Libraries for Dart

An app made in Flutter to help people choose the colors they will use in their projects!

This is a flutter app which uses the Bitrise Api(https://api-docs.bitrise.io/) to show the bitrise projects and builds and lets you download your artifacts.

Custom dropdown widget allows to add highly customizable widget in your projects with proper open and close animations and also comes with form required validation.

Run your MIT App Inventor projects on (nearly) any operating system!

This package will help you to manage the overlays in your projects. Show a dialog, notification, window, or a panel easily

A TabBarController that is easy to use for flutter developers. 🥰 It supports various styles of page navigation, and you can also use it to customize your favorite styles. 🍻🍻

A responsive scaffold widget that adjusts to your device size, for your flutter mobile and web apps.