如何将动画容器设置为全宽?

Question

我正在尝试学习制作动画。我有一个代码在按下按钮时在按钮和循环进度之间交替：

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,
),
),
),
),
],
),
)

我想找到一个更好的解决方案来设置显示按钮时的动画容器宽度。我想将其设置为全宽，而无需通过输入随机数来猜测或最大化数字(在代码中我将其设置为 350(。有没有更好的方法可以做到这一点？谢谢。

Answer 1

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

Answer 2

您可以使用扩展小部件或灵活，同时使用行或列或 ConsconstraintBox，使您能够约束小部件或布局构建器以及一堆其他小部件，您可以使用 fittedBox 控制适合。 此外，如果您想创建响应式UI，这里是一些有用的小部件的链接 响应式用户界面