Beta: Text and Icons not always showing correctly in dialog

[DustyLamp]

Text and icons do not show correctly about 50% of the time in all of my dialogs, but only on Flutter Beta Channel.

Issues are intermittent and include:

• Some of the text showing and some not
• Icons not showing
• All of the text not showing

There's nothing else that's problematic - all sizes and styling look fine.

It's a relatively new issue - I haven't seen it before and I generally stick to the Beta Channel. I haven't been able to reproduce it on Stable.

There's nothing indicating an issue and there's no difference in the console between Beta and Stable.

Beta:

Stable:

---

UPDATE
Here's the output from flutter doctor -v:

I'm only seeing the issue on Android currently - I haven't tested it yet on IOS, but will post the results as soon as I have the ability to.

I'm seeing the issue on Samsung Galaxy S10e. I've had someone tell me that there is a similar problem (screen is blank) that extends beyond Dialogs on Pixel 4 XL. Reverting back to standard also fixed their issue.

I'm using ScreenUtil to set the size of the Text Widget's TextStyle like so:

Text(
  "Here, have a dialog",
  style: TextStyle(
      color: Colors.black,
      fontWeight: FontWeight.bold,
      fontSize: ScreenUtil().setSp(20.0)),
),

Perhaps it's a race condition between the Dialog opening time and calculating the text size?

This reproduces it on the Samsung Galaxy S10e:

