How to add circular indicator to webview in flutter

Question

i am new here. Please forgive me if I make a mistake. I'm trying to make a payment screen. But I can't solve a small problem. I couldn't understand the cause of the problem. when i click to 'start payment' button it's show me that screen about 2 second.And it's look bad. Bad View

But good news it's skip automatically normal payment screen. How can I show something else(Circular progress indicator, Lineer progres indicator etc.) on the screen instead of that String? My codes are below;

if (data['Status'] != "failure") {
        Navigator.of(context).push(MaterialPageRoute(
            builder: ((context) => CoreWebView(
                  htmlCode: data['paymentUrl'],
                ))));
      }

It's my WebView

    WebViewPlus(
              initialUrl: "https://example.com",
              javascriptMode: JavascriptMode.unrestricted,
              onWebViewCreated: (controller) {
             //widget.html==data['paymentUrl'];
             
                var page = 'r"""${widget.htmlCode}"""';
                controller.loadString(page);
              },
         
           
              zoomEnabled: false,
             
            ),

Does this question help? https://stackoverflow.com/questions/58713912/how-to-show-loading-indicator-in-webview-flutter — mohammad esmaili, Oct 10 '22 at 16:04

score 0 · Answer 1 · answered Oct 10 '22 at 16:04

Make your widget a StatefulWidget.
Add a variable as bool isLoading = true;.

Change your code as:

Stack(
  children: [
   WebViewPlus(
     onPageFinished: (url) {
       setState(() {
         isLoading = false;
       });
     },
     initialUrl: "https://example.com",
     javascriptMode: JavascriptMode.unrestricted,
     onWebViewCreated: (controller) {
       //widget.html==data['paymentUrl'];
       var page = 'r"""${widget.htmlCode}"""';
       controller.loadString(page);
     },
     zoomEnabled: false,
   ),
   if(isLoading)
     Center(child: CircularProgressIndicator()
   )
 ],
),

Thanks for the answer but it's not working. Bad View still stays on screen for about 2 seconds. Do you have another suggestion? — Doğukan Çiftçi, Oct 12 '22 at 09:52

How to add circular indicator to webview in flutter

1 Answers1