flutter web build JS function with external JS library

Question

I am going to build the JS function which calls external JS library.

// import external library
import 'https://cdn.jsdelivr.net/npm/pica@9.0.1/dist/pica.min.js';

function resize(param) {
    var src = param["src"];
    var toWidth = param["toWidth"];    
    //var callback = param["callback"];
    
    // call function in external library
    return resizeBuffer({
        src: src,
        toWidth: toWidth,

    });
}

Is this correct?

score 0 · Answer 1 · Apr 10, 2023

The code you provided seems to be a mix of JavaScript and Dart code. To use an external JavaScript library in a Flutter web app, you can add a script tag to the HTML file where the library is located. Here's an example:

First, download the pica.min.js file and add it to your project's assets folder.
Then, in the index.html file located in the web directory of your Flutter project, add a script tag to load the external library:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My App</title>
</head>
<body>
  <!-- add this script tag to load the external library -->
  <script src="assets/pica.min.js"></script>
  <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

Finally, in your Dart code, you can use the js.context.callMethod method to call the resizeBuffer function from the external library:

import 'dart:js' as js;

dynamic resize(Map<String, dynamic> param) {
  final src = param['src'];
  final toWidth = param['toWidth'];
  
  // call the function in the external library using js.context.callMethod
  return js.context.callMethod('resizeBuffer', [js.JsObject.jsify({
    'src': src,
    'toWidth': toWidth,
  })]);
}

This code should allow you to call the resize function from your Dart code and invoke the resizeBuffer function from the external pica.min.js library.

To know more, join our Flutter Course today