Repository navigation
CupertinoNavigationBar animation flickering #42988
Description
Activity
CC @justinmc
I was able to reproduce this with a very simple app, so it seems to be a regression bug in Flutter! Thanks for reporting.
import 'package:flutter/cupertino.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return CupertinoApp( title: 'Flutter Demo', home: MyHomePage(title: 'First Page'), routes: { '/second': (BuildContext context) => MyHomePage(title: 'Second Page'), }, ); } } class MyHomePage extends StatelessWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override Widget build(BuildContext context) { return CupertinoPageScaffold( navigationBar: CupertinoNavigationBar( middle: Text(title), ), child: Center( child: CupertinoButton( child: Text('Go'), onPressed: () { Navigator.pushNamed(context, '/second'); }, ), ), ); } }
Reacted by Grzegorz Antoniak and Ricardo Parra@gspencergoog Do you have any idea why that PR may have caused the text in CupertinoNavigationBar to flicker between routes? Nothing jumps out as super obvious to me.
Some details:
I confirmed that #31614 is the first change that has the bug in it. Checking out its merge commit, 7775c23, exhibits the bug, but checking out the commit directly before it, fdd554f, does not.
That PR is a re-land of #30040. If I check out the merge commit from that original PR, 4218c0b, then I do not see the bug.
There's a different issue reported here that looks related, video: http://treefortress.com/shared/2019-10-20_09-49-24.mp4.
I can manually size the container to get rid of it, but these containers are variable width, depending on the size of their text, so that's not ideal.
Could there be a problem with text sizing? From the description it feels like we're not giving theTextwidget the width it needs.Doesn't seem to be a typography problem. During the Hero transition the Rect's size is sometimes off by a small number (e.g. 34 -> 33.9999999999997).
Reacted by Justin McCandlessHere's a minimal code example that should reproduce the problem. Click the text to trigger the transition, you should see it flicker intermittently:
http://treefortress.com/shared/2019-10-21_00-40-24.mp4It seems related to horizontal movement. If I change alignments so it animates vertically, (TopLeft > BottomLeft), it doesn't flicker at all.
Wrapping the Text() in a Row(mainAxisSize: MainAxisSize.min) seems to prevent the flicker.
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp(home: Page1()); } } class Page1 extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: GestureDetector( child: Container( child: HeroContent(), alignment: Alignment.centerLeft, ), onTap: () { Navigator.of(context).push(PageRouteBuilder( pageBuilder: (_, __, ___) => Page2(), transitionDuration: Duration(seconds: 2), )); }, ), ); } } class Page2 extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Container( alignment: Alignment.centerRight, child: HeroContent(), ), ); } } class HeroContent extends StatelessWidget { @override Widget build(BuildContext context) { return Hero( tag: "hero", child: Material( child: Container( child: Text( "FooBar", overflow: TextOverflow.visible, style: TextStyle(fontSize: 42 ), ), ), ), ); } }Reacted by Justin McCandless, LongCatIsLooong and Levin GermannReacted by Alex FreiSmall update, using Row() does not completely get rid of the issues. When using Row() + MaterialRectArcTween, I get overflow errors in extremely small values:
The following assertion was thrown during layout:
A RenderFlex overflowed by 0.000895 pixels on the right.The most robust fix I've found so far is to just wrap the text in spaces " FooBar ".
Reacted by Grzegorz Antoniak, Marek Gocał and janiokqSurrounding text with spaces indeed helps with flickering, but doesn't help when sometimes the "trailing" widget in CupertinoNavigationBar is displayed in the wrong place for few frames.
I'll try downgrading Flutter to previous version, it was much more stable than now.
Unfortunately this issue still exists in 1.12.13+hotfix.5
@antekone Can you try it on master? I just tried my example app above on my iPhone 7 and I couldn't reproduce the problem.
Do you mean channel master?
When testing your example app on version
1.13.3-pre.60 / channel masteron an Android phone (Xperia G8141), as well as on Android emulator, the problem still exists.Flutter 1.13.3-pre.60 • channel master • https://github.com/flutter/flutter.git Framework • revision ceef460a64 (6 hours ago) • 2019-12-18 00:23:02 -0800 Engine • revision 500f9cedf6 Tools • Dart 2.8.0 (build 2.8.0-dev.0.0 2d332ee1d3)I don't own a Mac, so I can't check it on an iPhone.
6 remaining items
I experience the same issue, it really seems to be related to horizontal movement. Interesting though is that only the last part flickers, see reference here:
Still there in this version:
Flutter 1.17.3 • channel stable • https://github.com/flutter/flutter.git Framework • revision b041144f83 (3 days ago) • 2020-06-04 09:26:11 -0700 Engine • revision ee76268252 Tools • Dart 2.8.4Any updates or workaround?
Reacted by Ilya Iksentstill there on 1.22.6
This is caused by RelativeRect in used in transitions may produce a small overflow from floating point subtraction. The fix is quite simple - just add precisionErrorTolerance to them. I'm wondering how many else places in the framework may contain something unobvious like this
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 Sep 15, 2021
Steps to Reproduce
After updating Flutter to v1.9.1+hotfix.4, I'm getting a weird flickering in
CupertinoNavigationBarwhen changing pages. Here's a video that demonstrates the issue, please look atNavigationBarduring changing screens:https://youtu.be/MmUaFUVVtyo
Sometimes it's flickering, sometimes it's not, but most of the time it is flickering. If a button exists in the
trailingproperty, this button sometimes is rendered below the navigation bar for a few frames, and it goes back into proper position. It looks very ugly.I'm using very simple method for creation of the page:
Is this a problem with my Flutter installation, or is it a regression?
The problem exists in Debug compilations on Emulator & real hardware, as well as in Release compilations in real hardware (can't run release compilation in emulator).
Target Platform: Linux (emulator) + Android
Target OS version/browser: 9
Devices: Android Emulator, also Sony Xperia XZ Premium
Flutter doctor
Not sure why
doctordidn't detect flutter/dart plugins for IDEA, because I'm using Idea with those plugins. Also everything is working with my Android toolchain, also not sure why doctor has issues with licenses.