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

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.

Answer 2

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

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