Circular Progress Indicator not being centered Flutter

Question

我正在将

login

集成到我的应用程序中，其中在发出请求时应该会出现一个循环进度指示器。我不知道为什么

progressBar

一直出现在顶部而不是中心。请帮助。

FadeAnimation(
        1.8,
        Center(
            child: Container(
          height: double.infinity,
          child: SingleChildScrollView(
            physics: AlwaysScrollableScrollPhysics(),
            padding: EdgeInsets.symmetric(
              horizontal: 40.0,
              vertical: 120.0,

            ),
            child: _isLoading
                ? Center(child: CircularProgressIndicator())
                : Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text(
                        'Sign In',
                        style: TextStyle(
                          color: Colors.white,
                          fontFamily: 'OpenSans',
                          fontSize: 30.0,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      SizedBox(height: 30.0),
                      _buildEmailTF(),
                      SizedBox(
                        height: 30.0,
                      ),
                      _buildPasswordTF(),
                      _buildForgotPasswordBtn(),
                      _buildRememberMeCheckbox(),
                      _buildLoginBtn(),
                      _buildSignInWithText(),
                      _buildSocialBtnRow(),
                      _buildSignupBtn(),
                    ],
                  ),
          ),
        )),
      )

Answer 1

我通过用 SizedBox 小部件包裹它并划分以圆形指示器为中心的屏幕高度来解决这个问题。

return SizedBox(
       height: MediaQuery.of(context).size.height / 1.3,
       child: Center(
           child: CircularProgressIndicator(),
            ),
        );

Answer 2

因为SingleChildScrollView的高度取决于

vertical: 120.0

而不是值

container( height: double.infinity )

，这意味着容器的高度与其父级一样大。

部分：

MediaQuery.of(context).size.height

意思是“和屏幕一样大” 您可以使用

MediaQuery.of(context).size.height/2

来调整容器的高度

试试这个：

FadeAnimation(
    1.8,
    Center(
        child: _isLoading
            ? Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              child: Center(child: CircularProgressIndicator()))
            :Container(
              height: double.infinity,
              child: SingleChildScrollView(
                physics: AlwaysScrollableScrollPhysics(),
                padding: EdgeInsets.symmetric(
                  horizontal: 40.0,
                  vertical: 120.0,

            ),
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'Sign In',
                    style: TextStyle(
                      color: Colors.white,
                      fontFamily: 'OpenSans',
                      fontSize: 30.0,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  SizedBox(height: 30.0),
                  _buildEmailTF(),
                  SizedBox(
                    height: 30.0,
                  ),
                  _buildPasswordTF(),
                  _buildForgotPasswordBtn(),
                  _buildRememberMeCheckbox(),
                  _buildLoginBtn(),
                  _buildSignInWithText(),
                  _buildSocialBtnRow(),
                  _buildSignupBtn(),
                ],
              ),
      ),
    )),
  )

Answer 3

中心（ 高度因子：12， 孩子：CircularProgressIndicator（）， ),

Answer 4

将您的

SingleChildScrollView

包裹在

Center

中