How to show a spinner in flutter WebView while the content is been loaded

Question

I am trying to use a Flutter web view in my app. It is working, however, the page that I am trying to launch takes some time to load. So, the users see a blank page before the content is shown

I would like to keep showing spinner until the page content is shown

Here a code snippet that I have tried

 body: Stack(
        children: <Widget>[
          WebView(
            key: _key,
            initialUrl: widget.selectedUrl,
            javascriptMode: JavascriptMode.unrestricted,
            onPageFinished: (finish) {
              setState(() {
                isLoading = false;
              });
            },
          ),
          isLoading
              ? Center(
                  child: CircularProgressIndicator(),
                )
              : Stack(),
        ],
      ),

I see the spinner but it disapper before the content is shown. So, there is about 5-8 sec where the user sees an empty canvas and no spinner

How can I keep the spinner until all the content is shown on the screen?

Thanks

Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 1.22.0, on Mac OS X 10.15.6 19G2021, locale en-US)

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3) [✓] Xcode - develop for iOS and macOS (Xcode 12.0) [✓] Android Studio (version 3.6) [✓] VS Code (version 1.49.2) [✓] Connected device (1 available)

• No issues found!

• Update.

The URL that I calling does some additional validation before showing the page. I added a timer to my code.

not sure if this is the correct approach

 Future.delayed(const Duration(milliseconds: 9000), () {
                  setState(() {
                    isLoading = false;
                  });
                });

Answer 1

// before build method
bool isLoading = true;

// somewhere in stateful calss
 Stack(
            children: [
              WebView(
                navigationDelegate: (NavigationRequest request) {
                  if (request.url
                      .startsWith('https://books-by-weight.herokuapp.com')) {
                    Navigator.pop(context);
                    // print('blocking navigation to $request}');
                    return NavigationDecision.prevent;
                  }
                  // print('allowing navigation to $request');
                  return NavigationDecision.navigate;
                },
                initialUrl: url
                javascriptMode: JavascriptMode.unrestricted,
                onWebViewCreated: (WebViewController webViewController) {
                  _controller.complete(webViewController);
                },
                onPageFinished: (finish) {
                  setState(() {
                    isLoading = false;
                  });
                },
              ),
              isLoading
                  ? Center(
                      child: Container(
                        height: 30,
                        width: 30,
                        child: CircularProgressIndicator(
                          backgroundColor: Colors.primaries[0],
                          strokeWidth: 3,
                        ),
                      ),
                    )
                  : Stack(),
            ],
          ),