0

Is there a way to animate multiple listView items together as one block to make Expanding/Collapsing animation. I tried AnimatedList, but it animates items one by one, not as one group or block. ExpansionTile and ExpansionPanel won't work for me because they create all children at start and in case there is for example 100 children inside one group - those 100 widgets will be created at once, which is really bad for performance, even on Release build.

Alex.Marynovskyi
  • 1,264
  • 3
  • 16
  • 22
  • What you're trying to achieve is not very easy actually. You'd have to create a StatefulWidget with an AnimationController producing values for a series of widgets. They'll likely be AnimationBuilder widgets but then you'll have to implement this by yourself. – Alberto Miola Dec 14 '20 at 17:01
  • Well, maybe there is some other way to achieve that? Basically, I need expandable/collapsable tiles which children will be creating on demand by scroll (like ListView.builder) and not all at once – Alex.Marynovskyi Dec 14 '20 at 17:04

1 Answers1

1

If I understand correctly, you have one or several headers, each can have multiple items, which can be collapsed with an animation.

So you please some bool toggle whether expanded or collapsed per header. The toggle then displays on 'expanded' a Container which wraps a ListView. And with the animation controller you control the height of the container.

w461
  • 2,168
  • 4
  • 14
  • 40
  • Do you mean to create header widget which will have container as a child and that container will have listView.builder as child for items inside header, right? And if container has fixed height it won't create all children widgets at once. But, I can't set its height to like 400 or 500. I need it to look as one list. Maybe you know how to set height to the container so it will look like one list? – Alex.Marynovskyi Dec 14 '20 at 17:46
  • If you create the ListView you will know the number of elements. Then you can take as height eg `min(noOfElements * heightofOneElement, 0.7 * screenHeight)`. – w461 Dec 14 '20 at 17:53
  • Seems like it works, thanks. But now nested list either now scrollable or scrolls separately from outer list (depends on which ScrollController to use) – Alex.Marynovskyi Dec 14 '20 at 18:00
  • yes, but when you reach the end of the item list, doesn't this scroll the outer list, then? – w461 Dec 14 '20 at 18:06
  • No, when I reach end of the inner list it's either stops scrolling if I set ClampingScrollPhysics or it scroll only outer list while inner shows only the items that fit in the specified height if I set NeverScrollablePhysics – Alex.Marynovskyi Dec 14 '20 at 18:10
  • have you looked at NestedScrollView? – w461 Dec 14 '20 at 18:17
  • Yeah, seems like I need to either wrap every child in the outer list inside NestedScrollView or manually hook up outer and inners scrollControllers – Alex.Marynovskyi Dec 14 '20 at 18:18
  • if this helped you, an upvote would be nice :-) – w461 Dec 14 '20 at 20:04