如何在顫動中顯示進度指示器？

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