flutter web build JS function with external JS library

0 votes

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?

Apr 10, 2023 in Flutter by Ashwini
• 5,430 points
1,515 views

1 answer to this question.

0 votes

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:

  1. First, download the pica.min.js file and add it to your project's assets folder.

  2. 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>
  1. 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

answered Apr 10, 2023 by vinayak

Related Questions In Flutter

0 votes
1 answer

How can I change the app display name build with Flutter?

Yes, you can change the app display ...READ MORE

answered Mar 21, 2023 in Flutter by venky
1,965 views
0 votes
1 answer

flutter problem with Getx ,socket.io and node.js

Check that you have added the necessary ...READ MORE

answered Apr 6, 2023 in Flutter by vishalini
507 views
0 votes
1 answer

How to get build and version number of Flutter app?

You can get the build and version ...READ MORE

answered Mar 29, 2023 in Flutter by pooja
811 views
0 votes
1 answer

Flutter plugin fails to build on iOS

It looks like the error is related ...READ MORE

answered Mar 31, 2023 in Flutter by chandru
1,237 views
0 votes
1 answer

How can I start learning Node.js and its related components?

Node.js is an open source server environment ...READ MORE

answered Jun 6, 2019 in Career Counselling by ArchanaNagur
• 2,360 points
502 views
0 votes
1 answer

How do I start studying Node.JS to create a restful API?

Node.js is an open source server environment ...READ MORE

answered Jun 11, 2019 in Others by ArchanaNagur
• 2,360 points
762 views
0 votes
1 answer

How can i insert data in relation table using model?

Hello @Alisha, Try to work using the model ...READ MORE

answered Aug 24, 2020 in Java-Script by Niroj
• 82,880 points
964 views
0 votes
0 answers

Fading in a background image using javascript or css on hover

I have so far been able to ...READ MORE

Jun 30, 2022 in CSS by Edureka
• 13,620 points
883 views
0 votes
1 answer

Linking 3 Flutter Projects in One Flutter Project

Yes, it is possible to combine multiple ...READ MORE

answered Mar 20, 2023 in Flutter by vinayak
337 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP