How do I show loading indicator in WebView Flutter?-CodePudding

I want to show the loading indicator while the webpage for my WebView is loading. Here is my code:

class Dates extends StatelessWidget {
  const Dates({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

final Set<Factory<OneSequenceGestureRecognizer>> gestureRecognizers = {
  Factory(() => EagerGestureRecognizer())
};

UniqueKey _key = UniqueKey();

    return MaterialApp(
      debugShowCheckedModeBanner: false,
    
      home: WebView(
        initialUrl: "https://www.allendalecolumbia.org/calendar",
        gestureRecognizers: gestureRecognizers,
        
      )
    );
  }
}

CodePudding user response：

You can wrap it in future builder and return loading widget until the page received http 200 or is fully loaded.

More information about using future builder and returning different widgets until action has been completed can be found here.

CodePudding user response：

To make a Loading indicator on Webview, you can use a boolean function and webView widgets onPageFinished function to do the loading...

Use a Stateful widget.

Here is the complete code:

 class Dates extends State< Dates >{

  
  bool isLoading=true;
  final _key = UniqueKey();
  
  const Dates({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

  final Set<Factory<OneSequenceGestureRecognizer>> gestureRecognizers = 
       { Factory(() => EagerGestureRecognizer())};

    return Scaffold(
      body: Stack(
        children: <Widget>[
          WebView(
            key: _key,
            initialUrl: "https://www.allendalecolumbia.org/calendar",
            javascriptMode: JavascriptMode.unrestricted,
            gestureRecognizers: gestureRecognizers,
            onPageFinished: (finish) {
              setState(() {
                isLoading = false;
              });
            },
          ),
          isLoading ? Center( child: CircularProgressIndicator(),)
                    : Stack(),
        ],
      ),
    );
  }

}

Hope this will work for you.

CodePudding user response：

First define variable like this:

bool isLoading = true;

then do this:

Stack(
          children: <Widget>[
            WebView(
              onPageFinished: (finish) {
                setState(() {
                  isLoading = false;
                });
              },
            ),
            isLoading
                ? Center(
                    child: CircularProgressIndicator(),
                  )
                : SizedBox(),
          ],
        )