How to animate AnimatedContainer to fill all available space

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