Flutter: Using Hero Animation with ListView Builder

Question

I am building List ( ListView.builder ) and Detail Screen. Hero is used to animate some part when widget is selected (using pushedReplacement ).

I noticed that when I move from Detail Screen to List screen, if the selected widget is the end/tail/last widget of the ListView , then the animation won't run.

Because ListView.builder is only rendering the first/head viewable element, I think Hero does not know the location of the widget.

So, how do I solve this problem? It's not that critical, but it's bugging me for days.

Answer 1

what u need is to provide unique tag to each list-builder element

Hero(
       tag: snapshot.data.documents[index]['category'],
       child: // your child ,
    ),

Answer 2

Hero widget identifies the elements to animate by its tag. The tag property must be unique in order to make this work. So what you can do is:

1. Make the tag of each Hero unique. like,

   ListView.builder ( itemCount: litems.length, itemBuilder: (BuildContext context, int index) { return Hero( tag: "some_name"+index.toString(), child: SomeChild(); ); } )

2. Pass the index to detailed screen on click. like,

   Navigator.push(context, MaterialPageRoute( builder: (BuildContext context) => DetailedScreen(index) ) );

3. on the detailed screen create the tag using the index received. like,

   tag: "some_name"+index.toString()

Hope it will help you.