Text in Hero glitches during transition

Steps to Reproduce

When animating between two pages that have Hero that wraps Text, the Text component will loose its styling for the in-transition state unless you explicitly provide it with fontFamily, textDecoration and color. 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:

var title = new Hero(
      tag: "${category.id}-title",
      child: new Text(
        category.name,
        style: const TextStyle(
          fontSize: 30.0,
        ),
        textAlign: TextAlign.center,
      ),
    );

and here's the one, that is not:

var title = new Hero(
      tag: "${category.id}-title",
      child: new Text(
        category.name,
        style: const TextStyle(
          fontSize: 30.0,
          fontWeight: FontWeight.normal,
          fontFamily: "Roboto",
          color: Colors.black,
          decoration: TextDecoration.none,
        ),
        textAlign: TextAlign.center,
      ),
    );

Note that I have explicitly overwritten properties that were lacking proper values during transition. Is that intentional?

Flutter Doctor

[✓] Flutter (on Mac OS X 10.12.6 16G29, locale en-PL, channel alpha)
    • Flutter at /Users/grabbou/Repositories/flutter
    • Framework revision 701d534ba9 (4 weeks ago), 2017-09-12 14:01:51 -0700
    • Engine revision 31d03de019
    • Tools Dart version 1.25.0-dev.11.0

[✓] Android toolchain - develop for Android devices (Android SDK 25.0.2)
    • Android SDK at /usr/local/Cellar/android-sdk
    • Platform android-25, build-tools 25.0.2
    • ANDROID_HOME = /usr/local/Cellar/android-sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_112-release-b06)

[-] iOS toolchain - develop for iOS devices (Xcode 9.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 9.0, Build version 9A235
    ✗ libimobiledevice and ideviceinstaller are not installed or require updating. To update, run:
        brew uninstall --ignore-dependencies libimobiledevice
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
    • CocoaPods version 1.2.0

[✓] Android Studio
    • Android Studio at /Applications/Android Studio 3.0 Preview.app/Contents
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-915-b01)

[✓] Android Studio (version 2.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Java version OpenJDK Runtime Environment (build 1.8.0_112-release-b06)

[✓] Connected devices
    • Custom Phone, 6 0 0, API 23, 768x1280 • 192.168.56.101:5555 • android-x86 • Android 6.0 (API 23)

@Hixie

@Hixie or @HansMuller would know.

@Hixie

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.

See #213 for our last (failed) attempt to fix this.

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!
-Marc

Edit:
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)

any update on this?

littlemarc2011's solution works :)

@littlemarc2011 what is the icon used in your app for that menu button?

@littlemarc2011 what is the icon used in your app for that menu button?

Here is the source, but if I remember correctly from a while ago it is a custom icon/font.

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,
);

Dup of #36220. This issue is older but since I assigned #36220 to myself I'm going to close this instead. This should be fixed once #36220 is closed.

@HansMuller

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

added hero transition to course screens

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 -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

Text in Hero glitches during transition #12463

Steps to Reproduce

Flutter Doctor

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Text in Hero glitches during transition #12463

Description

Steps to Reproduce

Flutter Doctor

Activity

eseidelGoogle commented on Oct 9, 2017

grabbou commented on Oct 10, 2017

Hixie commented on Oct 10, 2017

Hixie commented on Oct 10, 2017

grabbou commented on Oct 11, 2017

renefloor commented on Dec 21, 2017

Hixie commented on Dec 21, 2017

renefloor commented on Dec 22, 2017

graddotdev commented on Apr 28, 2018

Hixie commented on Apr 30, 2018

MarcL01 commented on May 8, 2018

RazaGR commented on Feb 15, 2019

dukaric1991 commented on Feb 19, 2019

ozexpert commented on Mar 19, 2019

MarcL01 commented on May 14, 2019

modulovalue commented on Jul 13, 2019

LongCatIsLooong commented on Aug 1, 2019

zyllus17 commented on Feb 24, 2020

github-actions commented on Aug 16, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions