How to Use JavaScript in Flutter using the js Package with Complex Example | SCODES

In the previous example, we looked at how to use the ‘js‘ package in Flutter to call a JavaScript function and access its return value. In this example, we will look at a more complex scenario where we will pass a Dart object to a JavaScript function and access its properties in JavaScript.

Let’s start by creating a Dart class that we will use to pass data to the JavaScript function.

class Person {
  final String name;
  final int age;

  Person(this.name, this.age);

  @override
  String toString() => 'Person(name: $name, age: $age)';
}

Next, let’s define a JavaScript function that takes a Dart object as an argument and accesses its properties.

final String javascriptCode = '''
  function printPerson(person) {
    console.log('Name: ' + person.name);
    console.log('Age: ' + person.age);
  }
''';

Now, let’s call the JavaScript function from Dart code and pass it a ‘Person’ object.

final Person person = Person('John Doe', 30);
await context.evaluate(javascriptCode + 'printPerson($person)');

As you can see, we pass the ‘Person’ object as an argument to the ‘printPerson’ function. The JavaScript function can access the properties of the Dart object using the dot notation.

Note that when passing a Dart object to a JavaScript function, the object is automatically converted to a JavaScript object. The properties of the Dart object become properties of the JavaScript object, and the values of the Dart object’s properties become the values of the corresponding JavaScript object’s properties.

This is just a simple example of how you can use the js package in Flutter to run JavaScript code and access its return value. With the js package, you can do a lot more, such as calling JavaScript functions with multiple arguments, passing Dart functions as arguments to JavaScript functions, and more.

Here is the complete code for this 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 printPerson(person) {
        console.log('Name: ' + person.name);
        console.log('Age: ' + person.age);
      }
    ''';

    final Person person = Person('John Doe', 30);

    return FutureBuilder(
      future: context.evaluate(javascriptCode + 'printPerson($person)'),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        return Container();
      },
    );
  }
}

class Person {
  final String name;
  final int age;

  Person(this.name, this.age);

  @override
  String toString() => 'Person(name: $name, age: $age)';
}