flutterwebviewloading

How to show Loading Indicator in WebView Flutter?


I want to show Loading first before the web view data displayed on the screen. How can do that?

This is my code:

class WebDetailPage extends StatelessWidget {
  final String title;
  final String webUrl;

  final Completer<WebViewController> _controller =
      Completer<WebViewController>();

  WebDetailPage({
    @required this.title,
    @required this.webUrl,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colour.white,
        title: Text(title, style: TextStyle(color: Colour.midnightBlue)),
        leading: IconButton(
            icon: Icon(Icons.arrow_back, color: Colour.midnightBlue),
            onPressed: () => Navigator.of(context).pop()),
      ),
      body: Center(
        child: WebView(
          initialUrl: webUrl,
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _controller.complete(webViewController);
          },
        ),
      )
    );
  }
}

Can someone help me with this problem? Because I already search and research about it still can find the solution.


Solution

  • Full Example

    class WebViewState extends State<WebViewScreen>{
    
      String title,url;
      bool isLoading=true;
      final _key = UniqueKey();
      
      WebViewState(String title,String url){
        this.title=title;
        this.url=url;
      }
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: new AppBar(
              title: Text(this.title,style: TextStyle(fontWeight: FontWeight.w700)),centerTitle: true
          ),
          body: Stack(
            children: <Widget>[
              WebView(
                key: _key,
                initialUrl: this.url,
                javascriptMode: JavascriptMode.unrestricted,
                onPageFinished: (finish) {
                  setState(() {
                    isLoading = false;
                  });
                },
              ),
              isLoading ? Center( child: CircularProgressIndicator(),)
                        : Stack(),
            ],
          ),
        );
      }
    
    }
    

    I just use Stack widget so on top of webview set loading indicator. When callonPageFinished of webview I set isLoading=false variable value and set transparent container.