The webview content shows loading indicator and nothing else

[baoxiehao]

Reproduce:

Open a webview and click a sublink, then go back will return to the original web page, then go back AGAIN, the webview will not be closed but just shows a loading indicator and blank page content.
And sometimes not clicking a sublink before going back will also causing this problem.

And if I fire the close() inside onWillPop will not be working also.

class WebViewWidget extends StatefulWidget {
  final String title;
  final String url;

  WebViewWidget({Key key, this.title, this.url}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _WebviewState();
}

class _WebviewState extends State<WebViewWidget> {

  final flutterWebviewPlugin = FlutterWebviewPlugin();

  String currentUrl;

  @override
  void initState() {
    flutterWebviewPlugin.onUrlChanged.listen((url) {
      print('url changed from $currentUrl to $url');
      currentUrl = url;
    });
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: _onWillPop,
      child: WebviewScaffold(
        url: widget.url,
        appBar: AppBar(
          title: Text(
            widget.title,
          ),
        ),
      ),
    );
  }

  Future<bool> _onWillPop() {
    flutterWebviewPlugin.close();
    return Future.value(currentUrl == widget.url);
  }
}

[marianoarga]

Check this hack
#131 (comment)

[mahadi-hossain]

use this within the build method where the WebviewScaffold is mounted

flutterWebviewPlugin.onDestroy.listen((_){
      if(Navigator.canPop(context)){
        Navigator.of(context).pop();
      }
    });

you will get your problem solved :)

[baoxiehao]

use this within the build method where the WebviewScaffold is mounted

flutterWebviewPlugin.onDestroy.listen((_){
      if(Navigator.canPop(context)){
        Navigator.of(context).pop();
      }
    });

you will get your problem solved :)

Problem solved! Suggest add it to the readme in case new comer will surely come across this problem.

Following is my snippet, in case anyone need it.
Update the title after the web page is loaded.

import 'package:flutter/material.dart';
import 'package:flutter_rss/utils/router.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

class WebViewPluginPage extends StatefulWidget {
  final String title;
  final String url;

  const WebViewPluginPage({
    Key key,
    @required this.title,
    @required this.url,
  }) : super(key: key);

  @override
  _WebViewPluginPageState createState() => new _WebViewPluginPageState();
}

class _WebViewPluginPageState extends State<WebViewPluginPage> {
  String _title;
  final _webViewPlugin = FlutterWebviewPlugin();

  @override
  void initState() {
    super.initState();
    _title = widget.title;
    _webViewPlugin.onStateChanged.listen((state) async {
      if (state.type == WebViewState.finishLoad) {
        String script = 'window.document.title';
        var title = await _webViewPlugin.evalJavascript(script);
        setState(() {
          this._title = title;
        });
      }
    });
    _webViewPlugin.onDestroy.listen((_) {
      if (Navigator.canPop(context)) {
        Navigator.of(context).pop();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: Theme.of(context),
      home: WebviewScaffold(
        appBar: AppBar(
          title: Text(_title),
          leading: IconButton(
            icon: Icon(Icons.arrow_back),
            onPressed: () => Router.pageBack(context),
          ),
        ),
        url: widget.url,
        hidden: true,
        withJavascript: true,
      ),
    );
  }
}

[baoxiehao]

However, I've came across the https://pub.dartlang.org/packages/flutter_custom_tabs today. And I think it may be better and simpler for just webpage browsing. Take care of the workaround branch in case you are migrating to androidX (droibit/flutter_custom_tabs#9).

[zhancheng]

obove isn't work for me, I did this works!

Widget build(BuildContext context) {
    return new WillPopScope(child: new WebviewScaffold(
    ...
    ), onWillPop: _willPopCallback);
}

Future<bool> _willPopCallback() async {
    flutterWebviewPlugin.close();
}

[FlatCodeIq]

I spent like an hour trying to figure out why it only shows circular progress indicator instead of the web page. the onDestroy listener didn't solve it. I finally solved it by making the "hidden" parameter in WebviewScaffold false instead of true.

The below is the code:

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

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

  @override
  State<BasketPage> createState() => _BasketPageState();
}

class _BasketPageState extends State<BasketPage> {
  final flutterWebViewPlugin = FlutterWebviewPlugin();

  @override
  void initState() {
    super.initState();
    flutterWebViewPlugin.close();
  }

  @override
  void dispose() {
    super.dispose();
    flutterWebViewPlugin.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return WebviewScaffold(
      initialChild: const Expanded(
        child: Center(child: SizedBox(height: 64, width: 64, child: CircularProgressIndicator())),
      ),
      url: 'https://google.com',
      hidden: false,
      appCacheEnabled: true,
      withJavascript: true,
      withLocalStorage: true,
      appBar: AppBar(
        elevation: 1.0,
        centerTitle: true,
        title: const Text("Afarin TV"),
        actions: <Widget>[
          IconButton(
            icon: const Icon(
              Icons.refresh,
              color: Color.fromRGBO(255, 255, 255, 1.0),
            ),
            onPressed: () => flutterWebViewPlugin.reload(), // this is reloading the url that was provided to webview, not the current URL.
          ),
        ],
      ),
    );
  }
}

[imomins]

The plugin flutter_webview_plugin uses a deprecated version of the Android embedding.
To avoid unexpected runtime failures, or future build failures, try to see if this plugin supports the Android V2 embedding. Otherwise, consider removing it since a future release of Flutter will remove these deprecated APIs.