使用圆形进度指示器时底部溢出

时间:2019-06-21 11:54:24

标签: flutter dart flutter-layout

使用循环进度指示器时,我一直在底部溢出。我尝试遵循this,但似乎不起作用。

正在发生的事情的图像:

enter image description here

因此,发生的事情是当按下按钮时,它会显示加载符号并缩小(动画)到上面的大小。现在,当我使用大屏幕模拟器(像素为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),
        ),
      );
    }

没有溢出,但是进度指示器仍超出按钮空间:

enter image description here

更新:最终成功

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

0 个答案:

没有答案