Ufdjrw

I'm not sure if how to do this.

I have a Column of AnimatedContainers. Initially all of them are 200 height. I want to implement some kind of callback, so when user tap on one item, this one becomes smaller(say 100 height) and the rest of the item in the list disappear. My AnimatedContainers are Stateful widgets

I guess I would have to use to callbacks, one for the columnn (parent) and the other to notify the children, but I don't know how to do this.

Summarised, what I have right now is

Stateless(Column(Stateful(List<AnimatedContainer>)))

If something is not clear please comment

Thanks

EDIT to add some code and more info

class SectionButton extends StatefulWidget 
 double screenHeight;
 Stream stream;
 int index;

 SectionButton(this.screenHeight, this.stream, this.index);

 @override
 _SectionButtonState createState() => _SectionButtonState();


class _SectionButtonState extends State<SectionButton> 
 double height;
 StreamSubscription streamSubscription;

 initState() 
 super.initState();

 this.height = this.widget.screenHeight / n_buttons;

 streamSubscription =
 widget.stream.listen((_) => collapse(this.widget.index));
 

 void collapse(int i) 
 if (this.widget.index != i) 
 setState(() 
 this.height = 0;
 );
 else 
 setState(() 
 this.height = this.widget.screenHeight / appBarFraction;
 );
 
 

 @override
 dispose() 
 super.dispose();
 streamSubscription.cancel();
 

 @override
 Widget build(BuildContext context) 
 return AnimatedContainer(
 height: this.height,
 duration: Duration(milliseconds: 300),
 );
 


class HomeScreen extends StatelessWidget 
 List<Widget> sections = [];
 bool areCollapsed = false;
 final changeNotifier = new StreamController.broadcast();

 void createSections(screenHeight) 
 for (var i = 0; i < buttonNames.length; i++) 
 this.sections.add(GestureDetector(onTap:()
 print("Section i was tapped");
 changeNotifier.sink.add(i);, //THIS IS NOT WORKING
 child: SectionButton(screenHeight, changeNotifier.stream, i),),);
 
 

 @override
 Widget build(BuildContext context) 
 final MediaQueryData mediaQueryData = MediaQuery.of(context);
 double screenHeight =
 mediaQueryData.size.height - mediaQueryData.padding.vertical;

 createSections(screenHeight);

 return SafeArea(
 child: SizedBox.expand(
 child: Column(children: this.sections)
 ),
 );
 

BTW what I'm trying to implement is something like this:

You have to store your height in a variable and wrap your widget with GestureDetector

GestureDetector(
 onTap: () 
 setState(() _height = 100.0; );
 ,
 child: Container(
 child: Text('Click Me'),
 ),
)

Alternatively, you can also use AnimatedSize Widget.

Animated widget that automatically transitions its size over a given
duration whenever the given child's size changes.