Flutter Loading Indicator While Loading WebView

Loading Indicator is a visual reminder to app user that your data is loading in the background and when it finish loading we will display it on the screen. Same we will done in WebViewWidget in flutter. We will display a CircularProgressIndicator() widget at the middle of screen while loading web page in WebViewWidget. When complete web page has been loaded we will hide the CircularProgressIndicator() and display loaded web page.

Flutter Loading Indicator on Web Page Load in WebView

1. First of all we have to install WebViewWidget in our flutter project. To install WebViewWidget VISIT my WebView Installation tutorial.

2. Open project's main.dart file and import material.dart and webview_flutter.dart package.

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

3. Creating a Boolean variable with default True value defined. We will use this variable to control visibility of CircularProgressIndicator().

  bool isVisible = true;

4. Creating a WebViewWidget controller.

 dynamic controller;

5. Creating 2 functions loadStart() and loadEnd(). We will fire these functions on onPageStarted() and onPageFinished() event of WebViewWidget.

loadStart() {
    setState(() {
      isVisible = false;
    });
  }

  loadEnd() {
    setState(() {
      isVisible = true;
    });
  }

6. Override the initState() inbuilt function of Class. In the function we will declare WebViewController() with all default values.

  @override
  void initState() {
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(Colors.white)
      ..setNavigationDelegate(
        NavigationDelegate(
          onPageStarted: (String url) {
            loadStart();
          },
          onPageFinished: (String url) {
            loadEnd();
          },
          onWebResourceError: (WebResourceError error) {},
        ),
      )
      ..loadRequest(Uri.parse('https://flutter.dev'));
    super.initState();
  }

7. Creating a Custom widget loadingIndicator(). In this widget we will render the CircularProgressIndicator().

  Widget loadingIndicator() {
    return Container(
      color: Colors.white,
      child: const Center(child: CircularProgressIndicator()),
    );
  }

8. Calling WebViewWidget and Custom loadingIndicator() with ternary operator.

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: isVisible
            ? WebViewWidget(controller: controller)
            : loadingIndicator());
  }

Live Screenshot:

Source code for main.dart file:

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

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Scaffold(body: MyApp()));
  }
}

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State {
  bool isVisible = true;
  dynamic controller;

  loadStart() {
    setState(() {
      isVisible = false;
    });
  }

  loadEnd() {
    setState(() {
      isVisible = true;
    });
  }

  @override
  void initState() {
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(Colors.white)
      ..setNavigationDelegate(
        NavigationDelegate(
          onPageStarted: (String url) {
            loadStart();
          },
          onPageFinished: (String url) {
            loadEnd();
          },
          onWebResourceError: (WebResourceError error) {},
        ),
      )
      ..loadRequest(Uri.parse('https://flutter.dev'));
    super.initState();
  }

  Widget loadingIndicator() {
    return Container(
      color: Colors.white,
      child: const Center(child: CircularProgressIndicator()),
    );
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: isVisible
            ? WebViewWidget(controller: controller)
            : loadingIndicator());
  }
}