Multiple heroes that share the same tag within a subtree – FloatingActionButton

Hi Guys Welcome to Proto Coders Point. This article is on a quick solution to an error i.e "There are multiple heroes that share the same tag within a subtree" in flutter.

Long time ago while developing a flutter application for my client, I encountered an error been show when I used 2 or more FloatingActionButton on same page.

How to Solve Multiple Heroes error in flutter

My FloatingActionButton Previous Snippet Code

floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          FloatingActionButton(
            onPressed: (){},
            child:Icon(Icons.arrow_back_ios) ,
          ),
          FloatingActionButton(onPressed: (){},
            child:Icon(Icons.arrow_forward_ios),
          ),
        ],
      ),

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

Here the Error simple means that, If you are adding more then 1 FloatingActionButton widget in one page or screen, then you have to add heroTag to each FloatingActionButton widget.

My FloatingActionButton after adding heroTag

floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          FloatingActionButton(
            heroTag: "f1",   // add a unique tag
            onPressed: (){},
            child:Icon(Icons.arrow_back_ios) ,
          ),
          FloatingActionButton(
            heroTag: "f2",   // add a unique tag
            onPressed: (){},
            child:Icon(Icons.arrow_forward_ios),
          ),

        ],
      ),

Just by adding unique heroTag to FloatingActionButton the error will get solved 100%.