'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 1:^[1]

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.

Solution 2:^[2]

Complete Example

To Access WebView after complete Loading

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(),
        ],
      ),
    );
  }

}

Solution 3:^[3]

You could you Future Builder to solve this problem easily. Yes, you hear correct.

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

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatelessWidget {

  static Future<String> get _url async {
    await Future.delayed(Duration(seconds: 1));
    return 'https://flutter.dev/';
  }

  @override
  Widget build(BuildContext context) => Scaffold(
    body: Center(
      child:FutureBuilder(
        future: _url,
        builder: (BuildContext context, AsyncSnapshot snapshot) => snapshot.hasData
        ? WebViewWidget(url: snapshot.data,)
        : CircularProgressIndicator()),
  ),);
}

class WebViewWidget extends StatefulWidget {
  final String url;
  WebViewWidget({this.url});

  @override
  _WebViewWidget createState() => _WebViewWidget();
}

class _WebViewWidget extends State<WebViewWidget> {
  WebView _webView;
  @override
  void initState() {
    super.initState();
     _webView = WebView(
      initialUrl: widget.url,
      javascriptMode: JavascriptMode.unrestricted,
    );
  }

  @override
  void dispose() {
    super.dispose();
    _webView = null;
  }

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

Solution 4:^[4]

Just use Stack and Visibility Widget

import 'dart:io';

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

class MyWebView extends StatefulWidget {
final String url;
const MyWebView({Key? key, this.url = ''}) : super(key: key);

@override
State<MyWebView> createState() => _MyWebViewState();
}

class _MyWebViewState extends State<MyWebView> {
  bool isLoading = true;
  @override
  void initState() {
  super.initState();
  if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
  if (Platform.isIOS) WebView.platform = CupertinoWebView();
}

@override
Widget build(BuildContext context) {
return SafeArea(
  child: Scaffold(
    appBar: AppBar(
      backgroundColor: Colors.transparent,
      elevation: 0,
    ),
    body: Stack(
      children: [
        WebView(
          initialUrl: widget.url,
          onPageFinished: (finish) {
            setState(() {
              isLoading = false;
            });
          },
          javascriptMode: JavascriptMode.unrestricted,
        ),
        Visibility(
          visible: isLoading,
          child: const Center(
            child: CircularProgressIndicator(),
          ),
        )
      ],
    ),
    bottomNavigationBar: BottomAppBar(
      child: Row(),
      ),
    ),
  );
 }
}

Solution 5:^[5]

we can use The IndexedStack widget helps to switch widgets according to the index. We also make use of onPageStarted and onPageFinished attributes of webview. Using state management we change the value of the index when the page started to load and also when the page loading is finished.

num pos = 1;

In Build Method

return Scaffold(
        body: IndexedStack(index: pos, children: <Widget>[
      WebView(
        initialUrl: 'http://pub.dev/',
        javascriptMode: JavascriptMode.unrestricted,
        onPageStarted: (value) {
          setState(() {
            pos = 1;
          });
        },
        onPageFinished: (value) {
          setState(() {
            pos = 0;
          });
        },
      ),
      Container(
        child: Center(child: CircularProgressIndicator()),
      ),
    ]));

Solution 6:^[6]

You can use BLOC, Stream & stateless Widget

import 'dart:async';

import 'package:rxdart/subjects.dart';

class LoadingWebPageBloc  {
//Controllers
  final BehaviorSubject<bool> _loadingWebPageController = BehaviorSubject<bool>.seeded(true);

  //Sinks
  Function(bool) get changeLoadingWebPage => _loadingWebPageController.sink.add;

  //Streams
  Stream<bool> get loadingWebPageStream => _loadingWebPageController.stream.asBroadcastStream();

  @override
  void dispose() {
    _loadingWebPageController.close();
    super.dispose();
  }
}

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

class CustomWebPagePreview extends StatelessWidget {
  final String url;
  CustomWebPagePreview({@required this.url});

  final LoadingWebPageBloc loadingWebPageBloc = LoadingWebPageBloc();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: appBar,
        body: Container(
          child: Stack(
            children: <Widget>[
              WebView(
                initialUrl: url,
                javascriptMode: JavascriptMode.unrestricted,
                onPageStarted: (value) {
                  loadingWebPageBloc.changeloading(true);
                },
                onPageFinished: (value) {
                  loadingWebPageBloc.changeloading(false);
                },
              ),
              StreamBuilder<bool>(
                stream: loadingWebPageBloc.loading,
                initialData: true,
                builder: (context, snap) {
                  if (snap.hasData && snap.data == true) {
                    return Center(
                      child: CircularProgressIndicator(),
                    );
                  }
                  return SizedBox();
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2
Solution 3	Yash
Solution 4	Rachit Vohera
Solution 5	Shailandra Rajput
Solution 6

'How to show Loading Indicator in WebView Flutter?

Solution 1:[1]

Full Example

Solution 2:[2]

Complete Example

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]