Text in Hero red when animating

[Hannnes1]

Steps to Reproduce

1. Create an app with two pages
2. Add a button to route to the second page
3. Add a Hero widget with a Text widget as its child on both pages and give them the same tag

Logs

flutter run -v

[√] Flutter (Channel stable, v1.2.1, on Microsoft Windows [Version 10.0.17763.379], locale sv-SE)
    • Flutter version 1.2.1 at E:\Programs\flutter
    • Framework revision 8661d8aecd (7 weeks ago), 2019-02-14 19:19:53 -0800
    • Engine revision 3757390fa4
    • Dart version 2.1.2 (build 2.1.2-dev.0.0 0a7dcf17eb)

[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at E:\Programs\Android
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • ANDROID_HOME = E:\Programs\Android
    • Java binary at: E:\Programs\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1248-b01)
    • All Android licenses accepted.

[√] Android Studio (version 3.3)
    • Android Studio at E:\Programs\Android Studio
    • Flutter plugin version 34.0.1
    • Dart plugin version 182.5215
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1248-b01)

[√] Connected device (1 available)
    • ONEPLUS A5010 • 25d040ad • android-arm64 • Android 9 (API 28)

• No issues found!

flutter analyze

Analyzing test_app...
No issues found! (ran in 2.6s)

When I add a Hero animation to a Text widget the text becomes red with a yellow underline during the animation. The problem goes away if you add another widget between the Hero and Text widgets, but then the text becomes duplicated instead, as shown in this Stackoverflow thread.

A gif of the issue:

[marianoarga]

Same issue for me

[HansMuller]

It would help to see a complete self-contained app that demonstrates the problem. In this case what I'd guess is happening is that the Text widget is inheriting its style from the DefaultTextStyle inherited widget. When its Hero is "in flight" it's temporarily reparented to the app's overlay and the DefaultTextStyle is no longer an ancestor. You might try passing along an explicit TextStyle.

[Hannnes1]

As you suggested, it does mostly work if i add a TextStyle, however i would have to specify every property in both places.

Here is an example app:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 1'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => NewPage()),
            );
          },
          child: Hero(
            tag: 'text',
            child: Text(
              'Text',
              style: TextStyle(fontSize: 50, color: Colors.black, decoration: TextDecoration.none, fontWeight: FontWeight.normal),
            ),
          ),
        ),
      ),
    );
  }
}

class NewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 2'),
      ),
      body: Align(
        alignment: Alignment(0, -0.5),
        child: Hero(
          tag: 'text',
          child: Text(
            'Text',
            style: TextStyle(fontSize: 50),
          ),
        ),
      ),
    );
  }
}

[marianoarga]

For me, using DefaultStyle as sugested, or TextStyle (as Text widget property) gives the same outcome, the text keeps on being red with yellow underline when the hero animation takes course.

[Hannnes1]

You will have to specify color, decoration, etc. in the TextStyle. But the letterspacing (I think) is wrong even if You set it to zero. Might be why the text breaks as well.

[HansMuller]

The simplest way to overcome this obstacle is to create the same (complete) text style in both Heroes. So in _MyHomePageState and in NewPage:

Widget build(BuildContext context) {
  final TextStyle style = Theme.of(context).textTheme.title.copyWith(
    fontSize: 50,
    fontWeight: FontWeight.normal,
  );

  return Scaffold(
    ...
        child: Hero(
          tag: 'text',
          child: Text('Text', style: style),
        )

It's also possible to use the Hero's flightShuttleBuilder to wrap the in-flight Hero with inherited widgets like Theme or DefaultTextStyle.

If a Text widget's style isn't specified the value of DefaultTextStyle.of(context).style is used. The flightShuttleBuilder can provide a DefaultTextStyle:

  Widget _flightShuttleBuilder(
    BuildContext flightContext,
    Animation<double> animation,
    HeroFlightDirection flightDirection,
    BuildContext fromHeroContext,
    BuildContext toHeroContext,
  ) {
    return DefaultTextStyle(
      style: DefaultTextStyle.of(toHeroContext).style,
      child: toHeroContext.widget,
    );
  }
  ...

Widget build(BuildContext context) {
  return Scaffold(
    ...
        child: Hero(
          tag: 'text',
          flightShuttleBuilder: _flightShuttleBuilder,
          child: Text('Text'),
        ),

[Hannnes1]

Thanks. That fixes the problem with the red text, but the problem with duplication still persists.

[Piinks]

This appears to be the same issue as: #20845 and #12463

[Hannnes1]

Thank you. There seems to be a workaround there as well