AnimatedContainers with Row child not animating - flutter

Question

I would like to use multiple animated containers, one for padding and another for height, but when I use a row, it stops animating. In my simplified code sample, you can see that the "Card View With Row..." card is not animating where the "Card View No Row..." is animating.
I imagine that it has something to do with the change in width and the row. Is there something I need to wrap my row in to make it compatible with the animated containers?
My desired outcome, I want
The padding around the column to animate
The height of the cards' headers to animate
The content to stay the same
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool cardView = true;
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: AnimatedCardList(
isCardView: cardView,
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
cardView = !cardView;
});
},
backgroundColor: Colors.black,
child: Icon(
cardView ? Icons.check_rounded : Icons.edit,
size: 40,
color: Colors.white,
),
),
),
);
}
}
class AnimatedCardList extends StatelessWidget {
final bool isCardView;
const AnimatedCardList({
super.key,
required this.isCardView,
});
#override
Widget build(BuildContext context) {
return AnimatedContainer(
duration: const Duration(seconds: 2),
padding: isCardView ? EdgeInsets.zero : const EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
BasicCard(
isCardView: isCardView,
header: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Text("Card View With Row Not Animating"),
Text("Edit >"),
],
),
),
const SizedBox(height: 50),
BasicCard(
isCardView: isCardView,
header: const Text("Card View No Row IS Animating"),
),
],
),
);
}
}
class BasicCard extends StatelessWidget {
final Widget header;
const BasicCard({
Key? key,
required this.isCardView,
required this.header,
}) : super(key: key);
final bool isCardView;
#override
Widget build(BuildContext context) {
return Container(
color: Colors.red,
child: Column(
children: [
AnimatedSize(
duration: const Duration(seconds: 2),
child: Container(
color: Colors.blue,
constraints: !isCardView
? const BoxConstraints(
maxHeight: double.infinity,
)
: const BoxConstraints(
maxHeight: 0.0,
),
child: header,
),
),
const Text("Card Content")
],
),
);
}
}

Answer 1

The problem:
Rows or Columns don't work well when their "cross axis" length is changed while wrapped in an animated widget. They already animate when their children are animating.
The solution:
Animate each of the children by wrapping them with the animation you want.
I created a AnimatedHeightCollapse widget that collapses based on a parameter. This should work for Column if you swich height with width respectively in the code.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool cardView = true;
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: AnimatedCardList(
isCardView: cardView,
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
cardView = !cardView;
});
},
backgroundColor: Colors.black,
child: Icon(
cardView ? Icons.check_rounded : Icons.edit,
size: 40,
color: Colors.white,
),
),
),
);
}
}
class AnimatedCardList extends StatelessWidget {
final bool isCardView;
const AnimatedCardList({
super.key,
required this.isCardView,
});
#override
Widget build(BuildContext context) {
return AnimatedContainer(
duration: const Duration(seconds: 2),
padding: isCardView ? EdgeInsets.zero : const EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
BasicCard(
header: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
AnimatedHeightCollapse(
visible: isCardView,
child: const Text("Card View With Row IS Animating"),
),
AnimatedHeightCollapse(
visible: isCardView,
child: const Text("Edit >"),
),
],
),
),
const SizedBox(height: 50),
BasicCard(
header: AnimatedHeightCollapse(
visible: isCardView,
child: const Text("Card View No Row IS Animating"),
),
),
],
),
);
}
}
class BasicCard extends StatelessWidget {
final Widget header;
const BasicCard({
Key? key,
required this.header,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
color: Colors.red,
child: Column(
children: [header, const Text("Card Content")],
),
);
}
}
class AnimatedHeightCollapse extends StatelessWidget {
final bool visible;
final Widget child;
const AnimatedHeightCollapse({
super.key,
required this.visible,
required this.child,
});
#override
Widget build(BuildContext context) {
return AnimatedSize(
duration: const Duration(seconds: 2),
child: Container(
color: Colors.blue,
constraints: !visible
? const BoxConstraints(
maxHeight: double.infinity,
)
: const BoxConstraints(
maxHeight: 0.0,
),
child: child,
),
);
}
}