How to detect when webview url changes in flutter?

user_14394975 0
Viewed 7089

I have been looking around for a webview plugin in flutter that can detect when the url changes, but didn't find a match? The reason I am trying to detect a url change is because I want to change a bool variable to true when changed, which will then change the color of a appbar, is this possible?Are there any simple/easy examples out there that can achieve what i'm looking for? Thanks for any help in advance!

flutter webview detect
4 Answers

You can use StreamSubscription.

  StreamSubscription<String> _onStateChanged;
  final flutterWebviewPlugin = new FlutterWebviewPlugin();

      @override
      void initState() {
        super.initState();
    
        _onStateChanged =
            flutterWebviewPlugin.onUrlChanged.listen((String state) async {
          if (state.startsWith('your_url')) {
                // do whatever you want 
           }
        });
      }
user_51560750

for flutter webview I use below code

 body: WebView(
          onPageFinished: (url){
            if (url.toLowerCase().contains("google.com") && url.toLowerCase().contains("status")) {
              if (url.toLowerCase().contains("notok")) {

                Fluttertoast.showToast(msg: "not successfull");
               
              } else if (url.toLowerCase().contains("ok")) {
               
                Fluttertoast.showToast(msg: "successful!");

              }
            }
          },
          javascriptMode: JavascriptMode.unrestricted,
          initialUrl: widget.paymentUrl,
        ));
user_112985110

You can do with navigationDelegate:

WebView(
    initialUrl: yourInitialUrl,
    javascriptMode: JavascriptMode.unrestricted,
    onWebViewCreated: (WebViewController webViewController) {
      _controller.complete(webViewController);
    },
    navigationDelegate: (NavigationRequest request) {
      if(request.url.startsWith(urlSearched)) {

        //You can do anything

        //Prevent that url works
        return NavigationDecision.prevent;
      }
      //Any other url works
      return NavigationDecision.navigate;
    },
  )
user_58692170

In Webview you have optional navigationDelegate parameter

WebView(
      // initialUrl: 'https://flutter.dev',
      onWebViewCreated: (WebViewController webViewController) {
        _controller = webViewController;
        _loadHtmlFromAssets();
      },
      navigationDelegate: (NavigationRequest request) {
        setState(() {
      widget.appBarcolor = Colors.black87;
    });
        //Any other URL works
        return NavigationDecision.navigate;
      },
    );
  }

enter image description here

Sample:

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;
  Color appBarcolor = Colors.blue;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  WebViewController? _controller;

  @override
  void initState() {
    super.initState();
    // Enable virtual display.
    if (Platform.isAndroid) WebView.platform = AndroidWebView();
  }

  void _incrementCounter() {
    _controller!.goBack();
    setState(() {
      widget.appBarcolor = Colors.blue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: widget.appBarcolor,
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: controller(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.arrow_back),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  _loadHtmlFromAssets() async {
    // String fileText = await rootBundle.loadString('assets/help.html');
    var fileText =
        "<!DOCTYPE html> <html> <head> <title>HTML, CSS and JavaScript demo</title> <style> .rotate { transform: rotate(1700deg) ; } .rotate2 { transform: rotate(90deg) ; } .bg { background: url(https://picsum.photos/2000/1000?image=1069) center/cover; height: 50vh; width: 50vh; } body { margin:0; overflow:hidden; } </style> </head> "
        "<!-- Start your code here --> <ul> <li> <a href ='http://duckduckgo.com/' /><p> duckduckgo.com</a> </li>  <li> <a href='http://www.google.com'>google.com </a> </li>    <li> <a href='http://www.yahoo.com/'> yahoo.com </a> </li></ul> </html>";
    _controller?.loadUrl(Uri.dataFromString(fileText,
            mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
        .toString());
  }

  WebView controller() {
    return WebView(
      // initialUrl: 'https://flutter.dev',
      onWebViewCreated: (WebViewController webViewController) {
        _controller = webViewController;
        _loadHtmlFromAssets();
      },
      navigationDelegate: (NavigationRequest request) {
        setState(() {
          widget.appBarcolor = Colors.black87;
        });

        //Any other url works
        return NavigationDecision.navigate;
      },
    );
  }
}

While Debug navigation request value: enter image description here

user_77063540
Related