import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sometimes Sad Dialog',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double textSize;
  @override
  void initState() {
    // sp20 = 8.465608465608465;
    textSize = 8;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          child: RaisedButton(
            color: Colors.purple,
            onPressed: () {
              showBouncyDialog();
            },
            child: Text(
              "Give me a dialog",
              style: TextStyle(
                color: Colors.white,
                fontSize: textSize,
              ),
            ),
          ),
        ),
      ),
    );
  }

  void showBouncyDialog() async {
    await showGeneralDialog<bool>(
      pageBuilder: (context, anim1, anim2) {},
      barrierLabel: '',
      barrierColor: Colors.black.withOpacity(0.3),
      transitionDuration: Duration(milliseconds: 400),
      context: context,
      barrierDismissible: true,
      transitionBuilder: (
        BuildContext context,
        Animation<double> animation,
        Animation<double> anotherAnimation,
        Widget child,
      ) {
        final double curvedValue =
            max(0, Curves.elasticInOut.transform(animation.value));

        return Transform.scale(
          scale: curvedValue,
          child: Dialog(
            child: Padding(
              padding: EdgeInsets.all(50.0),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    "Here, have a dialog",
                    style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.bold,
                      fontSize: textSize,
                    ),
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  Text(
                    "Here, have some more test that is of a longer length to see if wrapping is working.",
                    style: TextStyle(
                      color: Colors.blue,
                      fontSize: textSize,
                    ),
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  Center(
                    child: RaisedButton(
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                      color: Colors.red,
                      child: Text(
                        "Pop my cherry",
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: textSize,
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

And here are screenshots of it acting up with the code above:

expected

nothing showing

Topmost Text not showing

[darshankawar]

Hi @DustyLamp,
Please provide flutter doctor -v and a minimal complete reproducible code sample that shows the issue.
Also specify platform (Android, iOS) and devices on which you see this issue.
Thanks.

[DustyLamp]

Thanks @darshankawar - I've made an update to the original comment

[darshankawar]

Hi @DustyLamp, thanks for the code sample.
I see that you are using flutter_screen_util plugin which is 3rd party. Just to segregate the issue, is it possible for you to check by removing this plugin related code and try again with core code and see if the issue still occurs ?

[DustyLamp]

Yes - good question @darshankawar.

I can reproduce the issue with text sizes 11 or smaller, but I believe I have seen instances of it occurring with different sized texts (see original screenshots)

I've edited the code to remove flutter_screen_util plugin.

[darshankawar]

Thanks @DustyLamp for the code sample.
I tried it on latest beta and on Samsung S10+ device, but didn't see the issue.

64936.mp4.zip

flutter doctor -v

Flutter 1.21.0-9.2.pre • channel beta • https://github.com/flutter/flutter.git
Framework • revision 81a45ec2e5 (5 days ago) • 2020-08-27 14:14:33 -0700
Engine • revision 20a9531835
Tools • Dart 2.10.0 (build 2.10.0-7.3.beta)

Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, 1.21.0-9.2.pre, on Mac OS X 10.15.2 19C57, locale en-US)
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
[✓] Chrome - develop for the web
[✓] Android Studio (version 3.6)
[✓] Connected device (4 available)

! Doctor found issues in 1 category.

Since you said, it's intermittent, I'd suggest you keep an eye on it and see if there's any pattern that causes the issue.
Thanks.

[DustyLamp]

When I say it's intermittent, it's happening every second time that I push the button in my code so it's not rare. It happens more often than not.

As for patterns that cause it:

• Usually, when I first open the application it works without a problem
• The second time I start seeing the issue and then the issue usually persists from that point onwards.

See gif below:

[darshankawar]

I am unable to replicate this issue on latest beta and on the devices I tried, but per OP, it's happening at their end. Will need further analysis on it,so keeping this issue open.

[igoriuz]

I'm experiencing something similar. Text/Icon widgets are rarely shown after animations. Happens both on android and ios platforms. As far as i can tell, it affects debug and release builds.

Here's some example code:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Center(
        child: MicroAnimationBounceIn(
          child: RaisedButton(
            onPressed: () {},
            child: Text("This Text disappears in release builds"),
          ),
        ),
      ),
    );
  }
}

class MicroAnimationBounceIn extends StatefulWidget {
  final Widget child;
  final Duration delayBounce;
  final Duration duration;

  MicroAnimationBounceIn({
    Key key,
    this.child,
    this.delayBounce = const Duration(milliseconds: 100),
    this.duration = const Duration(seconds: 1),
  }) : super(key: key);

  @override
  _MicroAnimationBounceInState createState() => _MicroAnimationBounceInState();
}

class _MicroAnimationBounceInState extends State<MicroAnimationBounceIn>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();

    _animationController = AnimationController(
      duration: widget.duration,
      vsync: this,
      animationBehavior: AnimationBehavior.preserve,
    );

    _animation = Tween<double>(begin: 0.0, end: 1.0).animate(CurvedAnimation(
        parent: _animationController, curve: Curves.elasticInOut))
      ..addListener(() {
        setState(() {});
      });

    Future.delayed(widget.delayBounce)
        .then((value) => _animationController.forward());
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Transform.scale(
      scale: _animation.value,
      child: widget.child,
    );
  }
}

[igoriuz]

Another important note: This problem appears on physical devices more often than on simulators/emulators.

My flutter doctor output:

Flutter 1.21.0-9.2.pre • channel beta • https://github.com/flutter/flutter.git
Framework • revision 81a45ec2e5 (11 days ago) • 2020-08-27 14:14:33 -0700
Engine • revision 20a9531835
Tools • Dart 2.10.0 (build 2.10.0-7.3.beta)

[igoriuz]

Could you reproduce it with my example code @darshankawar ?

[jason-simmons]

I reproduced this issue using the sample code from #64936 (comment)

It happens reliably on a Moto G4 if I run the app in release mode, hit the back button, and resume the app. The animation will run but the text will not be rendered.

Bisected this to google/skia@a5b9860. The text shows if I remove the !fInitialMatrix.rectStaysRect() check from GrTextBlob::canReuse.

@herbderby @bungeman

[herbderby]

Can you print the values of fInitialMatrix when the problem happens?

[jason-simmons]

The last fInitialMatrix seen during the animation is:

m0=0.000065 m1=0.000000 m2=540.004028
m3=0.000000 m4=0.000065 m5=888.019592
m6=0.000000 m7=0.000000 m8=1.000000

[herbderby]

The problem stems from building the initial text blob with a size of 1/650,000. This creates an initial blob with no viewable text. What is the text size on SkFont when you initially draw it, and what is the text size on SkFont when you expect it to draw? Can you provide a repro case in c++? Thanks, Herb

…

On Mon, Sep 21, 2020 at 3:42 PM Jason Simmons ***@***.***> wrote: The last fInitialMatrix seen during the animation is: m0=0.000065 m1=0.000000 m2=540.004028 m3=0.000000 m4=0.000065 m5=888.019592 m6=0.000000 m7=0.000000 m8=1.000000 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#64936 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AANUMHGVSE6KUYJAIYG5DFLSG6UDHANCNFSM4QQGWA4A> .

[jason-simmons]

The SkFont in this example always has font size 14.

The 0.000065 value in the matrix happens because the text is wrapped in an animation that applies a scale transform. When the animation works properly, the fInitialMatrix starts at 0.000065 and gradually increases as the animation progresses, eventually reaching a value of 3.0.

If I remove the !fInitialMatrix.rectStaysRect() check then I see that behavior consistently.

With the rectStaysRect check I sometimes see the fInitialMatrix scale factor stuck at 0.000065 even though the animation should have increased the scale.

I don't have a standalone C++ reproduction.

[chinmaygarde]

xref https://skia-review.googlesource.com/c/skia/+/319031

[jason-simmons]

The change was reverted in Skia and rolled into the engine.

[github-actions]

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.