I keep getting bottom overflow when using the circular progress indicator. I've tried to follow this but it does not seem to work.
Image of what is happening:
So what happens is when the button is pressed, it shows the loading sign and shrinks(animates) to the size above. Now it works perfectly when I use a simulator with a big screen say pixel 2xl but with a smaller screen simulator I see bottom overflowed.
Here is my code:
// Button
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: blue,
body:
SingleChildScrollView(
child: Center(
child:Stack(
children: <Widget>[
Align(
alignment: Alignment.center,
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
"assets/images/FlightBackground.jpg",
),
fit: BoxFit.fitHeight,
),
)
),
),
Align(
alignment: Alignment.center,
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration:BoxDecoration(color: blueTrans),),
),
Align(
alignment:Alignment.center,
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width/1.2,
child: Column(
children: <Widget>[
// omitted code ----- the button starts here
Expanded(
flex:2,
child: Container(
width: _submitWidth,
child: PhysicalModel (
color: _submitModelColor,
borderRadius: BorderRadius.circular(10.0),
child: RaisedButton(
color: _submitButtonColor,
key: _submitKey,
shape: OutlineInputBorder(borderSide:BorderSide(color: _submitOutlineColor),borderRadius: BorderRadius.circular(10.0)),
child: _submitButton(),
onPressed: (){
setState(() {
if(_submitState == 0 && (_validate())) {
_animateButton();
}
});
},
),
)
),
),
]
),
),
),
],
)
)
)
);
}
// What the button is with respect to _submitState
Widget _submitButton(){
if (_submitState == 0) {
return AutoSizeText(FLIGHT_PAGE_SUBMIT,style: TextStyle(color: _submitTextColor,));
} else if (_submitState == 1) {
return Center(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
child: Center(
child:CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(white),
),
)
)
],
)
);
} // omitted code
}
Update: I tried just returning center
else if (_submitState == 1) {
return Center(
child:CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(white),
),
);
}
There was no overflow but the progress indicator still exceeded the button space:
Update: What finally worked
else if (_submitState == 1) {
return Center(
child:SizedBox(
width:MediaQuery.of(context).size.width/13,
height:MediaQuery.of(context).size.height/30,
child:CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(white),
)
)
);
}