如何在颤动中显示进度指示器？

Question

我正在尝试在登录时显示进度指示器。我创建了一个布尔值以在我想显示和隐藏指示器时进行切换，但是我无法弄清楚应该在哪里显示指示器。

我可以将其添加为我的容器中显示所有其他屏幕小部件的小部件之一，但是我不希望它干扰其他小部件，而是显示在所有小部件之上。 我该如何实现？ 我该如何实现？

提前致谢。

我的密码

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

正如CopsOnRoad所提到的，如果要放置多个不会相互干扰的Widget ，则必须使用Stack 。

此外，Dart 2.3引入了if的集合 。 使用它，只有在条件为true时，您才能将项目添加到您的Collection true 。

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

Answer 2

您可以使用xs_progress_hud: ^1.0.2此库并从此处导入

显示对话框

 XsProgressHud.show(context);

隐藏对话

 XsProgressHud.hide();

在这里，您可以在代码中执行类似的操作。

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