How to use custom JavaScript in Flutter using JS package | with example| Part – 1 | SCODES

Flutter is a popular mobile app development framework that allows you to create high-performance and visually appealing apps for both Android and iOS. However, sometimes you might need to use JavaScript code in your Flutter app, and that’s where the js package comes in.

The js package provides a simple way to run JavaScript code in your Flutter app. With this package, you can easily call JavaScript functions and access their return values from Dart code.

In this article, we will look at how to use the “js” package in Flutter to run JavaScript code. We will create a simple example that will demonstrate how to call a JavaScript function from Dart code and access its return value.

Installing the “js” Package

The first step to using the js package is to install it. You can install it by adding the following line to your pubspec.yaml file:

dependencies:
  js: ^0.6.0

Importing the js Package

Once the package is installed, you need to import it into your Dart code. You can do this by adding the following line to your Dart code:

import 'package:js/js.dart';

Defining the JavaScript Function

The next step is to define the JavaScript function that you want to call from the Dart code. You can do this by creating a string that contains the JavaScript code.

final String javascriptCode = '''
  function addNumbers(a, b) {
    return a + b;
  }
''';

Calling the JavaScript Function

Now that we have defined the JavaScript function, we can call it from Dart code. For this, we will use the ‘context.evaluate’ method of the js package.

final result = await context.evaluate(javascriptCode + 'addNumbers(1, 2)');

The context.evaluate method takes a string argument that contains the JavaScript code that you want to run. In this case, we are calling the addNumbers function and passing the arguments 1 and 2.

Accessing the Return Value

The context.evaluate method returns a Promise that resolves to the return value of the JavaScript code that you ran. In this case, the return value of the addNumbers function is the sum of the two numbers, ‘3’.

final int sum = result as int;
print(sum); // 3

Putting it all Together

Here is the complete code for our example:

import 'package:flutter/widgets.dart';
import 'package:js/js.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final String javascriptCode = '''
      function addNumbers(a, b) {
        return a + b;
      }
    ''';

    return FutureBuilder(
      future: context.evaluate(javascriptCode + 'addNumbers(1, 2)'),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        final int sum = snapshot.data as int;
        return Text(sum.toString());
      },
    );
  }
}