Implementasi Native Flutter

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:permission_handler/permission_handler.dart';

class QoinWebviewScreen extends StatefulWidget {
  final String baseUrl;
  final String signature;
  final String palette;

  const QoinWebviewScreen({
    Key? key,
    required this.baseUrl,
    required this.signature,
    this.palette = 'original',
  }) : super(key: key);

  @override
  State<QoinWebviewScreen> createState() => _QoinWebviewScreenState();
}

class _QoinWebviewScreenState extends State<QoinWebviewScreen> {
  late final WebViewController _controller;
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    _initPermissionsAndWebview();
  }

  Future<void> _initPermissionsAndWebview() async {
    // 1. Minta izin lokasi GPS sebelum webview dibuka
    await Permission.locationWhenInUse.request();

    // 2. Konfigurasi Controller Webview
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(Colors.white)
      ..addJavaScriptChannel(
        'QoinBridge',
        onMessageReceived: (JavaScriptMessage message) {
          _handleWebviewMessage(message.message);
        },
      )
      ..setNavigationDelegate(
        NavigationDelegate(
          onPageFinished: (String url) {
            setState(() => _isLoading = false);
            _injectPostMessage();
          },
        ),
      )
      ..loadRequest(Uri.parse('${widget.baseUrl}/'));
  }

  void _injectPostMessage() {
    final payload = jsonEncode({
      'Signature': widget.signature,
      'Palette': widget.palette,
    });

    // Pasang polyfill bridge agar window.postMessage di webview diteruskan ke channel Flutter
    const bridgeScript = """
      window.addEventListener('message', function(event) {
        if (window.QoinBridge) {
          var data = typeof event.data === 'string' ? event.data : JSON.stringify(event.data);
          window.QoinBridge.postMessage(data);
        }
      });
    """;

    _controller.runJavaScript(bridgeScript);
    _controller.runJavaScript("window.postMessage($payload, '*');");

    // Retry kirim ulang 500ms kemudian
    Future.delayed(const Duration(milliseconds: 500), () {
      _controller.runJavaScript("window.postMessage($payload, '*');");
    });
  }

  void _handleWebviewMessage(String messageText) {
    try {
      final data = jsonDecode(messageText);
      if (data is Map<String, dynamic>) {
        // Tangkap sinyal penutupan
        if (data['close'] == true) {
          Navigator.of(context).pop(data);
        }
      }
    } catch (e) {
      debugPrint('Format pesan non-JSON: $messageText');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: [
            WebViewWidget(controller: _controller),
            if (_isLoading)
              const Center(child: CircularProgressIndicator(color: Colors.amber)),
          ],
        ),
      ),
    );
  }
}