291

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?

13 Answers 13

754

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".

13
  • 43
    You can simply nullify it: heroTag: null,
    – mik
    Commented Mar 14, 2019 at 15:24
  • 21
    Similar issues would be in a ListTile with a Hero inside. this Hero is not just one hero, but it is multiplied by your items.length, so the tag should be 'tag$index'
    – mrahimygk
    Commented Apr 30, 2019 at 14:55
  • how can I add a hero inside a GridView? Commented Jun 29, 2020 at 1:27
  • 3
    Wow! I was navigating to a black screen. Knew the screen was loading properly as I put an auto-play sound file on it to test. Finally noticed this "hero" error message and found your response - thank you! Very helpful indeed.
    – Donna
    Commented Jul 24, 2020 at 1:33
  • Thank you. I have multiple FloatingActionButtons and this solution worked for me.
    – dwcho
    Commented Apr 19, 2021 at 15:23
95

You can set a unique id or only set null:

FloatingActionButton(
  heroTag: null,
  ...
)
3
  • I have no FloatingActionButton in my entire project but still getting this error when I navigate from child to parent screen. Please suggest me what is the solution? Thanks a lot.
    – Kamlesh
    Commented Jul 24, 2021 at 15:59
  • 1
    @Kamlesh The remaining exception would indicate the widget that need the heroTag. "In this case, multiple heroes had the following tag: <default FloatingActionButton tag>
    – a7md0
    Commented Dec 13, 2021 at 21:06
  • It worked like a charm but is there side effects to this ?
    – Utopion
    Commented Aug 2, 2022 at 12:18
27

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

2
  • 2
    Thanks, it's very helpful. When you navigate to the next page then pass tap index too. To match the tap Hero tag and next page hero tag name. Commented Jul 23, 2020 at 12:40
  • 1
    This is exactly the solution I wanted, thank you.
    – Speedy11
    Commented Jul 6, 2021 at 15:52
14

Yet another approach:

FloatingActionButton(
    heroTag: UniqueKey(),
    ....  
)

https://api.flutter.dev/flutter/foundation/UniqueKey-class.html

UniqueKey() Creates a key that is equal only to itself.

8

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"),
    ...
)
3
  • 2
    This is really bizarre. Commented Dec 4, 2020 at 23:38
  • 1
    I have no FloatingActionButton in my entire project but still getting this error when I navigate from child to parent screen. Please suggest me what is the solution? Thanks a lot.
    – Kamlesh
    Commented Jul 24, 2021 at 15:59
  • 1
    Don't do this! the hero widget takes an object in this case it will be calling the toString method of the widget Commented Apr 30, 2023 at 16:05
4

This is correct because according to flutter documentations, it should be one Floating Action Button per route (Screen) unless you explicit set the hero tag.

Flutter Docs

if this is not explicitly set, then there can only be one FloatingActionButton per route (that is, per screen), since otherwise there would be a tag conflict (multiple heroes on one route can't have the same tag). The material design specification recommends only using one floating action button per screen.

3

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),
            ),
1
  • I also got this error because on one screen I used multiple floating action buttons (4 floating over a video player).
    – Harmen
    Commented Apr 14, 2023 at 11:30
2

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,
      ),
    );
  }
1
  • 1
    I have no FloatingActionButton in my entire project but still getting this error when I navigate from child to parent screen. Please suggest me what is the solution? Thanks a lot.
    – Kamlesh
    Commented Jul 28, 2021 at 7:35
1

I made the simple mistake of trying to pass a Scaffold into the child of another widget, this threw the same error.

1
 floatingActionButton: FloatingActionButton(
        heroTag: null,
        onPressed: () async {
          final value = await Navigator.push(
              context, MaterialPageRoute(builder: (context) => const Cargar()));
          if (value == "inserted") {
            setState(() {});
          }
        },
        child: const Icon(Icons.person_add_alt_1),
      ),

floatingActionButton: FloatingActionButton( heroTag: null, onPressed: () async { final value = await Navigator.push( context, MaterialPageRoute(builder: (context) => const Cargar())); if (value == "inserted") { setState(() {}); } }, child: const Icon(Icons.person_add_alt_1), ),

0

Simply set tag: Uuid() if having multiple items with the same tag.

0
0

Simple solution of this heroTag issue is to provide this property as unique value. Either it can be a String value. In my case i provided it a String casted index value. And following is my solution which is working perfectly

FloatingActionButton(
  onPressed: (){ 
    print(index); 
    Navigator.push( context, 
       MaterialPageRoute( builder: (context)=> AddLead()
       ),
     );
    }, 
  heroTag: '$index',
  child: Image.asset('assets/pencil.png',height: 30, width: 30,), backgroundColor: Constants.myColor, 
),

for more information follow this link https://wise4rmgodadmob.medium.com/how-to-solve-there-are-multiple-heroes-that-share-the-same-tag-within-a-subtree-a5146fdec2b8

2
  • I am not using any heroTag in my entire app but still getting error at the compile time "There are multiple heroes that share the same tag within a subtree" kindly suggest what is the issue and how can I solve it. Thanks.
    – Kamlesh
    Commented May 16, 2021 at 18:04
  • Did you get a change to see my posted comment? Kindly check and suggest. Thanks.
    – Kamlesh
    Commented Jul 28, 2021 at 7:36
0

In my case i used Get.offAllNamed("/page") that produce this error. To solve it I have used Get.toNamed("/page")

Not the answer you're looking for? Browse other questions tagged or ask your own question.