I'm new to flutter and making my first webview app. Here I'm trying to add a spinner every time when a user tries to click the link or page load. I want to make spinner background opacity a bit low just like the given example(right picture) but opacity doesn't work at all.

Here is my approach:

// ignore_for_file: prefer_const_constructors
// ignore: use_key_in_widget_constructors
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
    debugShowCheckedModeBanner: false,
    home: Scaffold(
        body: WebViewClass()
       )
      );
  }
}
 
class WebViewClass extends StatefulWidget {
 
  WebViewState createState() => WebViewState();
 
}
 
class WebViewState extends State<WebViewClass>{
 
  int position = 1 ;
 
  final key = UniqueKey();
 
  doneLoading(String A) {
    setState(() {
      position = 0;
    });
  }
 
  startLoading(String A){
    setState(() {
      position = 1;
    });
  }
 
  @override
  Widget build(BuildContext context) {
  return Scaffold(
     appBar: null,
      body: SafeArea(child: IndexedStack(
                            index: position,
                            children: <Widget>[ 
                                              WebView(
                                                initialUrl: 'https://google.com',
                                                javascriptMode: JavascriptMode.unrestricted,
                                                key: key ,
                                                onPageFinished: doneLoading,
                                                onPageStarted: startLoading,
                                                ),
 
                                                Container(
                                                  color: Colors.white70,
                                                  child: Center(
                                                    child: CircularProgressIndicator()),
                                                  ),
        
                                              ])) 
       
                  );
    }
}

Any help or guidance will highly appreciated.

CodePudding user response：

You can try like this. every time when you come in the web view screen. the loader will show.

class WebViewClass extends StatefulWidget {
  WebViewState createState() => WebViewState();
}

class WebViewState extends State<WebViewClass> {

  bool isLoading = false;

  final key = UniqueKey();
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: null,
        body: SafeArea(
            child: IgnorePointer(
              ignoring: isLoading,
              child: Stack(
                children: [
                  WebView(
                    initialUrl: 'https://google.com',
                    javascriptMode: JavascriptMode.unrestricted,
                    key: key,
                    onPageFinished: (value) {
                      setState(() {
                        isLoading = false;
                      });
                    },
                    onPageStarted: (value) {
                      setState(() {
                        isLoading = true;
                      });
                    },
                  ),
                  isLoading ? Container(
                    width: MediaQuery.of(context).size.width,
                    height: MediaQuery.of(context).size.height,
                    color: Colors.grey.withOpacity(0.5),
                    child: const Center(child: CircularProgressIndicator())  ,
                  ) : Container(),
                ],
              ),
            )),);
  }
}