Nav bar back label is not clipped mid-transition #168194

victorsanni · 2025-05-02T02:08:27Z

Before

before.back.label.clip.mov

After

nav.bar.back.label.spacing.mov

Fixes CupertinoNavigationBar flickers when previousPageTitle more than 4 characters

dkwingsmt · 2025-05-06T21:55:10Z

Looking closely at the after video, I think the label is still shortened?

It seems that the label is freed from the constraint, or starts to have a larger constraint midway, since the back label changes from "Back..." to "BackB..." to "BackBack".

I doubt if this is the correct behavior. Have you checked the native behavior?

victorsanni · 2025-05-06T22:20:33Z

It seems that the label is freed from the constraint, or starts to have a larger constraint midway, since the back label changes from "Back..." to "BackB..." to "BackBack".

Native behavior: #40583
With native it should never get clipped. It either is always fully extended or it gets replaced with 'Back'.
I agree, the label should always have enough space or get replaced.

dkwingsmt · 2025-05-07T00:48:31Z

Yeah, that's what I typically observe as well. Do you think something like this is achievable?

victorsanni · 2025-05-07T17:02:30Z

Yeah, that's what I typically observe as well. Do you think something like this is achievable?

Yes, this is fixed now.

dkwingsmt · 2025-05-07T18:15:14Z

packages/flutter/lib/src/cupertino/nav_bar.dart

