How to call a JS function from Flutter Web?

Question

I have a simple JS function that I want to call from a Flutter web application:

<script>
    function alertMessage(text) {
          alert(text)
    }
</script>

How can I achieve this?

main.dart:

void onTap(){
    ///This is where I want to call the JS function...  alertMessage();
}

Brandon Pillay · Accepted Answer · 2022-03-22 07:46:16Z

13

import 'dart:js';

main() => context.callMethod('alert', ['Hello from Dart!']);

answered Mar 22, 2022 at 7:46

Brandon Pillay

1,1762 gold badges16 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

isabellefo · Accepted Answer · 2023-03-29 18:51:49Z

5

I used the universal_html package. I had a few problems with dart:js when I had to run tests, so this one worked as a great replacement.

import 'package:universal_html/js.dart';

context.callMethod("functionName", ['args']);

answered Mar 29, 2023 at 18:51

isabellefo

511 silver badge4 bronze badges

henriquedn · Accepted Answer · 2024-07-19 00:24:57Z

1

With dart 3 see dart:js-interop

Create the below in a dart file say my_js_functions.dart

library interop_library;

import 'dart:js_interop';

@JS()
external void alertMessage(String text);

Then you can call the alertMessage('sample text') from anywhere in your project.

answered Jul 19, 2024 at 0:24

henriquedn

737 bronze badges