300

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?

Improve this question

13 Answers 13

Reset to default
779

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

Improve this answer
Sign up to request clarification or add additional context in comments.

13 Comments

You can simply nullify it: heroTag: null,
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'
how can I add a hero inside a GridView?
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.
Thank you. I have multiple FloatingActionButtons and this solution worked for me.
|
95

You can set a unique id or only set null:

FloatingActionButton( heroTag: null, ... )
Improve this answer

3 Comments

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 The remaining exception would indicate the widget that need the heroTag. "In this case, multiple heroes had the following tag: <default FloatingActionButton tag>
It worked like a charm but is there side effects to this ?
28

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

Improve this answer

1 Comment

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

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.

Improve this answer

Comments

9

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"), ... )
Improve this answer

3 Comments

This is really bizarre.
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.
Don't do this! the hero widget takes an object in this case it will be calling the toString method of the widget
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.

Improve this answer

Comments

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), ),
Improve this answer

1 Comment

I also got this error because on one screen I used multiple floating action buttons (4 floating over a video player).
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, ), ); }
Improve this answer

1 Comment

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.
2 
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), ),
Improve this answer

Comments

1

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

Improve this answer

Comments

1

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

Improve this answer

Comments

0

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

Improve this answer

Comments

0

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.