Multiple hero widget with gridview.builder-CodePudding

I was trying to create a UI design for food app. therefore I tried multiple container box using hero widget but couldn't get the result due to an error. the error is:

ErrorSummary('There are multiple heroes that share the same tag within a subtree.'), ErrorDescription( 'Within each subtree for which heroes are to be animated (i.e. a PageRoute subtree), ' 'each Hero must have a unique non-null tag.\n' 'In this case, multiple heroes had the following tag: $tag', ),

please help how to make multiple hero widget with different key tag. and went through many tutorials but couldn't get the idea well. if a detailed demo would be fine thank you.

CodePudding user response：

Please keep in mind that two containers don't have the same tag and in your Gridview every container has its particular and unique tag.

Every Hero widget has one tag parameter. You should use the same tag for one source container and its destination hero by pass it to the next widget, like this sample:

 return GridView.builder(
    reverse: true,
    shrinkWrap: true,
    itemBuilder: (ctx, index) {
     return Hero(
        tag:'$index',
        child: Container(child:  
                  MyDestinationContainer(
                      heroTag: '$index'  
                  ),
        ),
     );
    },
    itemCount: 10,
    scrollDirection: Axis.vertical,
  );

For more information see this.

CodePudding user response：

GridView.builder(
              physics: NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                crossAxisSpacing: 5.0,
                mainAxisSpacing: 5.0,
              ),
              itemCount: 10,
              itemBuilder: (context, index) {
                return Container(
                  color: Colors.blue,
                  child: Text("Text"),
                );
              },
            )