How to solve “ There are multiple heroes that share the same tag within a subtree.” in a flutter project

In this short article, I will explain how I solved a bug that looked like it will not go off 😂😂😂😂😂.

I was very happy trying out Flutter because it is easy and fast to build a huge app with less stress, but as we all know bugs are always around to give us a hard time. In my design, I have a Bottom NavBar(4 navbars) with Three FAB(Floating Action Button) on each screen. I never knew that Flutter has an Attribute called “heroTag” and it must be unique. to cut the long story short, I ran the code I got the error below:

And also when navigating to that screen I will be presented with a black screen like the image below.

The solution is to add “heroTag” attribute with unique names to the three FAB’s

floatingActionButton: FloatingActionButton(
  onPressed: () {},
  tooltip: 'Add',
  heroTag: 'contact',
  child: Icon(Icons.add),
  backgroundColor: Colors.redAccent,
),

Thank you for reading my article.

Let’s connect on
Twitter: https://twitter.com/Joklinztech
LinkedIn: https://www.linkedin.com/in/wisdom-nwokocha-76212a77/