@@ -2737,7 +2741,8 @@ class _NavigationBarComponentsTransition {
      offsetAnimation: animation
          .drive(CurveTween(curve: curve))
          .drive(anchorMovementInTransitionBox),
-      size: fromBox.size,
+      width: fromNavBarBox.size.width,


Does it mean that the width is allowed to as wide as the entire screen? What happens natively if the title will be clipped after the transition?

Does it mean that the width is allowed to as wide as the entire screen?

Yes, but elsewhere the back label is replaced with 'Back' if it is more than a certain number of characters. So it never actually takes up that whole space. Natively, the back label gets replaced if the title/middle doesn't have enough space.

The title/middle starts where the back label ends, and wraps if its too long. So when the back label is also very long, there isn't an overlap:

packages/flutter/test/cupertino/nav_bar_transition_test.dart

dkwingsmt

LGTM

MitchellGoodwin

LGTM as well

…lutter#168194)

flutter/flutter@54de32d...336a7ec 2025-05-13 sokolovskyi.konstantin@gmail.com Add assert for index parameter in IndexedStack. (flutter/flutter#167757) 2025-05-13 jessiewong401@gmail.com Fixed Android Lint Errors (flutter/flutter#168613) 2025-05-13 bruno.leroux@gmail.com Tab bar theme and dialog theme documentation cleanup (flutter/flutter#168724) 2025-05-13 engine-flutter-autoroll@skia.org Roll Fuchsia Linux SDK from 6vjKe0bfYDVaECqBL... to 6J81agNhuK4q255Jj... (flutter/flutter#168712) 2025-05-12 romanejaquez@gmail.com Make the barrier panel on the Material Drawer non-dismissible (flutter/flutter#164810) 2025-05-12 engine-flutter-autoroll@skia.org Roll ICU from c9fb4b3a6fb5 to b929596baebf (5 revisions) (flutter/flutter#168691) 2025-05-12 bruno.leroux@gmail.com Fix DropdownButtonFormField icon not vertically centered (flutter/flutter#163205) 2025-05-12 jmccandless@google.com Android home/end keyboard shortcut support (flutter/flutter#168184) 2025-05-12 matanlurey@users.noreply.github.com Update `TESTOWNERS` for Android PV tests (flutter/flutter#168694) 2025-05-12 engine-flutter-autoroll@skia.org Roll Dart SDK from 0bea6379f654 to 645d04a7a964 (14 revisions) (flutter/flutter#168679) 2025-05-12 chinmaygarde@google.com [Impeller] libImpeller: Allow setting text decorations. (flutter/flutter#168408) 2025-05-12 34871572+gmackall@users.noreply.github.com Error when trying to use old HC mode when HCPP is enabled (flutter/flutter#168027) 2025-05-12 victorsanniay@gmail.com Nav bar back label is not clipped mid-transition (flutter/flutter#168194) 2025-05-12 58529443+srujzs@users.noreply.github.com Add test for stack trace mapping and test expression eval tests using DDC library bundle format (flutter/flutter#168017) 2025-05-12 victorsanniay@gmail.com Remove CupertinoSliverNavigationBar background box when large title is extended (flutter/flutter#168407) 2025-05-12 1063596+reidbaker@users.noreply.github.com Label platform view modes using the unified naming scheme (flutter/flutter#168670) 2025-05-12 engine-flutter-autoroll@skia.org Roll Packages from 7814fab to 6a28ad9 (2 revisions) (flutter/flutter#168669) 2025-05-12 matanlurey@users.noreply.github.com Update `Engine-artifacts.md` to reflect the new `engine.version` verifier (flutter/flutter#168413) 2025-05-12 engine-flutter-autoroll@skia.org Roll Skia from 9f9e1f37917e to c97451da059f (1 revision) (flutter/flutter#168671) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC stuartmorgan@google.com on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

…r#9246) flutter/flutter@54de32d...336a7ec 2025-05-13 sokolovskyi.konstantin@gmail.com Add assert for index parameter in IndexedStack. (flutter/flutter#167757) 2025-05-13 jessiewong401@gmail.com Fixed Android Lint Errors (flutter/flutter#168613) 2025-05-13 bruno.leroux@gmail.com Tab bar theme and dialog theme documentation cleanup (flutter/flutter#168724) 2025-05-13 engine-flutter-autoroll@skia.org Roll Fuchsia Linux SDK from 6vjKe0bfYDVaECqBL... to 6J81agNhuK4q255Jj... (flutter/flutter#168712) 2025-05-12 romanejaquez@gmail.com Make the barrier panel on the Material Drawer non-dismissible (flutter/flutter#164810) 2025-05-12 engine-flutter-autoroll@skia.org Roll ICU from c9fb4b3a6fb5 to b929596baebf (5 revisions) (flutter/flutter#168691) 2025-05-12 bruno.leroux@gmail.com Fix DropdownButtonFormField icon not vertically centered (flutter/flutter#163205) 2025-05-12 jmccandless@google.com Android home/end keyboard shortcut support (flutter/flutter#168184) 2025-05-12 matanlurey@users.noreply.github.com Update `TESTOWNERS` for Android PV tests (flutter/flutter#168694) 2025-05-12 engine-flutter-autoroll@skia.org Roll Dart SDK from 0bea6379f654 to 645d04a7a964 (14 revisions) (flutter/flutter#168679) 2025-05-12 chinmaygarde@google.com [Impeller] libImpeller: Allow setting text decorations. (flutter/flutter#168408) 2025-05-12 34871572+gmackall@users.noreply.github.com Error when trying to use old HC mode when HCPP is enabled (flutter/flutter#168027) 2025-05-12 victorsanniay@gmail.com Nav bar back label is not clipped mid-transition (flutter/flutter#168194) 2025-05-12 58529443+srujzs@users.noreply.github.com Add test for stack trace mapping and test expression eval tests using DDC library bundle format (flutter/flutter#168017) 2025-05-12 victorsanniay@gmail.com Remove CupertinoSliverNavigationBar background box when large title is extended (flutter/flutter#168407) 2025-05-12 1063596+reidbaker@users.noreply.github.com Label platform view modes using the unified naming scheme (flutter/flutter#168670) 2025-05-12 engine-flutter-autoroll@skia.org Roll Packages from 7814fab to 6a28ad9 (2 revisions) (flutter/flutter#168669) 2025-05-12 matanlurey@users.noreply.github.com Update `Engine-artifacts.md` to reflect the new `engine.version` verifier (flutter/flutter#168413) 2025-05-12 engine-flutter-autoroll@skia.org Roll Skia from 9f9e1f37917e to c97451da059f (1 revision) (flutter/flutter#168671) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC stuartmorgan@google.com on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

…lutter#168194)

Nav bar back label is not clipped mid-transition

725eef1

github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: cupertino flutter/packages/flutter/cupertino repository labels May 2, 2025

Merge branch 'master' into back-label-flicker

6b54b30

victorsanni requested review from MitchellGoodwin, LongCatIsLooong and dkwingsmt and removed request for LongCatIsLooong May 2, 2025 02:19

victorsanni added 2 commits May 6, 2025 18:58

More space

f99e14e

Merge branch 'master' into back-label-flicker

d519298

Merge branch 'master' into back-label-flicker

b1aa63f

dkwingsmt reviewed May 7, 2025

View reviewed changes

victorsanni requested a review from dkwingsmt May 9, 2025 21:43

dkwingsmt reviewed May 9, 2025

View reviewed changes

packages/flutter/test/cupertino/nav_bar_transition_test.dart Outdated Show resolved Hide resolved

dkwingsmt approved these changes May 10, 2025

View reviewed changes

Add proper test

8fee602

MitchellGoodwin approved these changes May 12, 2025

View reviewed changes

victorsanni added the autosubmit Merge PR when tree becomes green via auto submit App label May 12, 2025

auto-submit bot added this pull request to the merge queue May 12, 2025

Merged via the queue into flutter:master with commit b772c17 May 12, 2025
76 checks passed

flutter-dashboard bot removed the autosubmit Merge PR when tree becomes green via auto submit App label May 12, 2025

victorsanni deleted the back-label-flicker branch May 12, 2025 20:36

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 13, 2025

b772c17f0 Nav bar back label is not clipped mid-transition (flutter/f…

3eab77d

…lutter#168194)

engine-flutter-autoroll mentioned this pull request May 13, 2025

Roll Flutter from 54de32d6e159 to 358b07268828 (18 revisions) flutter/packages#9244

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 13, 2025

b772c17f0 Nav bar back label is not clipped mid-transition (flutter/f…

0ee0a98

…lutter#168194)

engine-flutter-autoroll mentioned this pull request May 13, 2025

Roll Flutter from 54de32d6e159 to 336a7ecf7b40 (19 revisions) flutter/packages#9246

Merged

Piinks mentioned this pull request May 16, 2025

Flutter Notable Commits - 2025 #161460

Open

matanlurey mentioned this pull request May 19, 2025

[ios-experimental] Postsubmit tasks use an invalid engine SHA #169088

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 14, 2025

b772c17f0 Nav bar back label is not clipped mid-transition (flutter/f…

300dea7

…lutter#168194)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 14, 2025

b772c17f0 Nav bar back label is not clipped mid-transition (flutter/f…

4844497

…lutter#168194)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 15, 2025

b772c17f0 Nav bar back label is not clipped mid-transition (flutter/f…

643ffb4

…lutter#168194)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 15, 2025

b772c17f0 Nav bar back label is not clipped mid-transition (flutter/f…

61b74e8

…lutter#168194)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 16, 2025

b772c17f0 Nav bar back label is not clipped mid-transition (flutter/f…

b02c2f3

…lutter#168194)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Nav bar back label is not clipped mid-transition #168194

Nav bar back label is not clipped mid-transition #168194

Uh oh!

victorsanni commented May 2, 2025 •

edited

Loading

Uh oh!

dkwingsmt commented May 6, 2025 •

edited

Loading

Uh oh!

victorsanni commented May 6, 2025 •

edited

Loading

Uh oh!

dkwingsmt commented May 7, 2025

Uh oh!

victorsanni commented May 7, 2025

Uh oh!

dkwingsmt May 7, 2025

Uh oh!

victorsanni May 7, 2025

Uh oh!

Uh oh!

dkwingsmt left a comment

Uh oh!

MitchellGoodwin left a comment

Uh oh!

Uh oh!

Uh oh!

Nav bar back label is not clipped mid-transition #168194

Nav bar back label is not clipped mid-transition #168194

Uh oh!

Conversation

victorsanni commented May 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Before

After

Uh oh!

dkwingsmt commented May 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

victorsanni commented May 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dkwingsmt commented May 7, 2025

Uh oh!

victorsanni commented May 7, 2025

Uh oh!

dkwingsmt May 7, 2025

Choose a reason for hiding this comment

Uh oh!

victorsanni May 7, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

dkwingsmt left a comment

Choose a reason for hiding this comment

Uh oh!

MitchellGoodwin left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

victorsanni commented May 2, 2025 •

edited

Loading

dkwingsmt commented May 6, 2025 •

edited

Loading

victorsanni commented May 6, 2025 •

edited

Loading