flutter - 使用循环进度指示器时底部溢出

Question

使用循环进度指示器时，我一直在底部溢出。我试图遵循这一点，但它似乎不起作用。

正在发生的事情的图片：

所以当按钮被按下时会发生什么，它会显示加载符号并缩小（动画）到上面的大小。现在，当我使用具有大屏幕的模拟器（例如像素 2xl）但使用较小屏幕的模拟器时，它可以完美运行，我看到底部溢出。

这是我的代码：

// 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
  }

更新：我试过只是返回中心

else if (_submitState == 1) {
      return Center(
        child:CircularProgressIndicator(
          valueColor: AlwaysStoppedAnimation<Color>(white),
        ),
      );
    }

没有溢出，但进度指示器仍然超出了按钮空间：

更新：终于奏效了

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),
          )
        )
      );
    }

标签： flutterdartflutter-layout