jio_webview 0.1.8 copy "jio_webview: ^0.1.8" to clipboard
jio_webview: ^0.1.8 copied to clipboard

A Flutter plugin for both android and iOS which provides native webview.

example/lib/main.dart

import 'dart:async';
import 'dart:developer' as developer;

import 'package:flutter/material.dart';
import 'package:jio_webview/jio_webview.dart';
import 'package:url_launcher/url_launcher.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isLoading = false;
  static const String webUrl = 'https://jiocoders.com/';
  late final WebViewController _webViewController;
  final String kLogExamplePage = '''
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML string</title>
    <script>
        function sendIosMessageToFlutter() {
            if (window.webkit && window.webkit.messageHandlers.JioFlutterJsInterface) {
                window.webkit.messageHandlers.JioFlutterJsInterface.postMessage("Hello from HTML!");
            } else {
                console.log("Flutter interface not available.");
            }
        }
    </script>
    <script>
        function postSomeMessage(message) {
            window.webkit.messageHandlers.headerInfo.postMessage(message)
        }
    </script>
    <script type="text/javascript">
        const functionAlert = (message) => alert(message);
        window.fAlert = functionAlert;
        
        const mLogs = (msg) => console.info(msg);
        window.fLog = mLogs;
//-------experimental-----------
        // fromFlutter(newTitle) {
        //     document.getElementById("title").innerHTML = newTitle;
        //     sendBack();
        // }
        // window.function = fff;
        function sendBack() {
            window.webkit.messageHandler.headerInfo.postMessage("Hello from JS");
        }
    </script>
</head>
<body onLoad="console.log('Logging that the page is loading.')">

<h3>Local Html Page</h3>
<style>
    .btn-group button {
      padding: 8px; 12px;
      display: block;
      width: 60%;
      margin: 5px 0px 10px 0px;
    }
</style>
<div class="btn-group">
    <ul><ul>
    <button onclick="sendIosMessageToFlutter()"><b>Send iOS Message</b></button>
    <button onclick="window.JioFlutterJsInterface.postMessage('js_close')"><b>Call Flutter</b></button>
    <button onclick="console.error('This is an error message.')"><b>Error</b></button>
    <button onclick="console.debug('This is a debug message.')"><b>Debug</b></button>
    <button onclick="console.log('This is a log message.')"><b>Log</b></button>
    <button onclick="alert('Alert from WebView!')"><b>Alert</b></button>
    <button onclick="prompt('Prompt from WebView!')"><b>Prompt</b></button>
    <button onclick="window.open('https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_open')"><b>Pop-up Open</b></button>
    <button onclick="window.close()"><b>Pop-up Close</b></button>
</div>

<p>
  <i>The navigation delegate is set to block navigation to the youtube website.</i>
</p>
  <ul><ul>
    <a href="upi://pay?pa=upiaddress@okhdfcbank&pn=JohnDoe&cu=INR">Buy Now</a>
    <br/>
    <br/>
    <a href="https://www.youtube.com/">https://www.youtube.com/</a>
    <br/>
    <br/>
    <a href="https://www.google.com/">https://www.google.com/</a>
  <br/>
</body>
</html>
''';

  Future<void> setupController() async {
    _webViewController.registerPopupWindowJavaScriptListener(
      NavigationDelegate(
        onPageStarted: (url) {
          developer.log("Main.onPageStarted::$url");
          setState(() {
            isLoading = true;
          });
        },
        onProgress: (progress) {
          developer.log("Main.onProgress::$progress");
        },
        onPageFinished: (url) {
          developer.log("Main.onPageFinished::$url");
          setState(() {
            isLoading = false;
          });
        },
        onHttpError: (error) =>
            developer.log("HTTP error: ${error.description}"),
        onNavigationRequest: (request) async {
          if (request.url.startsWith('https://www.youtube.com/')) {
            return NavigationDecision.prevent;
          }
          if (request.url.startsWith('upi://pay?')) {
            _launchURL(request.url);
            return NavigationDecision.prevent;
          }
          return NavigationDecision.navigate;
        },
      ),
      jsChannel: /**/
          JavascriptChannel(
              name: 'JioFlutterJsInterface',
              onMessageReceived: (JavaScriptMessage message) {
                developer.log('Main::Message Received::${message.message}');
              }),
    );
  }

  void _launchURL(String url) async {
    var result = await launchUrl(Uri.parse(url));
    debugPrint(result.toString());
    if (result == true) {
      developer.log("UPI Success");
    } else if (result == false) {
      developer.log("UPI Fail");
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Jio WebView example app'),
          actions: [
            IconButton(
              icon: const Icon(Icons.refresh),
              onPressed: () async {
                await _webViewController.reload();
              },
            ),
            IconButton(
              icon: const Icon(Icons.arrow_back),
              onPressed: () async {
                if (await _webViewController.canGoBack()) {
                  await _webViewController.goBack();
                }
              },
            ),
            IconButton(
              icon: const Icon(Icons.run_circle),
              onPressed: () async {
                final userAgent = await _webViewController.getUserAgent();
                developer.log('defaultUserAgent:: $userAgent');
                _webViewController.evaluateJavascript("""
                    var newWin = window.open('https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_open');
                    if (!newWin || newWin.closed || typeof newWin.closed == 'undefined') {
                        console.log('Pop-up blocked');
                    } else {
                        console.log('Pop-up opened successfully!');
                    }
                  """);
              },
            ),
            IconButton(
              icon: const Icon(Icons.home),
              onPressed: () async {
                // const homeUrl =
                //     'https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_open';
                // await _webViewController.loadUrl(homeUrl);
                await _webViewController.loadHtmlString(kLogExamplePage);
              },
            ),
          ],
        ),
        body: Stack(
          children: [
            NativeWebView(
              webUrl: webUrl,
              onControllerCreated: (wc) {
                _webViewController = wc;
                setupController();
              },
            ),
            isLoading
                ? const Center(child: CircularProgressIndicator())
                : const SizedBox()
          ],
        ),
      ),
    );
  }
}