How to show Loading Indicator in WebView Flutter?

Question

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.

Sanjayrajsinh · Accepted Answer · 2021-01-15T04:10:22.547

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.

The WebView is not scrollable if done with this way. The answer that returns Stack() instead of Container() works in my case. — Varsha Prabhakar, Aug 16 '20 at 20:01
Will calling setState not reinforce the web view to rebuild itself, causing performance issues? — Siddy Hacks, Oct 21 '22 at 17:27
This adds an indicator only when opening the app, not when navigating inside the app. What about transitions within the application? — Daniil, Jan 19 '23 at 05:53

Nikunj Kumbhani · Answer 2 · 2022-11-09T05:04:26.380

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

}

This worked for me, as the other answer by Sanjayrajsinh uses a Container, meaning you can't scroll the webpage in the WebView widget. This solution usesa Stack in the ternary else, and I can now scroll the webpage in the WebView. — Munes, Jul 25 '20 at 03:36

score 5 · Answer 3 · answered Jun 08 '20 at 16:07

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;
}

score 5 · Answer 4 · answered Jan 10 '22 at 19:32

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

score 5 · Answer 5 · answered Jan 28 '23 at 18:18

If anyone stumbles across this using webview_flutter version 4.0.2, we must use the WebViewController's setNavigationDelegate and set the onPageFinished callback.

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

class PrivacyPolicyPage extends StatefulWidget {
  static const routeName = "/privacy_policy";

  const PrivacyPolicyPage({super.key});

  @override
  State<PrivacyPolicyPage> createState() => _PrivacyPolicyPageState();
}

class _PrivacyPolicyPageState extends State<PrivacyPolicyPage> {
  late final WebViewController _controller;
  bool _loading = true;

  @override
  void initState() {
    _controller = WebViewController.fromPlatformCreationParams(
        const PlatformWebViewControllerCreationParams())
      ..setNavigationDelegate(NavigationDelegate(
          onPageFinished: (_) => setState(() {
                _loading = false;
              })))
      ..setJavaScriptMode(JavaScriptMode.disabled)
      ..loadFlutterAsset("assets/privacy_policy.html");
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Privacy Policy')),
      body: Stack(children: [
        WebViewWidget(controller: _controller),
        if (_loading) const Center(child: CircularProgressIndicator())
      ]),
    );
  }
}

score 4 · Answer 6 · answered Sep 19 '22 at 14:58

Google Codelabs Example

In my opinion, this solution is the most simple and has a great UX.

For more information, check out the official example of Listening for page load events.

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

class WebViewStack extends StatefulWidget {
  const WebViewStack({super.key});

  @override
  State<WebViewStack> createState() => _WebViewStackState();
}

class _WebViewStackState extends State<WebViewStack> {
  var loadingPercentage = 0;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        WebView(
          initialUrl: 'https://flutter.dev',
          onPageStarted: (url) {
            setState(() {
              loadingPercentage = 0;
            });
          },
          onProgress: (progress) {
            setState(() {
              loadingPercentage = progress;
            });
          },
          onPageFinished: (url) {
            setState(() {
              loadingPercentage = 100;
            });
          },
        ),
        if (loadingPercentage < 100)
          LinearProgressIndicator(
            value: loadingPercentage / 100.0,
          ),
      ],
    );
  }
}

Thanks so much @genericUser. This way of adding the loader improves the user experience of your application. — ali sampson, Nov 25 '22 at 19:41

score 2 · Answer 7 · answered May 08 '21 at 16:15

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

Not sure why, but this solution seems to cause very big performance issues for me. Something to be aware of. — Tom O, Oct 28 '21 at 13:46

sally · Answer 8 · 2022-08-29T07:18:41.127

Full Example

using Stack and Visibility Widget

  bool showLoader = true;
    Stack(
       children: [
         Container(
           height: _updatedHeight,
           child: GestureDetector(
             onHorizontalDragUpdate: (updateDetails) {},
             child: Container(
               margin: EdgeInsets.only(right: 16,left: 16),
               width: MediaQuery.of(context).size.width,
               child: WebView(
                 initialUrl: "url",
                javascriptMode: JavascriptMode.unrestricted,
                 onWebViewCreated: (WebViewController webViewController) {
                   _completerController.complete(webViewController);
                   mainWebController = webViewController;
                 },
                 onProgress: (int progress) {
                   if(progress == 100){
                     setState(() {
                       showLoader = false;
                     });
                   }
                 },
                 onPageStarted: (String url) {
                //   print("WebView :: onPageStarted :: $url");
                 },
                 onPageFinished: (url) async {
                   double documentElementHeight = double.parse(
                       await mainWebController.runJavascriptReturningResult("document.documentElement.scrollHeight;"));
                      // print("WebView :: onPageFinished :: documentElementHeight = $documentElementHeight");
                       setState(() {
                         _updatedHeight = documentElementHeight; 
                       });
                      });
                    },
                 navigationDelegate: getNavigationDelegate,
               ),
             ),
           ),
         ),
        Visibility(
         visible: showLoader,
          child:Padding(
            padding: const EdgeInsets.only(top: 50),
            child: Container(
             width: MediaQuery.of(context).size.width,
             child: Center(
               child: AWProgressIndicatorWidget(),
             ),
         ),
          )
        )
       ],
     )

