Issue
I have a button component that I want to show a loading spinner when it is told the component is loading. I animate between the loading and non loading states using AnimatedCrossFade
.
My problem is: I get an overflow error when returning back to the original "non-loading" state. I know this is to do with the Row
and having different sized widgets, but I have tried many combinations of flex widgets etc. and none work. I have also tried using Offstage
on the change of this.isLoading
. However that didn’t work either (and basically defeated the point of the animator).
Solutions that do solve the overflow issue, cause the button to become its maximum possible width which I don’t want all the time. The button needs to be able to take up the smallest amount of space it requires.
@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,
),
),
)
],
),
));
}
Solution
The Flutter team has addressed this here: https://youtu.be/PGK2UUAyE54?t=85.
I was facing this same issue and this worked for me:
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,
),
],
),
}
),
Answered By – cervonwong
Answer Checked By – Senaida (FlutterFixes Volunteer)