flutter - 如何将 AnimatedContainer 设置为全宽？

Question

我正在努力学习制作动画。当按下按钮时，我有一个代码可以在 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）。有一个更好的方法吗？谢谢你。

标签： flutterdart

Answer 1

您可以使用 MediaQuery.of(context).size.width 来获取设备的宽度。