Flutter - Animate change on height when hide one of Column children - flutter

Question

I have two children inside Column widget, the first one is simple Container and the second on is Expanded widget.
User can hide/show the first Container. In this case, I need to apply animation on both widgets, so the height of first container should be reduced automatically and the second widget should be increased gradually until fill the whole space.
I tested to use AnimatedContainer, but it needs to specify its height after and before, which is not known to me.
Any suggestion please?
class ViewerPage extends StatefulWidget {
#override
_ViewerPageState createState() => _ViewerPageState();
}
class _ViewerPageState extends State<ViewerPage> {
bool visible = true;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Example"),
),
bottomNavigationBar: BottomAppBar(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
IconButton(
icon: Icon(Icons.show_chart),
onPressed: () {
setState(() {
visible = !visible;
});
},
),
],
),
),
body: Container(
child: Column(
children: <Widget>[
Visibility(
visible: visible,
child: Container(
child: Text("This Container can be visible or hidden"),
color: Colors.red),
),
Expanded(
child: ListView.builder(
itemBuilder: (context, index) => Text("Item ..."),
itemCount: 20,
),
),
],
),
),
);
}
}

Answer 1

Simple, use AnimatedSize, and remove Visibility. AnimatedSize calculates height on its own. so u don't need to know size before and after.
Just pass null for dynamic height and 0 for non visibility. AnimatedSize will take care of the animation
height: visible? null : 0.0,
here, I changed your code a bit. It works fine now.
import 'package:flutter/material.dart';
class Test extends StatefulWidget {
#override
_TestState createState() => _TestState();
}
class _TestState extends State<Test> with SingleTickerProviderStateMixin{
bool visible = true;
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Example"),
),
bottomNavigationBar: BottomAppBar(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
IconButton(
icon: Icon(Icons.show_chart),
onPressed: () {
setState(() {
visible = !visible;
});
},
),
],
),
),
body: Container(
child: Column(
children: <Widget>[
AnimatedSize(
duration: Duration(seconds: 1),
child: Container(
height: visible? null : 0.0,
child: Text("This Container can be visible or hidden"),
color: Colors.red
),
vsync: this,
),
Expanded(
child: ListView.builder(
itemBuilder: (context, index) => Text("Item ..."),
itemCount: 20,
),
),
],
),
),
);
}
}

Answer 2

The accepted solution technically didn't hide the item, it was just collapsed to height of zero, I had a situation where a widget (Icon) appears when the ListView sibling is swiped down.
I recommend the following solution:
AnimatedSize(
duration: const Duration(milliseconds: 500),
child: visible ? Container( child: Text("This Container can be visible or hidden"), color: Colors.red) : const SizedBox(),),