Skip to main content

method channel JavaScript flutter

 method channel JavaScript  flutter 

 flutter plugin :  https://pub.dev/packages/webview_flutter

Step 1 - HTML CODE 

<!DOCTYPE html>
<html>
<head>
  <title>Thanks for your order!</title>
  <link rel="stylesheet" href="css/style.css">
  <script src="js/client.js" defer></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

</body>
<script type='text/javascript'>

function postMessage(){
  var data = {
        message: "Response from web",
        sender: "user123",
        timestamp: new Date().toISOString()
    };

    var jsonData = JSON.stringify(data);

    setTimeout(function() {
        PayResponse.postMessage(jsonData);
    }, 1500); // Delay of 1500 milliseconds (1.5 seconds)
}

window.onload = postMessage;

</script>
</html>

Step 2 - Flutter code 

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

class FlutterWebView extends StatefulWidget {
  const FlutterWebView({Key? key}) : super(key: key);

  @override
  State<FlutterWebView> createState() => _FlutterWebViewState();
}

class _FlutterWebViewState extends State<FlutterWebView> {
  late WebViewController webViewController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    webViewController = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0x00000000))
      ..setNavigationDelegate(
        NavigationDelegate(
          onProgress: (int progress) {
            // Update loading bar.
          },
          onPageStarted: (String url) {},
          onPageFinished: (String url) {},
          onHttpError: (HttpResponseError error) {},
          onWebResourceError: (WebResourceError error) {},
          onNavigationRequest: (NavigationRequest request) {
            if (request.url.startsWith('https://www.youtube.com/')) {
              return NavigationDecision.prevent;
            }
            return NavigationDecision.navigate;
          },
        ),
      )
      ..loadRequest(Uri.parse(''))
      ..addJavaScriptChannel("PayResponse", onMessageReceived: (var message) {
        print("------message received------");
        print(message.message);
        Navigator.of(context).pop(message.message);
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.red,
        body: WebViewWidget(
          controller: webViewController,
        ));
  }
}




Labels:

Comments

Post a Comment

Popular posts from this blog

Referral & Deep linking

  Plugins :  app_links: android_play_install_referrer: Link to share :  https://yourweb.com/referral?code=TEST123 https://play.google.com/store/apps/details?id=com.erer&referrer=referral_code%3DTEST123 Manifest :  < intent-filter android : autoVerify = "true" >     < action android : name = "android.intent.action.VIEW" />     < category android : name = "android.intent.category.DEFAULT" />     < category android : name = "android.intent.category.BROWSABLE" />     < data         android : host = "yourweb.co"         android : pathPrefix = "/referral"         android : scheme = "https" /> </ intent-filter > Flutter Code :  import 'package:app_links/app_links.dart' ; import 'package:android_play_install_referrer/android_play_install_referrer.dart' ; import 'package:flutter/foundation.dart' ; import 'package:shared_p...
Post a Comment
Read more

Vibe Coding Tools List

  Vibe Coding Tools List Dedicated Vibe Coding Platforms: Google AI Studio / Firebase Studio:  Rapid full-stack application generation and deployment from conversational prompts. Replit Agent:  Cloud-based IDE with "Ghostwriter" AI for instant code generation, debugging, and deployment. Bolt:  Browser-based AI development agent for building full-stack web and mobile apps with natural language. Lovable:  Rapid UI prototyping tool that converts text commands into styled layouts with one-click export/deployment. v0 by Vercel:  Prompt-powered UI builder for generating production-ready React components with Tailwind CSS. Wegic:  Converts visual ideas or Figma designs into working code with prompt-based structure creation. AI-Powered IDEs and Code Editors: Cursor :  An "AI-first" code editor (based on VS Code) offering deep project awareness and multi-file conversational edits. Windsurf (formerly Codeium) :  Agentic AI-native IDE featuring the "Cas...
Post a Comment
Read more

API security best practices

 API with a focus on security best practices : Key Security Practices Included: Input Validation and Sanitization : All inputs are validated and sanitized to prevent SQL injection and other attacks. Prepared Statements : All database queries use prepared statements to avoid SQL injection. Password Hashing : Passwords are hashed using password_hash() and verified using password_verify() . Token-Based Authentication : JSON Web Tokens (JWTs) are used for secure API authentication. Error Hiding : Error details are logged but not exposed to users in production. Strict Content-Type Header : Ensures only JSON payloads are processed. Rate Limiting and Throttling : Optional mechanisms to prevent abuse. Validation for IDs : Integer inputs (like user_id or exam_id ) are explicitly validated.
Post a Comment
Read more