0

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:

enter image description here

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:

enter image description here

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),
          )
        )
      );
    }
Rajdeep
  • 2,246
  • 6
  • 24
  • 51
  • Wrap your root widget in the class called `SingleChildScrollView ` or List view – HaSnen Tai Jun 21 '19 at 11:58
  • @HaSnenTai yes my root widget is already in ```SingleChildScrollView``` - post updated – Rajdeep Jun 21 '19 at 12:00
  • remove SizedBox and try again ! –  Jun 21 '19 at 12:04
  • @Hopes yep i tried that already, it is still the same :( – Rajdeep Jun 21 '19 at 12:10
  • 1
    return only, Center( child:CircularProgressIndicator( valueColor: AlwaysStoppedAnimation(white), ), –  Jun 21 '19 at 12:12
  • @Hopes alright, I'll try that soon and let you know how it goes :) – Rajdeep Jun 21 '19 at 12:27
  • 1
    @Rajdeep try giving your `SizedBox` a `width` and `height` properties ... at least smaller than that of the button height – mjhansen3 Jun 21 '19 at 12:57
  • @Hopes alright I tried only returning center (post updated), it still exceeded the button tho, but there was no overflow error. Is there a way to keep it within the button ? – Rajdeep Jun 21 '19 at 13:50
  • @mjhansen3 yes a a combination of your suggestion with Hopes suggestion worked - post updated ! Thanks alot guys. – Rajdeep Jun 21 '19 at 14:01

0 Answers0