Показывать CircularProgressIndicator перед Flutter

Question

Я хочу отображать круглую полосу, как при загрузке, перед другими виджетами. Ниже приведен код, который я сейчас использую. Он показывает круговую загрузку, но между другими виджетами.

Он должен быть сверху. Основываясь на предложении, я попытался использовать Stack, но он все еще отображается между виджетом. Что я здесь не так делаю?

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();

}

class _LoginPageState extends State<LoginPage> {

 bool visible = true ; //Testing purpose it is true. Actually it is false.    
@override

Widget build(BuildContext context) {

return Scaffold(
  key: _scaffoldKey,
  body: Stack(
        children: <Widget>[
          new Container(
            decoration: BoxDecoration(
          gradient: LinearGradient(
              begin: Alignment.topRight,
              end: FractionalOffset.bottomCenter,//Alignment.bottomLeft,

              colors: [Colors.green[900], Colors.lightBlueAccent]),
        ),

          ),SingleChildScrollView(
            child: new Form(
              key: _formKey,
              autovalidate: _autoValidate,
    child: Center(
    child: Column(
      children: <Widget>[
        Row(
                  children: <Widget>[
                    VerticalText(),
                    TextLogin(),                    
                  ],
                ),


        Divider(),          

        Container(
        width: 280,

        ),
        Container(
        width: 280,
        child: TextFormField(
          style: TextStyle(
            color: Colors.white,
          ),
            decoration: InputDecoration(
            border: InputBorder.none,
            hintText: 'Enter Email',
            fillColor: Colors.lightBlueAccent,
            labelText: 'Email',
            labelStyle: TextStyle(
              color: Colors.white70,
              fontSize: 20,
            ),
            ),
            controller: emailController,
            autocorrect: true,
            validator: validateEmail,
            onSaved: (String val) {
              _email = val;
          },
          )
        ),

        Container(
        width: 280,
        child: TextFormField(
             style: TextStyle(
            color: Colors.white,
          ),
            decoration: InputDecoration(
            border: InputBorder.none,
            hintText: 'Enter Password',
            fillColor: Colors.lightBlueAccent,
            labelText: 'Password',
            labelStyle: TextStyle(
              color: Colors.white70,
              fontSize: 20,
            ),
            ),
            controller: passwordController,
            autocorrect: true,
            obscureText: true,
            validator: validatePassword,
              onSaved: (String val) {
                _password = val;
          },
          )
        ),

        RaisedButton(
          onPressed: _validateInputs,
          color: Colors.green,
          textColor: Colors.white,
          padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
          child: Text('Login'),
        ),


        Visibility(
          child: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              SizedBox(
                child: CircularProgressIndicator(
                  strokeWidth: 4.0,
                  valueColor : AlwaysStoppedAnimation(Colors.white),
                ),
                height: 200.0,
                width: 200.0,
              ),

            ],
          ),
        ),
          visible: visible, 
      ),
      ],
    ),
  )
            )
  )
        ],
),
);
}

Я видел подобные вопросы в SO, но все еще не могу решить их.

Как работать с индикатором прогресса во флаттере?

флаттер, как заставить работать индикатор круглого хода

Флаттер: создать оверлейный индикатор прогресса

Как отобразить CircularProgressIndicator поверх всех виджетов в центре экрана

Answer 1

Реальное значение roundProgressIndicator заключается в том, что он запускается во время загрузки, не допуская прерывания пользователя.
Чтобы удалить прерывание между пользователями, необходимо поместить циркулярный прогресс ProndIndicator в диалог со свойством barrierDismissible: false.
Необходимо создать этот индикатор загрузки как виджет многократного использования.
Вы можете создать метод, подобный приведенному ниже, и использовать его в любом месте экрана без определения на экране. (это также не требует стека.). Диалог появится в центре экрана.

buildShowDialog(BuildContext context) {
    return showDialog(
              context: context,
              barrierDismissible: false,
              builder: (BuildContext context) {
                return Center(
                  child: CircularProgressIndicator(),
                );
              });
  }

Для справки : код проверки ниже:

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Demo(),
    );
  }
}

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Circle Progress Indicator Demo"),
      ),
      body: Center(
        child: MaterialButton(
          child: Text("Press Me!"),
          onPressed: () => buildShowDialog(context),
        ),
      ),
    );
  }

  buildShowDialog(BuildContext context) {
    return showDialog(
        context: context,
        barrierDismissible: false,
        builder: (BuildContext context) {
          return Center(
            child: CircularProgressIndicator(),
          );
        });
  }
}

Выход:

Answer 2

Вы можете использовать Positioned Виджет в Stack Виджет для отображения CircularProgressIndicator перед всеми виджетами, как показано ниже.
Пожалуйста, поместите значения по вашему усмотрению во все четыре значения: снизу, слева, справа, сверху ...

         Positioned(
                bottom: ,
                left: ,
                right: , 
                top : ,
                child: Container(
                        child : CircularProgressIndicator()
                      )
                    ...
                   )

Answer 3

Я удалил Visiblity код с этим. Старый код

 Visibility(

          child: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              SizedBox(
                child: CircularProgressIndicator(
                  strokeWidth: 4.0,
                  valueColor : AlwaysStoppedAnimation(Colors.white),
                ),
                height: 200.0,
                width: 200.0,
              ),


            ],
          ),
        ),
          visible: visible, 
      ), 

Новый код

 visible ? Container(
                        color: Colors.black.withOpacity(0.5),
                        child:  Center(
                        child:SizedBox(// Center(

                          child: CircularProgressIndicator(
                            strokeWidth: 4.0,
                      valueColor : AlwaysStoppedAnimation(Colors.white),
                          ),
                          height: 200.0,
                          width: 200.0,
                        ),
                       ), 
    )
                      : Container()

И самое главное, он должен вызываться в первом виджете.

    return Scaffold(
      key: _scaffoldKey,
      body: Stack(
            children: <Widget>[
/////Some containers,child Widget etc/////////
     visible ? Container(
                            color: Colors.black.withOpacity(0.5),
                            child:  Center(
                            child:SizedBox(// Center(

                              child: CircularProgressIndicator(
                                strokeWidth: 4.0,
                          valueColor : AlwaysStoppedAnimation(Colors.white),
                              ),
                              height: 200.0,
                              width: 200.0,
                            ),
                           ), 
        )
                          : Container()

] //Widget
  ), //Stack
); //Scaffold

Я не уверен, что объяснил это правильно или нет. Но в итоге это не должно быть внутри другого дочернего виджета. Он должен быть помещен внутри сначала children: <Widget>[, а не внутри вложенного.