I/flutter ( 5378): Another exception was thrown: There are multiple heroes that share the same tag within a subtree

Question

I'm trying navigate from one screen to another, when I click but I get error.

I'm already finding some error fixing from internet and other, but still error.

This is my code :

  _buildCard(String title, String rating, String imgPath) {
    return Padding(
        padding: EdgeInsets.all(10.0),
        child: InkWell(
          onTap: () {
            Navigator.of(context)
                .push(MaterialPageRoute(builder: (context) => DetailPage()));
          },

  buildIcon(String imgPath1, String iconName, String titleIcon) {
    return Padding(
        padding: EdgeInsets.only(left: 10.0, right: 10.0, top: 10.0),
        child: InkWell(
          onTap: () {
            BuildContext context;
            Navigator.of(context).push(MaterialPageRoute(
                builder: (context) =>
                    DetailsIcon(heroTag: imgPath1, iconName: iconName)));
          },

and this my error

I/flutter ( 5378): Another exception was thrown: There are multiple heroes that share the same tag within a subtree.

Answer 1

Hero tag must be unique, maybe one image is rendered multiple times. You can generate random string using the following code:

import 'dart:math';

String _randomString(int length) {
   var rand = new Random();
   var codeUnits = new List.generate(
      length, 
      (index){
         return rand.nextInt(33)+89;
      }
   );

   return new String.fromCharCodes(codeUnits);
}

Answer 2

Your each heroTag must have a unique value.

In your case if you are using hero widget inside add heroTag value as your listview index which will work as a unique value. Similarly pass the same index to the corresponding hero widget in the next screen where you want to transition your hero widget.

For Ex : // on sending screen

onTap: () {
            BuildContext context;
            Navigator.of(context).push(MaterialPageRoute(
                builder: (context) =>
                    DetailsIcon(heroTag: index.toString(), iconName: iconName)));
          },

// on receiving screen

class DetailsIconextends StatelessWidget {
  DetailsIcon({this.heroTag,this.iconName}) : super(key: key);

  final String photo;
  final String onTap;

  Widget build(BuildContext context) {
    return SizedBox(
      width: width,
      child: Hero(
        tag: heroTag,
        child: Material(
          color: Colors.transparent,
          child: InkWell(
            onTap: onTap,
            child: Image.asset(
              iconName,
              fit: BoxFit.contain,
            ),
          ),
        ),
      ),
    );
  }
}

Also, If you are not using only one widget instead of list of widgets you can just add a common value to the both screen heroTag to transition.

This will help you solve your issue.

For more reference visit Flutter Hero Animations I hope this helps.