florent37 / flutter_web_import_js_library

Import & use javascript libraries in your flutter web projects

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

flutter_web_import_js_library's Issues

Use "lodash" in Flutter Android

I want to use "lodash" in Flutter Android, can it be achieved?

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.

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: creativecreatorormaybenot/wakelock#48 (due to this plugin being a transitive dependency)

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.

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 ?