CODEWITHSUNDEEP
flutterwebviewloading
Long Trinh
Long Trinh

Reputation: 39

Flutter: How to know WebView finish loading?

I am new to flutter, and trying to display some of page (third party page) on my app. However, while the page is loading, the white screen somehow makes the users think the app is not working. I wonder if there is any way to implement the loading icon on app until the site completes loading. Or is there any signal from WebView that indicates site loading?

Upvotes: 3

Views: 11940

Answers (3)

Adelina
Adelina

Reputation: 11881

This is how I implemented loader.

_stackToView = 1 - show loader

_stackToView = 0 - show webview

class MyWebViewWidget extends StatefulWidget {
  @override
  _MyWebViewWidgetState createState() => _MyWebViewWidgetState();
}

class _MyWebViewWidgetState extends State<MyWebViewWidget> {
  num _stackToView = 1;

  @override
  Widget build(BuildContext context) {
    return IndexedStack(
      index: _stackToView,
      children: [
        WebView(
          initialUrl: "https://www.google.com/",
          onPageFinished: (String url) {
            // should be called when page finishes loading
            setState(() {
              _stackToView = 0;
            });
          },
        ),
        Container(child: Center(child: CircularProgressIndicator())),
      ],
    );
  }
}

Upvotes: 4

Trần Đức T&#226;m
Trần Đức T&#226;m

Reputation: 4443

THat's depend on the WebView's library you are using. Flutter don't have built-in WebView therefore I answer based on 2 famous library now.

With webview_flutter: The WebView widget provided onPageFinished callback.

class Demo extends StatefulWidget {
  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  bool _finished = false;
  bool get finished => _finished;

  @override
  Widget build(BuildContext context) => WebView(
      initialUrl: "https://www.google.com.vn",
      onPageFinished: (String url) {
            setState(() => _finished = true);
        },
      ),
    );
}

With flutter_webview_plugin: You should create a new FlutterWebviewPlugin íntance. The FlutterWebviewPlugin íntance provided onProgressChanged callback.

class Demo extends StatefulWidget {
  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  final _controller = FlutterWebviewPlugin();
  StreamSubscription<double> _onProgressChanged;
  double _loadProgress = -1;
  bool get finished => _loadProgress == 1.0;

  @override
  void initState() {
    super.initState();
    _controller.close();
    _onProgressChanged = _controller.onProgressChanged.listen((progress) async {
      setState(() {
        _loadProgress = progress;
      });
    });
  }

  @override
  void dispose() {
    _onProgressChanged.cancel();
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => null;
}

Upvotes: 1

Ravinder Kumar
Ravinder Kumar

Reputation: 7990

to check if page is finished use onPageFinished,

 onPageFinished: (String url) {
                  print('Page finished loading: $url');
                  //hide you progressbar here
                setState(() {
                isLoading = false;
              });
                },

I have created a working source code here

Upvotes: 3

Related Questions