How to display progress indicator in flutter?

Question

I am trying to show a progress indicator when i am logging in. I have created a boolean value to toggle when I want to show and hide the indicator, however i am not able to figure out where exactly i should show the indicator.

I can add it as one of my widgets in my Container where I am displaying all other screen widgets, however i dont want it to interfere with other widgets and rather show on top of all of them. How can I achieve this? How can I achieve this?

Thanks in advance.

My code

import ....

class Login extends StatefulWidget{
...
}

class _LoginState extends State<Login> {

bool _loading = false;

  @override
  Widget build(BuildContext context){

    Future<Map<String, dynamic>> getData() async {
      var client = http.Client();

      //to SHOW Indicator
      setState(() {
        _loading = true;
      });

      var response = await client
          .post(
          Uri.encodeFull(
              ' api url '),
          body:
        {"email":"$username","password":"$password"}

      ).whenComplete(
          client.close);

      var res = json.decode(response.body);

      //to HIDE indicator
      setState(() {
        _loading = false;
      });

      if(response.statusCode <200 || response.statusCode > 400){
        print("Error");
         throwError();
      }
      if(response.statusCode == 200 ){
        widget.onSignedIn();
      }

      if (!mounted)
        return {'success': false};

      return json.decode(response.body);
    }


    Container view = Container(
      ....
    );

    return Scaffold(
        resizeToAvoidBottomPadding: false,
      body: view

    );
  }
}

Answer 1

As CopsOnRoad mentioned, you must use Stack if you want to place multiple Widgets that do not interfere with each other.

Also, Dart 2.3 introduced collection if. With it, you can add an item to your Collection only if a condition is true.

Stack(
  alignment: Alignment.center,
  children: [
    Container(child: ...),
    if (_loading) CircularProgressIndicator(),
  ],
)

Answer 2

You can use xs_progress_hud: ^1.0.2 this library and Import from here

Show dialog

 XsProgressHud.show(context);

Hide dialog

 XsProgressHud.hide();

Here you can do something like this in your code.

 Future<Map<String, dynamic>> getData() async {
      var client = http.Client();
      XsProgressHud.show(context);
      //to SHOW Indicator
      setState(() {
        _loading = true;
      });

      var response = await client
          .post(
          Uri.encodeFull(
              ' api url '),
          body:
        {"email":"$username","password":"$password"}

      ).whenComplete(
          client.close);

      var res = json.decode(response.body);

      //to HIDE indicator
      setState(() {
        _loading = false;
      });

      if(response.statusCode <200 || response.statusCode > 400){
        XsProgressHud.hide();
        print("Error");
         throwError();
      }
      if(response.statusCode == 200 ){
        XsProgressHud.hide();
        widget.onSignedIn();
      }

      if (!mounted)
        return {'success': false};

      return json.decode(response.body);
    }