How to trigger events based on URL navigation in flutter webview package

Question

how to display a snackbar when a user navigates to a specific URL in flutter WebView

and how to add a button in the webview to navigate between pages inside the webview

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Web view'),
      ),
      body: WebViewWidget(
        controller:   WebViewController()
      ..enableZoom(false)
      ..setNavigationDelegate(NavigationDelegate(
        onNavigationRequest: (request) {
          if (request.url.startsWith(widget.returnUrl)) {
            print("Hello");
            return NavigationDecision.prevent;
          }
          return NavigationDecision.navigate;
        },
      ))
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(
        Uri.parse('https://google.com/'),
      )
      )
    );
  }
}


 

Answer 1

Solution:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Web view'),
       leading: IconButton(
        onPressed: () {
          Navigator.of(context).pop();
        },
        icon: Icon(
          Icons.arrow_back,
          color: Theme.of(context).primaryColorDark,
        )),
      ),
      body: WebViewWidget(
      controller: WebViewController()
        ..enableZoom(false)
        ..setNavigationDelegate(NavigationDelegate(
          onNavigationRequest: (request) {
            if (request.url ==
                "https://docs.flutter.dev/get-started/install") {
              ScaffoldMessenger.of(context)
                  .showSnackBar(SnackBar(content: Text("Hello")));
              return NavigationDecision.prevent;
            }

            return NavigationDecision.navigate;
          },
        ))
        ..setJavaScriptMode(JavaScriptMode.unrestricted)
        ..loadRequest(
          Uri.parse('https://flutter.dev/'),
        ))
    );
  }
}

Result :