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 Widget s 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);
    }