Ahmed Saied · Answer 9 · 2021-06-30T20:52:17.520

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

It's easier to use `context.listen` then StreamBuilder – genericUser Sep 19 '22 at 15:38 — genericUser, Sep 19 '22 at 15:38

Abhilash Knox George · Answer 10 · 2022-09-28T06:37:49.117

For developers who wish to have clean code, Try this :

on main.dart

import 'package:flutter/material.dart';
import 'package:ProjectName/src/app.dart'; //replace with your project name
 
void main() => runApp(MyApp());

on app.dart

import 'package:flutter/material.dart';
import 'package:ProjectName/src/webview_container.dart'; //replace with your project name

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
    home: Scaffold(
        body: WebViewClass('https://www.testurl.com', 'test') //replace with your url
       )
      );
  }
}

on webview_container.dart

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

class WebViewClass extends StatefulWidget {
  final url;
  final title;
  WebViewClass(this.url, this.title);


  @override
  createState() => WebViewState(this.url, this.title);
}
class WebViewState extends State<WebViewClass>{

  var _url;
  var _title;

  int position = 1 ;

  final key = UniqueKey();
  WebViewState(this._url, this._title);

  doneLoading(String A) {
    setState(() {
      position = 0;
    });
  }

  startLoading(String A){
    setState(() {
      position = 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
    child: Scaffold(
      body: IndexedStack(
      index: position,
      children: <Widget>[

      WebView(
        zoomEnabled: false, //I have disabled zoom functionality on the app
        initialUrl: _url,
        javascriptMode: JavascriptMode.unrestricted,
        key: key ,
        onPageFinished: doneLoading,
        onPageStarted: startLoading,
        ),

       Container(
        color: Colors.white,
        child: Center(
          child: CircularProgressIndicator()),
        ),
        
      ])
  ),
    );
  }
}

score 0 · Answer 11 · answered Oct 06 '22 at 13:15

onPageStarted is better! Because the loading indicator stopped after the URL start to load.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBarCommon(
        title: Text(
          widget.title,
        ),
      ),
      body: Stack(
        children: <Widget>[
          WebView(
            initialUrl: widget.url,
            javascriptMode: JavascriptMode.unrestricted,
            onPageStarted: (started){
              setState(() {
                isLoading = false;
              });
            },
          ),
          isLoading
              ? const Center(
                  child: LoadingIndicator(),
                )
              : Stack(),
        ],
      ),
    );
  }

score 0 · Answer 12 · answered Aug 29 '23 at 05:48

An example of a reusable widget using v4 and the new WebViewController and WebViewWidget.

This example also has some basic error handling and uses a LinearProgressIndicator to show the loading progress:

Reusable WebView Widget

class MyWebViewWrapper extends StatefulWidget {
  const MyWebViewWrapper({super.key, required this.url});
  final String url;

  @override
  State<MyWebViewWrapper> createState() => _MyWebViewWrapperState();
}

class _MyWebViewWrapperState extends State<MyWebViewWrapper> {
  late WebViewController _controller;
  var loadingPercentage = 0;
  var error = false;

  @override
  void initState() {
    super.initState();
    _controller = WebViewController();
    _controller.setJavaScriptMode(JavaScriptMode.unrestricted);
    _controller.setBackgroundColor(const Color(0x00000000));
    _controller.setNavigationDelegate(
      NavigationDelegate(
        onPageStarted: (String url) => setState(() => loadingPercentage = 0),
        onProgress: (int progress) => setState(() => loadingPercentage = progress),
        onPageFinished: (String url) => setState(() => loadingPercentage = 100),
        onWebResourceError: (WebResourceError error) => setState(() => this.error = true),
        onNavigationRequest: (NavigationRequest request) => NavigationDecision.navigate,
      ),
    );
    if (widget.url.isNotEmpty) _controller.loadRequest(Uri.parse(widget.url));
  }

  @override
  Widget build(BuildContext context) {
    if (widget.url.isEmpty || error == true) {
      return Center(child: Text("Error."));
    }

    return Stack(
      children: [
        WebViewWidget(controller: _controller),
        if (loadingPercentage < 100)
          LinearProgressIndicator(
            value: loadingPercentage / 100,
            backgroundColor: Colors.transparent,
            valueColor: const AlwaysStoppedAnimation<Color>(Colors.blue),
          ),
      ],
    );
  }
}

Example Usage

class WebViewExample extends StatelessWidget {
  const WebViewExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("WebView Example")),
      body: const SafeArea(
        child: MyWebViewWrapper(url: "https://flutter.dev"),
      ),
    );
  }
}

See v3 -> v4 migration instructions here: https://pub.dev/packages/webview_flutter#migrating-from-30-to-40

How to show Loading Indicator in WebView Flutter?

12 Answers12

Full Example

Complete Example

Google Codelabs Example

Linked

Related