如何将AnimatedContainer设置为全宽？

Posted 2021-05-04

我正在尝试学习制作动画。当按下按钮时，我有一个在Button和CircularProgress之间交替的代码：

       AnimatedContainer(
          duration: Duration(milliseconds: 300),
          curve: Curves.linear,
          width: _isLoading ? 60 : 350,
          height: 40.0,
          child: Stack(
            children: <Widget>[
              Align(
                alignment: Alignment.center,
                child: AnimatedOpacity(
                    duration: Duration(milliseconds: 290),
                    curve: Curves.easeIn,
                    opacity: _isLoading ? 0.0 : 1.0,
                    child: SizedBox(
                      width: double.infinity,
                      child: MyOutlineButton(
                        label: constant.signIn,
                        onPressed: (){
                          _isLoading = true;
                          setState(() {});
                          Future.delayed(const Duration(milliseconds: 1000), () {
                            _isLoading = false;

                            setState(() {});
                          });
                        },
                      ),
                    )),
              ),
              Align(
                alignment: Alignment.center,
                child: AnimatedOpacity(
                  duration: Duration(milliseconds: 290),
                  curve: Curves.easeOut,
                  opacity: _isLoading ? 1.0 : 0.0,
                  child: Center(
                    child: CircularProgressIndicator(
                      backgroundColor: constant.colorWhite,
                    ),
                  ),
                ),
              ),
            ],
          ),
        )

我想找到一个更好的解决方案，在显示Button时设置AnimatedContainer的宽度。我想将其设置为全宽，而不用通过随机数来猜测或最大化数字（在代码中，我将其设置为350）。有一个更好的方法吗？谢谢。

答案

您可以使用MediaQuery.of（context）.size.width获取设备的宽度。