Repository navigation
Text in Hero glitches during transition #12463
Description
Activity
@Hixie or @HansMuller would know.
I've talked to @Hixie on Gitter and we have confirmed this to be an issue.
My understanding is that we can either fix this immediately - fix should be more or less similar to the recent gradient works. I would be happy to land it, but would require some assistance if possible.
Alternatively, we could submit PR mentioning this issue in documentation. I believe it would be valuable to be aware of it. It took me a while to figure out the root cause of that problem.
The problem is how to figure out which Inherited widgets to inherit from and lerp, and how to get their status when the hero is building (which typically happens long before either the start or end of the animation builds, if they have to rebuild). The workaround is to just provide a DefaultTextStyle in the hero itself.
- added this to the milestone
on Oct 10, 2017 Thanks for linking to the issue. That's what I have came up with so far. Shall we mention that in a documentation?
I just wanted to use a hero transition with a text going from 'subhead' to 'title'. It moves, but the layout doesn't animate nicely. Seeing #213 I have little hope that this will ever be made. What are the chances that texts in heros will animate nicely somewhere in the coming months?
I don't expect that we'll attempt to resolve this again in the coming months, though it is definitely something we want to eventually provide a solution for.
We would certainly be open to reviewing patches that attempt to address this issue.
Note that animating text sizes and styles in general is not something that will be smooth even in the medium term, because fonts change shape as they change size, so just animating the font size alone looks quite ugly. We usually work around this by leaving the text at one font size but animating a transform (scale) of the text instead. This usually gives a much nicer effect.
Yes I understand that. I'll see what I can do with your tips
Any news?
No change since my last comment. It's on our list of things to fix, but is not on our list of things to fix soon.
It's actually funny because I was trying to reproduce the same design as can be seen here:
Anyhow, you have to wrap the text in a Material. Example:new Hero( tag: todoObject.uuid + "_title", child: new Material( color: Colors.transparent, child: new Text( todoObject.title, style: new TextStyle( fontSize: 30.0 ), ), ), )
Hope this helps!
-MarcEdit:
I am having an issue with the appbar popping into place (same with all the other content due to the background being a hero) instead of transitioning which is issue with the overlay being over the appbar (If Hixie or anyone could help or provide a work around it would be amazing)Reacted by Abdu Bsruki, Daniel Castro Fernández, Derek Lakin, Paolo Rotolo, Garrett, sir-boformer, Itay Ganor, RockerFlower, Jakub Jodelka, miguelpruivo and 83 moreReacted by Simon Olsen, DouYaaaa, Sean Stuart Urgel, Matthew Evans, Davide Bolzoni, Dave Faliskie, Dimitri Dessus, Fern, Gabriel Navevaiko Moreira, Elmissouri and 4 moreReacted by Farhad, m3sv, Nico Montanari, Ionel lupu, Matthew Evans, BrunoMoureau, Paul Kastel, Dave Faliskie, Dimitri Dessus, Fern and 7 moreReacted by Yash Sharma, Fayiz and Rohanany update on this?
Reacted by Wilberforce Uwadiegwu , Tomasz Zlamaniec, Simon Dukarič, Chris Brendan and Maruf Hassanlittlemarc2011's solution works :)
@littlemarc2011 what is the icon used in your app for that menu button?
This did the trick for me
return Hero( flightShuttleBuilder: (_, Animation<double> animation, HeroFlightDirection flightDirection, BuildContext fromHeroContext, BuildContext toHeroContext) { return AnimatedBuilder( animation: animation, child: child, builder: (_, _child) { return DefaultTextStyle.merge( child: _child, style: TextStyle.lerp(DefaultTextStyle .of(fromHeroContext) .style, DefaultTextStyle .of(toHeroContext) .style, flightDirection == HeroFlightDirection.pop ? 1 - animation.value : animation.value), ); }, ); }, tag: _tag, child: child, );
Reacted by Steffen Sander, PiN73, Fern, Hashem and Ali Hussein Al-IssaThis is the best solution provided by @HansMuller I found among all the solutions.
Create this widget -->
Widget flightShuttleBuilder( BuildContext flightContext, Animation<double> animation, HeroFlightDirection flightDirection, BuildContext fromHeroContext, BuildContext toHeroContext, ) { return DefaultTextStyle( style: DefaultTextStyle.of(toHeroContext).style, child: toHeroContext.widget, ); }Call the widget after tag of every Hero() like this in both the places where you have used Hero animation.
child: Hero( tag: 'Home', flightShuttleBuilder: flightShuttleBuilder, child: Expanded(Unlike @HansMuller widget keep it public so you can call it anywhere, if you keep it private, then you have to create the widget in every page.
Reacted by Tsuryu and Naser AleisaReacted by Gaurav Dhingra, Hafiz, fpv999, xibici, Zvi Karp and Tsuryu- added a commit that references this issue
on Sep 21, 2020 This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.- locked as resolved and limited conversation to collaborators
on Aug 16, 2021
Steps to Reproduce
When animating between two pages that have
Herothat wrapsText, theTextcomponent will loose its styling for the in-transition state unless you explicitly provide it withfontFamily,textDecorationandcolor. Start and end is okay. I believe this could be related to the way we interpolate the style for the default values.Here's the code that glitches:
and here's the one, that is not:
Note that I have explicitly overwritten properties that were lacking proper values during transition. Is that intentional?
Flutter Doctor