Flutter动画交叉渐变过渡时溢出

Question

我有一个按钮组件，当它被告知组件正在加载时，我想显示一个加载微调器。我使用AnimatedCrossFade在加载状态和非加载状态之间设置动画。

我的问题是：我在返回到原始"时出现溢出错误；非加载"；状态我知道这与Row和不同大小的小部件有关，但我尝试过许多flex小部件等的组合，但都不起作用。我也尝试过在this.isLoading的变化上使用Offstage。然而，这也没有奏效(基本上击败了动画师的观点(。

解决溢出问题的解决方案，会使按钮达到最大可能宽度，这是我一直不想要的。按钮需要能够占用所需的最小空间。

@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: isLoading ? () => null : () => onPressed(),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(primaryColour)),
child: AnimatedCrossFade(
duration: Duration(milliseconds: 400),
crossFadeState:
isLoading ? CrossFadeState.showSecond : CrossFadeState.showFirst,
firstChild: Padding(
padding:
const EdgeInsets.symmetric(vertical: 8.0, horizontal: 10.0),
child: this.child,
),
secondChild: Row(
mainAxisSize: MainAxisSize.min,
children: [
this.childWhenLoading,
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: SizedBox(
height: 20,
width: 20,
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation(Colours.white),
backgroundColor: primaryColour,
strokeWidth: 3,
),
),
)
],
),
));
}

Answer 1

Flutter团队已经在这里解决了这个问题：https://youtu.be/PGK2UUAyE54?t=85.

我也面临着同样的问题，这对我来说很有效：

AnimatedCrossFade(
// ... Other arguments
layoutBuilder: (topChild, topKey, bottomChild, bottomKey) {
return Stack(
alignment: Alignment.center,
children: [
Positioned(
key: bottomChildKey,
top: 0,
child: bottomChild,
),
Positioned(
key: topChildKey,
child: topChild,
),
],
),
}
),