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

Issue

I am trying to navigate from one screen to another with route. When I hit the button for the page to move to the route provided I get the error

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

Here’s the code:

Routes:

 <String, WidgetBuilder>{
    '/first':(BuildContext context) =>NavigatorOne() ,
    '/second':(BuildContext context) =>NavigatorTwo(),
    '/third':(BuildContext context) =>NavigatorThree(),

  },

Navigator.of(context).pushNamed('/first');
Navigator.of(context).pushNamed('/second');
Navigator.of(context).pushNamed('/third');

class NavigatorOne extends StatefulWidget {
  @override
  _NavigatorOneState createState() =>  _NavigatorOneState();
}

class _NavigatorOneState extends State<NavigatorOne> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(

      appBar: AppBar(),
      body: Container(
      color: Colors.green,
      child: RaisedButton(child: Text(' one 1'),onPressed: (){
        Navigator.of(context).pushNamed('/second');
      },),
    ),
    ); 
  }
}

And The Error:

══╡ EXCEPTION CAUGHT BY SCHEDULER LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (21786): The following assertion was thrown during a scheduler callback:
I/flutter (21786): There are multiple heroes that share the same tag within a subtree.
I/flutter (21786): Within each subtree for which heroes are to be animated (typically a PageRoute subtree), each Hero
I/flutter (21786): must have a unique non-null tag.
I/flutter (21786): In this case, multiple heroes had the following tag: <default FloatingActionButton tag>


How do I solve this?

Solution

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:

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

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.

Answered By – Robert Stevens

Answer Checked By – Mary Flores (FlutterFixes Volunteer)