feat: Cupertino sheet implement upward stretch on full sheet by masal9pse · Pull Request #168547 · flutter/flutter

masal9pse · 2025-05-08T14:49:06Z

implimented(#161686)

This PR implements a subtle stretch effect when the user drags the sheet upward.
It achieves this by dynamically adjusting the top padding while the sheet is fully expanded.

2025-05-09.22.38.46.mov

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.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

…ure/add-drag-strech-when-max-size

…b.com/masal9pse/flutter into feature/add-drag-strech-when-max-size

dkwingsmt · 2025-06-04T18:41:40Z

Gentle nudge @MitchellGoodwin (from triage)

…ure/add-drag-strech-when-max-size

MitchellGoodwin

Thank you for the PR, this looks great! Left some comments.

MitchellGoodwin · 2025-07-01T17:55:30Z

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

+// The minimum distance (i.e., maximum upward stretch) from the top of the sheet
+// to the top of the screen, as a ratio of total screen height. This value represents
+// how far the sheet can be temporarily pulled upward before snapping back.
+// Determined through visual tuning to feel natural on iOS 18.0 simulators.


Nit: Prefer to mention the device being simulated as well, and maybe planer language.

"Eyeballed against an <device name, i.e iPhone 16 Pro> running iOS 18.0"

Or say multiple devices if you tested against multiple devices.

fix this commit
156752a

MitchellGoodwin · 2025-07-01T17:57:13Z

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

+// to the top of the screen, as a ratio of total screen height. This value represents
+// how far the sheet can be temporarily pulled upward before snapping back.
+// Determined through visual tuning to feel natural on iOS 18.0 simulators.
+const double _kMaxTopGapRatio = 0.072;


Turbo nit: maybe the name _kStretchedTopGapRatio would be clearer on what this represents?

fix this commit

3f80ead

MitchellGoodwin · 2025-07-01T20:45:11Z

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

+    // reverse the stretch to return to the normal max height.
+    if (upController.value > 0) {
+      upController.reverse();
+    }


Theoretically if the upController needs to snap back, then the logic below shouldn't need to happen, right? Can we do a return; after this or an else to cover the rest of this function?

fix this commit

7822c83

Sorry, I forgot to add navigator.didStopUserGesture().

d4a63dd

MitchellGoodwin · 2025-07-01T20:54:31Z

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

+    // If the sheet is in a stretched state (dragged upward beyond max size),
+    // reverse the stretch to return to the normal max height.
+    if (upController.value > 0) {
+      upController.reverse();


Rather than reverse it would probably look smoother with an animateBack with a non-linear curve. Maybe easeOut like the dropped sheet transition.

I see, it is definitely not linear.
As you pointed out, I have modified it to specify an easeOut for animateBack.

7131376

MitchellGoodwin · 2025-07-01T20:55:46Z

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

      reverseCurve: Curves.easeInToLinear,
      parent: widget.secondaryRouteAnimation,
    );
+    _upDragController = AnimationController(


Nit: I find the upDragController, downDragController not immediately obvious. Would something like stretchDragController and popDragController be more clear?

fix these commit.

054f127

b95b036

…b.com/masal9pse/flutter into feature/add-drag-strech-when-max-size

dkwingsmt

Looks good except for one comment

dkwingsmt · 2025-08-05T05:36:02Z

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

    // that we don't consider here.
-    _downGestureController?.dragEnd(0.0);
-    _downGestureController = null;
+    _dragGestureController?.dragEnd(0.0, _stretchDragController!.controller);


The nonnull assertion here worries me. It seems to me that _stretchDragController is only initialized at initState, and there is no guarantee that _stretchDragController is non null, since it is actually built by CupertinoSheetRoute, which could be placed anywhere, out of CupertinoSheetTransition . We should expect _stretchDragController to be null in each callback and probably bail out if so.
(Alternatively we can somehow guarantee _stretchDragController is null, which of course is preferred for making the code easier to understand.)

Also shouldn't _stretchDragController be updated on dependency updated?

I see. I have corrected the point you pointed out and added a null check to _stretchDragController.
I also made it so that _stretchDragController is updated when dependencies are updated.

ccfd6a2

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

…handling Ensures proper gesture state management when sheet is dragged upward beyond max height.

… changes

dkwingsmt

LGTM, thank you!

…b.com/masal9pse/flutter into feature/add-drag-strech-when-max-size

…lutter/flutter#168547)

flutter/flutter@34c2a3b...f4334d2 2025-08-14 [email protected] Roll Dart SDK from 9b4691f35139 to 214a7f829913 (2 revisions) (flutter/flutter#173769) 2025-08-14 [email protected] Roll Skia from b3e86773dae1 to dca5f05fee87 (4 revisions) (flutter/flutter#173763) 2025-08-14 [email protected] Roll Dart SDK from 73153bdc1459 to 9b4691f35139 (3 revisions) (flutter/flutter#173755) 2025-08-14 [email protected] Roll Skia from 5852eddfd404 to b3e86773dae1 (1 revision) (flutter/flutter#173750) 2025-08-14 [email protected] Allow empty initial time when using text input mode in showTimePicker dialog (flutter/flutter#172847) 2025-08-13 [email protected] Roll Skia from 525e2bf80559 to 5852eddfd404 (2 revisions) (flutter/flutter#173740) 2025-08-13 [email protected] [web] Popping a nameless route should preserve the correct route name (flutter/flutter#173652) 2025-08-13 [email protected] Make sure that a ChoiceChip doesn't crash in 0x0 environment (flutter/flutter#173322) 2025-08-13 [email protected] [ Tool ] Fix missing import for widget_preview.dart (flutter/flutter#173731) 2025-08-13 [email protected] Roll Skia from f7fdda3cd0e6 to 525e2bf80559 (7 revisions) (flutter/flutter#173727) 2025-08-13 [email protected] Do not include `:unittests` unless `enable_unittests` (flutter/flutter#173729) 2025-08-13 [email protected] Roll Packages from 08a9b2c to 6cb9113 (1 revision) (flutter/flutter#173726) 2025-08-13 [email protected] fix: selected date decorator renders outside PageView in `DatePickerDialog` dialog (flutter/flutter#171718) 2025-08-13 [email protected] [ Widget Preview ] Add `--machine` mode (flutter/flutter#173654) 2025-08-13 [email protected] Make sure that a Chip doesn't crash in 0x0 environment (flutter/flutter#173245) 2025-08-13 [email protected] feat: Cupertino sheet implement upward stretch on full sheet (flutter/flutter#168547) 2025-08-13 [email protected] Fix visual overlap of transparent routes barrier when using FadeForwardsPageTransitionsBuilder (flutter/flutter#167032) 2025-08-13 [email protected] Fix `ChipThemeData` lerp for `BorderSide` (flutter/flutter#173160) 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 [email protected],[email protected] 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

…#168547) implimented(flutter#161686) This PR implements a subtle stretch effect when the user drags the sheet upward. It achieves this by dynamically adjusting the top padding while the sheet is fully expanded. https://github.com/user-attachments/assets/ee98ab82-bc84-40b5-839f-82ae6de59e36 ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [x] I listed at least one issue that this PR fixes in the description above. - [x] I updated/added relevant documentation (doc comments with `///`). - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [x] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-new channel on [Discord].  [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md --------- Co-authored-by: Tong Mu <[email protected]>

flutter/flutter@34c2a3b...f4334d2 2025-08-14 [email protected] Roll Dart SDK from 9b4691f35139 to 214a7f829913 (2 revisions) (flutter/flutter#173769) 2025-08-14 [email protected] Roll Skia from b3e86773dae1 to dca5f05fee87 (4 revisions) (flutter/flutter#173763) 2025-08-14 [email protected] Roll Dart SDK from 73153bdc1459 to 9b4691f35139 (3 revisions) (flutter/flutter#173755) 2025-08-14 [email protected] Roll Skia from 5852eddfd404 to b3e86773dae1 (1 revision) (flutter/flutter#173750) 2025-08-14 [email protected] Allow empty initial time when using text input mode in showTimePicker dialog (flutter/flutter#172847) 2025-08-13 [email protected] Roll Skia from 525e2bf80559 to 5852eddfd404 (2 revisions) (flutter/flutter#173740) 2025-08-13 [email protected] [web] Popping a nameless route should preserve the correct route name (flutter/flutter#173652) 2025-08-13 [email protected] Make sure that a ChoiceChip doesn't crash in 0x0 environment (flutter/flutter#173322) 2025-08-13 [email protected] [ Tool ] Fix missing import for widget_preview.dart (flutter/flutter#173731) 2025-08-13 [email protected] Roll Skia from f7fdda3cd0e6 to 525e2bf80559 (7 revisions) (flutter/flutter#173727) 2025-08-13 [email protected] Do not include `:unittests` unless `enable_unittests` (flutter/flutter#173729) 2025-08-13 [email protected] Roll Packages from 08a9b2c to 6cb9113 (1 revision) (flutter/flutter#173726) 2025-08-13 [email protected] fix: selected date decorator renders outside PageView in `DatePickerDialog` dialog (flutter/flutter#171718) 2025-08-13 [email protected] [ Widget Preview ] Add `--machine` mode (flutter/flutter#173654) 2025-08-13 [email protected] Make sure that a Chip doesn't crash in 0x0 environment (flutter/flutter#173245) 2025-08-13 [email protected] feat: Cupertino sheet implement upward stretch on full sheet (flutter/flutter#168547) 2025-08-13 [email protected] Fix visual overlap of transparent routes barrier when using FadeForwardsPageTransitionsBuilder (flutter/flutter#167032) 2025-08-13 [email protected] Fix `ChipThemeData` lerp for `BorderSide` (flutter/flutter#173160) 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 [email protected],[email protected] 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

…#168547) implimented(flutter#161686) This PR implements a subtle stretch effect when the user drags the sheet upward. It achieves this by dynamically adjusting the top padding while the sheet is fully expanded. https://github.com/user-attachments/assets/ee98ab82-bc84-40b5-839f-82ae6de59e36 ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [x] I listed at least one issue that this PR fixes in the description above. - [x] I updated/added relevant documentation (doc comments with `///`). - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [x] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-new channel on [Discord].  [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md --------- Co-authored-by: Tong Mu <[email protected]>

…lutter/flutter#168547)

…#168547) implimented(flutter#161686) This PR implements a subtle stretch effect when the user drags the sheet upward. It achieves this by dynamically adjusting the top padding while the sheet is fully expanded. https://github.com/user-attachments/assets/ee98ab82-bc84-40b5-839f-82ae6de59e36 ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [x] I listed at least one issue that this PR fixes in the description above. - [x] I updated/added relevant documentation (doc comments with `///`). - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [x] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-new channel on [Discord].  [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md --------- Co-authored-by: Tong Mu <[email protected]>

feat: implement upward stretch on full sheet; code needs cleanup

634e8b5

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

masal9pse force-pushed the feature/add-drag-strech-when-max-size branch 2 times, most recently from d040a3e to c56c0e7 Compare May 11, 2025 10:20

masal9pse changed the title ~~feat: implement upward stretch on full sheet(WIP)~~ feat: Cupertino sheet implement upward stretch on full sheet(WIP) May 12, 2025

add unit test & addressing nits(change arg name etc...)

f7495fd

masal9pse force-pushed the feature/add-drag-strech-when-max-size branch from 30eddfc to f7495fd Compare May 15, 2025 13:21

Merge branch 'master' of https://github.com/flutter/flutter into feat…

5cdc7eb

…ure/add-drag-strech-when-max-size

masal9pse changed the title ~~feat: Cupertino sheet implement upward stretch on full sheet(WIP)~~ feat: Cupertino sheet implement upward stretch on full sheet May 15, 2025

masal9pse marked this pull request as ready for review May 15, 2025 15:23

Addressing nits

eadbf99

masal9pse force-pushed the feature/add-drag-strech-when-max-size branch from 9e44160 to eadbf99 Compare May 15, 2025 15:26

Merge branch 'master' into feature/add-drag-strech-when-max-size

68233a7

dkwingsmt requested a review from MitchellGoodwin May 21, 2025 18:12

masal9pse added 2 commits May 23, 2025 22:47

Merge branch 'master' of https://github.com/flutter/flutter into feat…

f1a6ad3

…ure/add-drag-strech-when-max-size

Merge branch 'feature/add-drag-strech-when-max-size' of https://githu…

9e49713

…b.com/masal9pse/flutter into feature/add-drag-strech-when-max-size

masal9pse added 3 commits June 5, 2025 23:12

Merge branch 'master' of https://github.com/flutter/flutter into feat…

702b6ee

…ure/add-drag-strech-when-max-size

Add nits

79a511b

Merge branch 'master' into feature/add-drag-strech-when-max-size

96a7180

MitchellGoodwin reviewed Jul 1, 2025

View reviewed changes

masal9pse added 8 commits July 3, 2025 00:55

Use animateBack with easeOut curve for smoother sheet transition

7131376

Change _kMaxTopGapRatio to _kStretchedTopGapRatio.

3f80ead

fix comment

156752a

change upDrag to stretchDrag

054f127

change downController to popDragController

b95b036

Add early return when upController snaps back to avoid unnecessary logic

7822c83

Merge branch 'feature/add-drag-strech-when-max-size' of https://githu…

8f49d40

…b.com/masal9pse/flutter into feature/add-drag-strech-when-max-size

fix format

ec6dfb5

dkwingsmt reviewed Aug 5, 2025

View reviewed changes

masal9pse added 2 commits August 12, 2025 22:34

Fix missing navigator.didStopUserGesture() in CupertinoSheet stretch …

d4a63dd

…handling Ensures proper gesture state management when sheet is dragged upward beyond max height.

Add null check for _stretchDragController and update it on dependency…

ccfd6a2

… changes

masal9pse force-pushed the feature/add-drag-strech-when-max-size branch from cd817ef to ccfd6a2 Compare August 12, 2025 15:22

masal9pse added 2 commits August 13, 2025 00:24

Merge branch 'master' into feature/add-drag-strech-when-max-size

881784e

Merge branch 'master' into feature/add-drag-strech-when-max-size

bae6995

dkwingsmt approved these changes Aug 12, 2025

View reviewed changes

dkwingsmt and others added 4 commits August 12, 2025 11:10

Merge branch 'master' into feature/add-drag-strech-when-max-size

6a976e0

Merge branch 'master' into feature/add-drag-strech-when-max-size

ee48d93

remove unnecessary diff

b59e614

Merge branch 'feature/add-drag-strech-when-max-size' of https://githu…

dfcb50c

…b.com/masal9pse/flutter into feature/add-drag-strech-when-max-size

dkwingsmt added the autosubmit Merge PR when tree becomes green via auto submit App label Aug 13, 2025

auto-submit bot added this pull request to the merge queue Aug 13, 2025

Merged via the queue into flutter:master with commit 4051fab Aug 13, 2025
74 checks passed

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

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

4051fab feat: Cupertino sheet implement upward stretch on full sheet (f…

e5f87af

…lutter/flutter#168547)

engine-flutter-autoroll mentioned this pull request Aug 14, 2025

Roll Flutter from 34c2a3b158b2 to c932faf75472 (17 revisions) flutter/packages#9806

Closed

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

4051fab feat: Cupertino sheet implement upward stretch on full sheet (f…

456d815

…lutter/flutter#168547)

engine-flutter-autoroll mentioned this pull request Aug 14, 2025

Roll Flutter from 34c2a3b158b2 to f4334d27934b (18 revisions) flutter/packages#9807

Merged

Piinks mentioned this pull request Aug 15, 2025

Flutter Notable Commits - 2025 #161460

Closed

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

4051fab feat: Cupertino sheet implement upward stretch on full sheet (f…

2459b54

…lutter/flutter#168547)

MitchellGoodwin mentioned this pull request Dec 4, 2025

Cupertino Sheet should bounce slightly when overdragged upwards #161686

Closed

Conversation

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

Uh oh!

Pre-launch Checklist

Uh oh!

dkwingsmt commented Jun 4, 2025

Uh oh!

MitchellGoodwin left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dkwingsmt left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

masal9pse Aug 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

dkwingsmt left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

masal9pse commented May 8, 2025 •

edited

Loading

masal9pse Aug 12, 2025 •

edited

Loading