Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

There are multiple heroes that share the same tag within a subtree

Tags:

flutter

I have encountered this before, and it was because I had two FloatingAction buttons on one screen, I had to add a heroTag property + value per FloatingActionButton in order for the error to go away.

Example:

new FloatingActionButton(
    heroTag: "btn1",
    ...
)

new FloatingActionButton(
    heroTag: "btn2",
    ...
)

From the example code you provided it doesn't appear that you have a FloatingActionButton, but from the error it does seem to reference it:

I/flutter (21786): In this case, multiple heroes had the following tag: default FloatingActionButton tag

Perhaps you used it on the page you were navigating to which then triggered the error. Note that if you're using a programmatic way of creating tagged heroes, you will need to find a way of giving them different tags. For example, if you have a ListView.builder() creating FloatingActionButtons, try passing tags with string formatting so each button has a different tag, e.g.: heroTag: "btn$index".

In any event, hope that helps someone.


You can set a unique id or only set null:

new FloatingActionButton(
heroTag: null,
...
)

Just for Readers in the future:

in appreciate to @m.vincent comment, what cause this error for me is that i was using Hero inside SliverChildBuilderDelegate which (obviously) has an index, so i used the index with the tag like 'tag$index' like this

SliverChildBuilderDelegate(
    (BuildContext context, int index) {
      return Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Hero(
              tag: 'tagImage$index',
              child: Image.asset(
                'image source here',
              ),
            ),

NOTE : this may happen with any widget with index created children like ListView.Builder


For me, just adding a unique heroTag to my FloatingActionButtons didn't work. I ended up wrapping the heroTag in a Text widget and that solved the problem for me.

new FloatingActionButton(
    heroTag: Text("btn1"),
    ...
)

new FloatingActionButton(
    heroTag: Text("btn2"),
    ...
)

Add as many widgets as you like with hero tags as Strings

  Widget floatingButt(Function function, IconData icon, String heroTag) {
    return FloatingActionButton(
      onPressed: function,
      heroTag: heroTag,
      materialTapTargetSize: MaterialTapTargetSize.padded,
      backgroundColor: Constants.primaryColor, // from your values file
      child: Icon(
        icon,
        size: 36.0,
      ),
    );
  }

I went through same Error. It is because of use of buttons like floating action button multiple times in single screen.
Previously I used a floating action button instead I changed it to a gesture detector to use ontap so it worked

  GestureDetector(

              //backgroundColor: Colors.amber[100],
              onTap: add,
              child: Icon(
                FontAwesomeIcons.plus,
                size: 30,
              ),
            ),
            SizedBox(
              width: 20,
            ),
            GestureDetector(
             // heroTag: "btn2",
             // backgroundColor: Colors.amber[100],
              onTap: sub,
              child: Icon(FontAwesomeIcons.minus, size: 30),
            ),