How to show a progress indicator animation overlayed on current screen in flutter?

Question

How can I show an overlayed loading indicator above the current screen in flutter? Like when the user tries to log in and while making the http request I want a spinning indicator to show above the current screen content without dimming or anything so I don't wan't to use a Dialog.

Something like this from Pinterest app for example:

Answer 1

Please make a common loader widget

class LoaderTransparent extends StatelessWidget {
double height;
double width;
Color colorValue;
LoaderTransparent({this.colorValue});

@override
Widget build(BuildContext context) {
height = MediaQuery.of(context).size.height;
width = MediaQuery.of(context).size.width;
return Container(
    height: height,
    width: width,
    color: Colors.transparent,
    child: Center(
        child: SizedBox(
            height: 60.0,
            width: 60.0,
            child:
                //Image.asset('assets/images/loader.gif',fit: BoxFit.fill,) // use you custom loader or default loader
          CircularProgressIndicator(
          valueColor: AlwaysStoppedAnimation(
          Colors.blue),
          strokeWidth: 5.0))));
      }
  }

In your screen use like this

Scaffold(
    body:
    Stack(children: [
    Container(
      width: width,
      child: Column(
        children: <Widget>[ // user screen ui
        
          ],)
      ),
   true ? LoaderTransparent() : Container()    // true or false conditions  according loader show or hide
])
 );