How to Solve Multiple Heroes that Share the Same tag Within a Subtree?

How to Solve Multiple Heroes that Share the Same tag Within a Subtree?

A FloatingActionButton Widget represents the primary action of a screen. Generally, it is located at the right bottom of the screen. Let us understand the same with a detailed article on it. So in this article, we will learn about how to Solve Multiple Heroes that Share the Same tag Within a Subtree.

How to Solve Multiple Heroes that Share the Same tag Within a Subtree?

Suppose a user is having two FloatingAction Buttons on one screen. So, you should add a heroTag property + value per FloatingActionButton for the error to go away.

Example:

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

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

From the example code, it is clear that there is no 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

There is a possibility you may have used it on the page you were navigating. That could have triggered the error.

Note: 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”.

You can set a unique id or only set null:

new FloatingActionButton(
heroTag: null,
...
)

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

Sometimes wrapping the heroTag in a Text Widget can solve the problem for you.

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,
     ),
   );
 }

Conclusion:

Thanks for being with us on a Flutter Journey!

So, in this article, we have seen how to Solve Multiple Heroes that Share the Same tag Within a Subtree. Also, feel free to comment and provide any other suggestions regarding Flutter.

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. Also, the portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology. Daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.