How to animate AnimatedContainer to fill all available space - animation

Question

Basically i want to animate an AnimatedContainer's height between 2 values. But here is the problem. When my state is 1 i know the height so i can animate but when my state is 0 i want animated container to expand to available space. I tried to wrap my animated container with Expanded widget but that didn't work.
class _PreviewScreenState extends State<PreviewScreen> {
var selectedTab = 1;
#override
Widget build(BuildContext context) {
double imageWidth = MediaQuery.of(context).size.width;
double imageHeight = selectedTab == 1 ? imageWidth : null;
return Scaffold(
body: DefaultTabController(
length: 3,
initialIndex: selectedTab,
child: Background(
child: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
title: Text('SHARE'),
),
Expanded(
child: AnimatedContainer(
height: imageHeight,
duration: Duration(milliseconds: 600),
color: Colors.red,
),
),
TabBar(
labelStyle: TextStyle(fontSize: 13),
indicator: BoxDecoration(
color: Colors.white24,
borderRadius: BorderRadius.circular(40),
),
onTap: (index) {
setState(() {
selectedTab = index;
});
},
tabs: <Widget>[
Tab(child: Text('INSTAGRAM')),
Tab(child: Text('SQUARE')),
Tab(child: Text('OTHER'))
],
),
Container(
height: 100,
child: Center(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0),
child: ShareButton(
onPressed: () {},
),
),
),
)
],
),
),
),
),
);
}
}

Answer 1

You can use a Flexible widget instead of an Expanded widget. It gives the child "the flexibility to expand to fill the available space in the main axis, but, unlike Expanded, Flexible does not require the child to fill the available space."
Also, you should switch from AnimatedContainer to AnimatedSize as AnimatedContainer throws an error interpolating between double.infinity and a constant height.
So this
Expanded(
child: AnimatedContainer(
height: imageHeight,
duration: Duration(milliseconds: 600),
color: Colors.red,
),
),
will be come
Flexible(
child: AnimatedSize(
vsync: this,
duration: Duration(milliseconds: 600),
child: Container(
height: imageHeight,
color: Colors.red,),
),
),
For this to work, your _PreviewScreenState has to use the SingleTickerProviderStateMixin mixin and your imageHeight logic will have to change from null to double.infinity for the filling the available space.
i.e you will have:
class _PreviewScreenState extends State<PreviewScreen> with SingleTickerProviderStateMixin{
//rest of your code
}
and
double imageHeight = selectedTab == 1 ? imageWidth : double.infinity;
Here is a DartPad demonstration: https://dartpad.dev/bf4f969f76ab3092d0b1960bfdbf7825