Circular Progress Indicator not being centered Flutter
3,764
Solution 1
It because the height of SingleChildScrollView depend on vertical: 120.0
instead of the value container( height: double.infinity )
which mean the height of container is as big as it's parent.
The part:MediaQuery.of(context).size.height
mean "as big as screen"
you can use MediaQuery.of(context).size.height/2
instead to resize container's height
try this:
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(),
],
),
),
)),
)
Solution 2
I solved this by wrapping it with SizedBox widget and divide the height of the screen which centered the circular indicator.
return SizedBox(
height: MediaQuery.of(context).size.height / 1.3,
child: Center(
child: CircularProgressIndicator(),
),
);
Author by
bensofter
Updated on December 16, 2022Comments
-
bensofter over 1 year
I am integrating
login
in my app in which a circular progress indicator should appear while a request is being made. I don't know why theprogressBar
keeps appearing at the top instead of the center. Please help.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(), ], ), ), )), )