How to show Loading Indicator inside WebiView in Flutter (2023)

In-App flutter development Webview is also the most important widget. Webview we can use to open any weblink from inside our app as we can use for terms and conditions URL or showing for any report URL etc. So now I am going to share with you in this article How to show Loading Indicator inside WebiView.

How to use Webview - Plug in the Flutter App:

We are going to use webview plugin plugin for loading any website inside the app. First, we need to add webview plugin to our project's  pubspec.yaml. You can see pubspec.yaml file below.

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  intl: ^0.18.0
  webview_flutter: ^4.1.0 // Use this for webiview

 

After the added webview package we can use it in our project. Now we are going to use webview in our project. Before the use of webview we need to initialize WebViewController like the below.

  bool isLoading = true; 
 WebViewController _controller = WebViewController();
    _controller
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0x00000000))
      ..loadRequest(Uri.parse('https://errorgram.com'))
      ..setNavigationDelegate(NavigationDelegate(
        onPageStarted: (url) {
          setState(() {});
        },
        onPageFinished: (url) {
          setState(() {
            isLoading = false;
          });
        },
      ));

 

You can see above a piece of code we take an isLoading variable for show/hide loader and WebViewController initialization with loading Url and its method for detecting the state of a page. You can see the following full example.

Full Example:

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

class Errorgram extends StatefulWidget {
  const Errorgram({Key? key}) : super(key: key);

  @override
  State<Errorgram> createState() => _ErrorgramState();
}

class _ErrorgramState extends State<Errorgram> {
  WebViewController _controller = WebViewController();
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    _controller
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0x00000000))
      ..loadRequest(Uri.parse('https://errorgram.com'))
      ..setNavigationDelegate(NavigationDelegate(
        onPageStarted: (url) {
          setState(() {});
        },
        onPageFinished: (url) {
          setState(() {
            isLoading = false;
          });
        },
      ));
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        bottom: false,
        child: Scaffold(
            appBar: AppBar(
              automaticallyImplyLeading: false,
              centerTitle: true,
              title: Text(
                "Errorgram",
              ),
            ),
            body: Stack(children: <Widget>[
              WebViewWidget(controller: _controller),
              isLoading ? Center( child: CircularProgressIndicator(color: Colors.red,backgroundColor: Colors.white),)
                  : Container(),
            ])));
  }
}

 

You can see in the above code isLoading variable is by default true and when the page is loaded then it will false inside the onPageFinished method of the webview so we can easily show the loading indicator at the page loading time.

Output:

Conclusion:

In this article, we have learned  How to show Loading Indicator inside WebiView with a full example. I hope this article may help you.