import_js_library 1.0.1

Flutter web

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 #

meme

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

meme

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

meme

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

meme

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

meme

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

6
likes
70
pub points
57%
popularity

Import & use javascript libraries in your flutter web projects

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

champigny.florent@gmail.com

License

Apache 2.0 (LICENSE)

Dependencies

flutter, flutter_web_plugins, html, js

More

Packages that depend on import_js_library