How to write platform specific code for web in flutter?

Question

In flutter, we use platform channels that allows us to call platform-specific APIs whether available in Kotlin or Java code on Android, or in Swift or Objective-C code on iOS.

How to achieve the same with web in flutter ? How can one use a npm package and write some javascript code and send the result to flutter? Is this even possible ? There is official docs for writing platform specific code for Android and iOS, but I couldn't find any docs for writing platform specific code for web.

Also, I tried using the js package. If this is the one that has to be used for this case, how to use it ?

score 0 · Answer 1 · answered Jul 20 '21 at 13:44

This is what I do to display Hubspot chat on Flutter Web. I have a folder for Hubspot with:

index.html
script.js
style.css

Then a Flutter Widget with webview_flutter_plus plugin:

class HubspotWebview extends StatefulWidget {
  @override
  _HubspotWebviewState createState() => _HubspotWebviewState();
}

class _HubspotWebviewState extends State<HubspotWebview> {
  final _javascriptChannels = Set<JavascriptChannel>();
  bool loading = true;

  @override
  void initState() {
    super.initState();
    _javascriptChannels.add(JavascriptChannel(
        onMessageReceived: (JavascriptMessage message) {
          debugPrint('message: ' + message.message);
          _toggleLoading();
        },
        name: 'Loading'));
  }

  @override
  Widget build(BuildContext context) {
    final path = '${kIsWeb ? 'assets/' : ''}assets/hubspot_web_page/index.html';
    final key = 'web_bot_key';
    if (kIsWeb) {
      ui.platformViewRegistry.registerViewFactory(
          key,
              (int viewId) => IFrameElement()
            ..width = '640'
            ..height = '360'
            ..src = path
            ..style.border = 'none'
            ..onLoadedData.listen((event) {
              _toggleLoading();
            }));
    }
    return Scaffold(
      appBar: new AppBar(
          backgroundColor: MyColors.blue_business,
          title: MyText.subtitle(
            getText('business_help_chat', backUpText: 'Help Chat'),
            color: MyColors.white_rice,
          )),
      body: Stack(
        children: [
          kIsWeb
              ? HtmlElementView(viewType: key)
              : WebViewPlus(
            javascriptMode: JavascriptMode.unrestricted,
            initialUrl: path,
            javascriptChannels: _javascriptChannels,
          ),
          if (loading)
            Center(child: CircularProgressIndicator()),
        ],
      ),
    );
  }

  void _toggleLoading() => setState(() => loading = !loading);
}

On Javascript file Loading.postMessage('') triggers toggleLoading() on Flutter:

  function onConversationsAPIReady() {
    window.hsConversationsSettings = {
      inlineEmbedSelector: '#hubspot-conversations-inline-parent',
      enableWidgetCookieBanner: true,
      disableAttachment: true
    };
    window.history.pushState({}, 'bot', '?bot=true');
    window.HubSpotConversations.widget.refresh({openToNewThread: true});
    Loading.postMessage('');
  }

  if (window.HubSpotConversations) {
    onConversationsAPIReady();
  } else {
    window.hsConversationsOnReady = [onConversationsAPIReady];
  }

How to write platform specific code for web in flutter?

1 Answers1