Fix: Update CupertinoSheetRoute transition rounded corner #163700

rkishan516 · 2025-02-20T04:11:01Z

Fix: Update CupertinoSheetRoute transition rounded corner
fixes: #163334

Pre-launch Checklist

I read the [Contributor Guide] and followed the process outlined there for submitting PRs.
I read the [Tree Hygiene] wiki page, which explains my responsibilities.
I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement].
I signed the [CLA].
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is [test-exempt].
I followed the [breaking change policy] and added [Data Driven Fixes] where supported.
All existing and new tests are passing.

MitchellGoodwin

Thank you for putting this PR together. I'm looking into this as well. Could you include videos of how these changes look when animating on a phone with this issue, and an iPhone with rounded corners?

MitchellGoodwin · 2025-02-20T18:30:05Z

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


    final Animatable<BorderRadiusGeometry> decorationTween = Tween<BorderRadiusGeometry>(
-      begin: BorderRadius.circular(deviceCornerRadius),
+      begin: BorderRadius.circular(0),


Ah, I was looking into this issue too.

This would fix phones with no rounded corners, but it would look not as smooth on phones with rounded corners. The "brute force" method I was thinking of was for the radius above, hard coding it to zero if the animation is at the beginning. This would likely be jumpy on screens without rounded corners, however, so it's not perfect either.

Yaa, correct. When i saw animation on iPhone SE, in the beginning it jump for flat to 20 and then comes down to 12. And going back was smooth but it retained that curve.

rkishan516 · 2025-02-21T02:03:46Z

Thank you for putting this PR together. I'm looking into this as well. Could you include videos of how these changes look when animating on a phone with this issue, and an iPhone with rounded corners?

Here you go, taken from iPhone 16 Simulator.

Screen.Recording.2025-02-21.at.8.03.30.AM.mov

MitchellGoodwin

I've been trying different things, and I have a proposed solution. I've left some comments below with my reasoning. Let me know what you think.

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

MitchellGoodwin · 2025-02-27T19:46:47Z

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


    final Animatable<BorderRadiusGeometry> decorationTween = Tween<BorderRadiusGeometry>(
-      begin: BorderRadius.circular(deviceCornerRadius),
+      begin: BorderRadius.circular(0),


begin: BorderRadius.vertical( top: Radius.circular(roundedDeviceCorners ? deviceCornerRadius : 0) ),

So we can animate from zero for flat screens and use the smoother transition for rounded corners. We also should only apply the radius to the top of the view. The bottom is unnecessary.

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

rkishan516 · 2025-02-28T01:50:25Z

I've been trying different things, and I have a proposed solution. I've left some comments below with my reasoning. Let me know what you think.

Hmm, Interesting approach. I think once the top route will be popping, there might be jump in animation because of

  borderRadius:
                  !secondaryAnimation.isDismissed
                      ? radiusAnimation.value
                      : BorderRadius.circular(0),

if that doesn't happen or if that is small enough that it isn't noticeable then we are good. I will check some devices with this behaviour.

Edit :- Checked on few flat devices like Pixel 2 and iPhone SE, there is a jump at the end, but its very subtle.

MitchellGoodwin · 2025-02-28T21:11:26Z

if that doesn't happen or if that is small enough that it isn't noticeable then we are good. I will check some devices with this behaviour.

Edit :- Checked on few flat devices like Pixel 2 and iPhone SE, there is a jump at the end, but its very subtle.

To me, I think the jump is small enough to be acceptable for fixing the issue. If you're happy with this, I can approve this PR and get a second review.

rkishan516 · 2025-03-01T01:00:29Z

To me, I think the jump is small enough to be acceptable for fixing the issue. If you're happy with this, I can approve this PR and get a second review.

Sure, Until device corner radius is not available in media query, We can go with this.

MaherSafadii · 2025-03-03T11:59:02Z

thanks for the fix but the title seems misleading as it doesn't have anything to do with the CupertinoActionSheet but the CupertinoSheetRoute instead.

rkishan516 · 2025-03-03T12:02:52Z

thanks for the fix but the title seems misleading as it doesn't have anything to do with the CupertinoActionSheet but the CupertinoSheetRoute instead.

Sure, make sense. I started with issue where action sheet was having issue, so named based on that.

MitchellGoodwin

LGTM! Thank you for fixing this.

chunhtai

LGTM, but left some readability comments

chunhtai · 2025-03-04T20:41:39Z

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

@@ -221,10 +221,14 @@ class CupertinoSheetTransition extends StatefulWidget {
      reverseCurve: reverseCurve,
      parent: secondaryAnimation,
    );
-    final double deviceCornerRadius = MediaQuery.maybeViewPaddingOf(context)?.top ?? 0;
+
+    final double deviceCornerRadius = (MediaQuery.maybeViewPaddingOf(context)?.top ?? 0) * .9;


for these numbers, can you declare a const variable with descriptive name and use it here?

…utter/flutter#163700)

flutter/flutter@2578d97...321fbc0 2025-03-06 engine-flutter-autoroll@skia.org Roll Skia from fefecd49e03a to ccd8cc23aa94 (1 revision) (flutter/flutter#164712) 2025-03-06 mdebbar@google.com [web] Detect scrollable semantics nodes more reliably (flutter/flutter#164491) 2025-03-06 matt.kosarek@canonical.com [windows] wire the focus request and the focus events through the Windows platform (flutter/flutter#164296) 2025-03-06 engine-flutter-autoroll@skia.org Roll Skia from 02897747c7d5 to fefecd49e03a (1 revision) (flutter/flutter#164701) 2025-03-06 engine-flutter-autoroll@skia.org Roll Skia from e315b0ab7c84 to 02897747c7d5 (1 revision) (flutter/flutter#164677) 2025-03-06 engine-flutter-autoroll@skia.org Roll Skia from 0c3880f94970 to e315b0ab7c84 (1 revision) (flutter/flutter#164669) 2025-03-06 jonahwilliams@google.com [Impeller] use device private on non-iOS devices. (flutter/flutter#164601) 2025-03-05 engine-flutter-autoroll@skia.org Roll Skia from 43294a662fd0 to 0c3880f94970 (1 revision) (flutter/flutter#164661) 2025-03-05 codefu@google.com Add a workflow (only triggered from rest events) for hasing experiment (flutter/flutter#164657) 2025-03-05 engine-flutter-autoroll@skia.org Roll Skia from 4cf9f0b77d41 to 43294a662fd0 (4 revisions) (flutter/flutter#164649) 2025-03-05 50643541+Mairramer@users.noreply.github.com Adds animateToItem to the CarouselController (flutter/flutter#162694) 2025-03-05 30870216+gaaclarke@users.noreply.github.com Cleanup content context (flutter/flutter#164229) 2025-03-05 34465683+rkishan516@users.noreply.github.com Fix: Update CupertinoSheetRoute transition rounded corner (flutter/flutter#163700) 2025-03-05 jonahwilliams@google.com [Impeller] fix macOS managed memory. (flutter/flutter#164635) 2025-03-05 jacksongardner@google.com [skwasm] Clear font collection cache when font is loaded manually. (flutter/flutter#164588) 2025-03-05 victorsanniay@gmail.com Fix race condition causing crash when interacting with an animating scrollable (flutter/flutter#164392) 2025-03-05 58529443+srujzs@users.noreply.github.com Use dwds 24.3.6 and pass uri for the reload scripts path to FrontendServerDdcLibraryBundleProvider (flutter/flutter#164582) 2025-03-05 engine-flutter-autoroll@skia.org Roll Packages from 9e4684e to abba683 (8 revisions) (flutter/flutter#164630) 2025-03-05 engine-flutter-autoroll@skia.org Roll Skia from 7e4323f72c9d to 4cf9f0b77d41 (1 revision) (flutter/flutter#164622) 2025-03-05 harri.kirik@lab.mobi Fix to Linux_pixel_7pro integration_ui_keyboard_resize test flakiness (flutter/flutter#162308) 2025-03-05 engine-flutter-autoroll@skia.org Roll Skia from 03a3f653d64e to 7e4323f72c9d (1 revision) (flutter/flutter#164599) 2025-03-05 34871572+gmackall@users.noreply.github.com Implement `clipPath` Mutator for hcpp (flutter/flutter#164525) 2025-03-05 98614782+auto-submit[bot]@users.noreply.github.com Reverts "[Impeller] use DeviceLocal textures for gifs on non-iOS devices. (#164573)" (flutter/flutter#164600) 2025-03-05 jonahwilliams@google.com [macos] prefer integrated GPU. (flutter/flutter#164569) 2025-03-05 muhatashim@google.com Enforce minSdk constraint for Android Flutter (flutter/flutter#164251) 2025-03-05 dkwingsmt@users.noreply.github.com Add `clipRSuperellipse`, and use them for dialogs (flutter/flutter#161111) 2025-03-05 engine-flutter-autoroll@skia.org Roll Skia from 46705a22edc3 to 03a3f653d64e (1 revision) (flutter/flutter#164590) 2025-03-05 psturm@esri.com when resetting FlutterPlatformViewsController, clear out some additional internal state to prevent it from carrying over across a Hot Restart (flutter/flutter#164456) 2025-03-05 engine-flutter-autoroll@skia.org Roll Fuchsia Linux SDK from Rt6pxGFLVAJHduM0V... to fhm5z889sA5T1AQao... (flutter/flutter#164583) 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,tarrinneal@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

…utter/flutter#163700)

flutter/flutter@2578d97...321fbc0 2025-03-06 engine-flutter-autoroll@skia.org Roll Skia from fefecd49e03a to ccd8cc23aa94 (1 revision) (flutter/flutter#164712) 2025-03-06 mdebbar@google.com [web] Detect scrollable semantics nodes more reliably (flutter/flutter#164491) 2025-03-06 matt.kosarek@canonical.com [windows] wire the focus request and the focus events through the Windows platform (flutter/flutter#164296) 2025-03-06 engine-flutter-autoroll@skia.org Roll Skia from 02897747c7d5 to fefecd49e03a (1 revision) (flutter/flutter#164701) 2025-03-06 engine-flutter-autoroll@skia.org Roll Skia from e315b0ab7c84 to 02897747c7d5 (1 revision) (flutter/flutter#164677) 2025-03-06 engine-flutter-autoroll@skia.org Roll Skia from 0c3880f94970 to e315b0ab7c84 (1 revision) (flutter/flutter#164669) 2025-03-06 jonahwilliams@google.com [Impeller] use device private on non-iOS devices. (flutter/flutter#164601) 2025-03-05 engine-flutter-autoroll@skia.org Roll Skia from 43294a662fd0 to 0c3880f94970 (1 revision) (flutter/flutter#164661) 2025-03-05 codefu@google.com Add a workflow (only triggered from rest events) for hasing experiment (flutter/flutter#164657) 2025-03-05 engine-flutter-autoroll@skia.org Roll Skia from 4cf9f0b77d41 to 43294a662fd0 (4 revisions) (flutter/flutter#164649) 2025-03-05 50643541+Mairramer@users.noreply.github.com Adds animateToItem to the CarouselController (flutter/flutter#162694) 2025-03-05 30870216+gaaclarke@users.noreply.github.com Cleanup content context (flutter/flutter#164229) 2025-03-05 34465683+rkishan516@users.noreply.github.com Fix: Update CupertinoSheetRoute transition rounded corner (flutter/flutter#163700) 2025-03-05 jonahwilliams@google.com [Impeller] fix macOS managed memory. (flutter/flutter#164635) 2025-03-05 jacksongardner@google.com [skwasm] Clear font collection cache when font is loaded manually. (flutter/flutter#164588) 2025-03-05 victorsanniay@gmail.com Fix race condition causing crash when interacting with an animating scrollable (flutter/flutter#164392) 2025-03-05 58529443+srujzs@users.noreply.github.com Use dwds 24.3.6 and pass uri for the reload scripts path to FrontendServerDdcLibraryBundleProvider (flutter/flutter#164582) 2025-03-05 engine-flutter-autoroll@skia.org Roll Packages from 9e4684e to abba683 (8 revisions) (flutter/flutter#164630) 2025-03-05 engine-flutter-autoroll@skia.org Roll Skia from 7e4323f72c9d to 4cf9f0b77d41 (1 revision) (flutter/flutter#164622) 2025-03-05 harri.kirik@lab.mobi Fix to Linux_pixel_7pro integration_ui_keyboard_resize test flakiness (flutter/flutter#162308) 2025-03-05 engine-flutter-autoroll@skia.org Roll Skia from 03a3f653d64e to 7e4323f72c9d (1 revision) (flutter/flutter#164599) 2025-03-05 34871572+gmackall@users.noreply.github.com Implement `clipPath` Mutator for hcpp (flutter/flutter#164525) 2025-03-05 98614782+auto-submit[bot]@users.noreply.github.com Reverts "[Impeller] use DeviceLocal textures for gifs on non-iOS devices. (#164573)" (flutter/flutter#164600) 2025-03-05 jonahwilliams@google.com [macos] prefer integrated GPU. (flutter/flutter#164569) 2025-03-05 muhatashim@google.com Enforce minSdk constraint for Android Flutter (flutter/flutter#164251) 2025-03-05 dkwingsmt@users.noreply.github.com Add `clipRSuperellipse`, and use them for dialogs (flutter/flutter#161111) 2025-03-05 engine-flutter-autoroll@skia.org Roll Skia from 46705a22edc3 to 03a3f653d64e (1 revision) (flutter/flutter#164590) 2025-03-05 psturm@esri.com when resetting FlutterPlatformViewsController, clear out some additional internal state to prevent it from carrying over across a Hot Restart (flutter/flutter#164456) 2025-03-05 engine-flutter-autoroll@skia.org Roll Fuchsia Linux SDK from Rt6pxGFLVAJHduM0V... to fhm5z889sA5T1AQao... (flutter/flutter#164583) 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,tarrinneal@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

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

MitchellGoodwin reviewed Feb 20, 2025

View reviewed changes

MitchellGoodwin reviewed Feb 27, 2025

View reviewed changes

rkishan516 force-pushed the cupertino-action-sheet-transition-rounded-corner branch 2 times, most recently from aebc19e to ff765b8 Compare February 28, 2025 16:38

rkishan516 changed the title ~~Fix: Update CupertinoActionSheet transition rounded corner~~ Fix: Update CupertinoSheetRoute transition rounded corner Mar 3, 2025

MitchellGoodwin approved these changes Mar 4, 2025

View reviewed changes

chunhtai approved these changes Mar 4, 2025

View reviewed changes

Fix: Update CupertinoActionSheet transition rounded corner

d7dfef4

rkishan516 force-pushed the cupertino-action-sheet-transition-rounded-corner branch from ff55b64 to d7dfef4 Compare March 5, 2025 02:18

MitchellGoodwin added the autosubmit Merge PR when tree becomes green via auto submit App label Mar 5, 2025

auto-submit bot added this pull request to the merge queue Mar 5, 2025

Merged via the queue into flutter:master with commit b44f717 Mar 5, 2025
75 checks passed

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

engine-flutter-autoroll mentioned this pull request Mar 6, 2025

Roll Flutter from 2578d97f32c8 to 099e6d39fe38 (27 revisions) flutter/packages#8806

Closed

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

b44f717 Fix: Update CupertinoSheetRoute transition rounded corner (fl…

f89a359

…utter/flutter#163700)

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

b44f717 Fix: Update CupertinoSheetRoute transition rounded corner (fl…

c670a4a

…utter/flutter#163700)

engine-flutter-autoroll mentioned this pull request Mar 6, 2025

Roll Flutter from 2578d97f32c8 to d778ed25a485 (28 revisions) flutter/packages#8807

Closed

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

b44f717 Fix: Update CupertinoSheetRoute transition rounded corner (fl…

9b9a3e3

…utter/flutter#163700)

engine-flutter-autoroll mentioned this pull request Mar 6, 2025

Roll Flutter from 2578d97f32c8 to 321fbc0e7e81 (29 revisions) flutter/packages#8808

Merged

Piinks mentioned this pull request Mar 7, 2025

Flutter Notable Commits - 2025 #161460

Open

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

b44f717 Fix: Update CupertinoSheetRoute transition rounded corner (fl…

47fda9e

…utter/flutter#163700)

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

b44f717 Fix: Update CupertinoSheetRoute transition rounded corner (fl…

c771735

…utter/flutter#163700)

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

b44f717 Fix: Update CupertinoSheetRoute transition rounded corner (fl…

ee80d76

…utter/flutter#163700)

Fix: Update CupertinoSheetRoute transition rounded corner #163700

Fix: Update CupertinoSheetRoute transition rounded corner #163700

Uh oh!

Conversation

rkishan516 commented Feb 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pre-launch Checklist

Uh oh!

MitchellGoodwin left a comment

Choose a reason for hiding this comment

Uh oh!

MitchellGoodwin Feb 20, 2025

Choose a reason for hiding this comment

Uh oh!

rkishan516 Feb 21, 2025

Choose a reason for hiding this comment

Uh oh!

rkishan516 commented Feb 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MitchellGoodwin left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

MitchellGoodwin Feb 27, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

rkishan516 commented Feb 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MitchellGoodwin commented Feb 28, 2025

Uh oh!

rkishan516 commented Mar 1, 2025

Uh oh!

MaherSafadii commented Mar 3, 2025

Uh oh!

rkishan516 commented Mar 3, 2025

Uh oh!

MitchellGoodwin left a comment

Choose a reason for hiding this comment

Uh oh!

chunhtai left a comment

Choose a reason for hiding this comment

Uh oh!

chunhtai Mar 4, 2025

Choose a reason for hiding this comment

Uh oh!

rkishan516 Mar 5, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

rkishan516 commented Feb 20, 2025 •

edited

Loading

rkishan516 commented Feb 21, 2025 •

edited

Loading

rkishan516 commented Feb 28, 2025 •

edited

Loading