WebView Post Message Not Sending

Custom Code

I have created a simple webview that directs to a site I made, the site expects post messages to personalize content and also sends back post messages to the app to indicate changes on the site. I get a log that the message was sent, but the site is not receiving it. Has anyone encountered this and how to fix it?

Here is my code (link and message data replaced to demo ones for security):

// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/backend/schema/structs/index.dart';
import '/backend/schema/enums/enums.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import 'index.dart';
import '/flutter_flow/custom_functions.dart';
import 'package:flutter/material.dart';
import 'package:flutter_webview_pro/webview_flutter.dart';
import 'dart:convert';

class KinesteXChallengeWidget extends StatefulWidget {
  const KinesteXChallengeWidget({
    super.key,
    this.width,
    this.height,
    required this.userId,
  });

  final double? width;
  final double? height;
  final String userId;

  @override
  State<KinesteXChallengeWidget> createState() => _KinesteXChallengeWidgetState();
}

class _KinesteXChallengeWidgetState extends State<KinesteXChallengeWidget> {
  late WebViewController _webViewController;
  final ValueNotifier<bool> _isLoading = ValueNotifier<bool>(true);

  @override
  Widget build(BuildContext context) {
    final message = {
      'key': 'key',
      'company': 'company',
      'userId': widget.userId,
      'exercise': 'Squats',
      'countdown': 100,
      'style': 'dark',
    };

    return Container(
      width: widget.width ?? double.infinity,
      height: widget.height ?? double.infinity,
      child: Stack(
        children: [
          WebView(
            initialUrl: 'https://example.com',
            javascriptMode: JavascriptMode.unrestricted,
            onWebViewCreated: (WebViewController webViewController) {
              _webViewController = webViewController;
            },
            onPageFinished: (String url) async {
              _isLoading.value = false;

              // Inject the message
              final script = '''
                try {
                  const message = ${jsonEncode(message)};
                  window.postMessage(message, '*');
                  console.log('Sent message:', message);
                } catch (error) {
                  console.error('Error sending message:', error);
                }
              ''';

              try {
                await _webViewController.evaluateJavascript(script);
                print('Message sent successfully');
              } catch (e) {
                print('Error sending message: $e');
              }
            },
            javascriptChannels: {
              JavascriptChannel(
                name: 'MessageHandler',
                onMessageReceived: (JavascriptMessage message) {
                  print('Received message: ${message.message}');
                },
              ),
            },
            gestureNavigationEnabled: true,
            backgroundColor: Colors.black,
          ),
          ValueListenableBuilder<bool>(
            valueListenable: _isLoading,
            builder: (context, isLoading, child) {
              if (!isLoading) return const SizedBox.shrink();
              return Container(
                color: Colors.black,
                child: const Center(
                  child: CircularProgressIndicator(
                    color: Colors.white,
                  ),
                ),
              );
            },
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _isLoading.dispose();
    super.dispose();
  }
}
What have you tried so far?

I created a new Flutter project and everything works there.

I tried other webview packages (webviewx_plus, flutter_webview_pro, webview_flutter) but it didn't work.

And I tried different approaches different approaches:

  • Direct WebView loading

  • HTML wrapper with iframe

  • URL parameters for data passing

  • JavaScript injection

  • PostMessage communication

Did you check FlutterFlow's Documentation for this topic?
Yes
5