import_js_library 0.0.2

Import & use javascript libraries in your flutter web projects

Import JS Library

Import & use javascript libraries in your flutter web projects.

Created to make it simpler to build Flutter Plugins compatible with web.

Example

to include howler.js & use it in a flutter web project :

1. Create your plugin Package

flutter create --template=package audio_plugin_example

Then

2. Add the js library in your assets
3. Declare it inside your pubspec.yaml

flutter:
  assets:
    - assets/howler.js

3. In your Flutter plugin project, import this js lib

For example, on the registerWith()

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

class AudioPlugin {

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

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

4. 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();
}

5. 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;
    }
  }