🎨: fix cupertionActionSheet design

[Anishishi]

Overview

Fixed the implementation of CupertionActionSheet based on Apple Design Resource.
I also deleted devicePixelRatio because Flutter uses logical pixels based on https://api.flutter.dev/flutter/dart-ui/FlutterView/devicePixelRatio.html.

ISSUE: #134539

UPDATED GOLDEN: https://flutter-gold.skia.org/search?issue=134345&crs=github&patchsets=3&corpus=flutter

Before

After

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.
• All existing and new tests are passing.

[google-cla]

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

[flutter-dashboard]

It looks like this pull request may not have tests. Please make sure to add tests before merging. If you need an exemption to this rule, contact Hixie or stuartmorgan on the #hackers channel in Chat (don't just cc them here, they won't see it! Use Discord!).

If you are not sure if you need tests, consider this rule of thumb: the purpose of a test is to make sure someone doesn't accidentally revert the fix. Ask yourself, is there anything in your PR that you feel it is important we not accidentally revert back to how it was before your fix?

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

[MitchellGoodwin]

@Anishishi Thank you for putting this together. Would you mind creating an issue for this if one doesn't already exist? It helps track the work being done, especially in a case like this were we are matching a design.

[Anishishi]

@MitchellGoodwin
Thanks for letting me know. I have created this issue, #134539, and updated the PR description to contain that issue.

[MitchellGoodwin]

Thank you for putting this together and filling that issue. It looks like some of the framework tests are failing on the PR. Do they pass locally?

Also, how did you check to see if the values you used match the native view? Did you use the widget comparison tool, or something else?

https://github.com/flutter/platform_tests/tree/master/ios_widget_catalog_compare

[flutter-dashboard]

This pull request has been changed to a draft. The currently pending flutter-gold status will not be able to resolve until a new commit is pushed or the change is marked ready for review again.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

[Anishishi]

Thanks for the review. I have reflected some modifications.

About test cases.
I think some tests are failing because I have changed the UI and it is failing some golden tests. I think this is because if you triage the golden test, the test will pass, is my understanding correct?
The tests in test/cupertino/dialog_test.dart are successful except for the golden test as follows.

nishiyamaakiranin ~/cloned/flutter/packages/flutter [fix-cupertion-action-sheet-design] $ flutter test test/cupertino/dialog_test.dart
00:02 +28: Material2 - Default cupertino dialog golden                                                                                                                                 
══╡ EXCEPTION CAUGHT BY FLUTTER TEST FRAMEWORK ╞════════════════════════════════════════════════════
The following assertion was thrown while running async test code:
Golden "cupertino.m2_dialog_test.cupertino.default.png": Pixel test failed, 0.17% diff detected.
Failure feedback can be found at
/Users/nishiyamaakiranin/cloned/flutter/bin/cache/pkg/skia_goldens/packages/flutter/test/cupertino/failures

When the exception was thrown, this was the stack:
#0      FlutterLocalFileComparator.compare (package:flutter_goldens/flutter_goldens.dart:543:5)
<asynchronous suspension>
#1      MatchesGoldenFile.matchAsync.<anonymous closure> (package:flutter_test/src/_matchers_io.dart:118:32)
<asynchronous suspension>
<asynchronous suspension>
(elided one frame from dart:async)

The exception was caught asynchronously.
════════════════════════════════════════════════════════════════════════════════════════════════════
00:02 +28 -1: Material2 - Default cupertino dialog golden [E]                                                                                                                          
  Test failed. See exception logs above.
  The test description was: Material2 - Default cupertino dialog golden
  

To run this test again: /Users/nishiyamaakiranin/cloned/flutter/bin/cache/dart-sdk/bin/dart test /Users/nishiyamaakiranin/cloned/flutter/packages/flutter/test/cupertino/dialog_test.dart -p vm --plain-name 'Material2 - Default cupertino dialog golden'
00:03 +28 -1: Material3 - Default cupertino dialog golden                                                                                                                              
══╡ EXCEPTION CAUGHT BY FLUTTER TEST FRAMEWORK ╞════════════════════════════════════════════════════
The following assertion was thrown while running async test code:
Golden "cupertino.m3_dialog_test.cupertino.default.png": Pixel test failed, 0.17% diff detected.
Failure feedback can be found at
/Users/nishiyamaakiranin/cloned/flutter/bin/cache/pkg/skia_goldens/packages/flutter/test/cupertino/failures

When the exception was thrown, this was the stack:
#0      FlutterLocalFileComparator.compare (package:flutter_goldens/flutter_goldens.dart:543:5)
<asynchronous suspension>
#1      MatchesGoldenFile.matchAsync.<anonymous closure> (package:flutter_test/src/_matchers_io.dart:118:32)
<asynchronous suspension>
<asynchronous suspension>
(elided one frame from dart:async)

The exception was caught asynchronously.
════════════════════════════════════════════════════════════════════════════════════════════════════
00:03 +28 -2: Material3 - Default cupertino dialog golden [E]                                                                                                                          
  Test failed. See exception logs above.
  The test description was: Material3 - Default cupertino dialog golden
  

To run this test again: /Users/nishiyamaakiranin/cloned/flutter/bin/cache/dart-sdk/bin/dart test /Users/nishiyamaakiranin/cloned/flutter/packages/flutter/test/cupertino/dialog_test.dart -p vm --plain-name 'Material3 - Default cupertino dialog golden'
00:03 +41 -2: Some tests failed.

Regarding checking that the values are the same as the native view display.
I have not overlayed on the native component to compare. I just reflected the Figma values like this.

[MitchellGoodwin]

Figma works great, thank you.

For the tests, you're right about the golden files tests, but the tests I was looking at were in action_sheet_test.dart. It looks like some tests that checked widget sizes without golden files in there were affected by these changes.

For example:

The following TestFailure was thrown running a test:
Expected: 84.33333333333337 (±1e-10)
  Actual: <84.30000000000001>
   Which: 84.30000000000001 is not in the range of 84.33333333333337 (±1e-10).

When the exception was thrown, this was the stack:
#4      main.<anonymous closure> (file:///b/s/w/ir/x/w/flutter/packages/flutter/test/cupertino/action_sheet_test.dart:692:5)

[flutter-dashboard]

Golden file changes have been found for this pull request. Click here to view and triage (e.g. because this is an intentional change).

If you are still iterating on this change and are not ready to resolve the images on the Flutter Gold dashboard, consider marking this PR as a draft pull request above. You will still be able to view image results on the dashboard, commenting will be silenced, and the check will not try to resolve itself until marked ready for review.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #134345 at sha 6e2209b

[Anishishi]

Thanks for pointing out the missing test fix.
I have corrected the test in action_sheet_test.dart.

[MitchellGoodwin]

Tentatively LGTM. This seems to at least partially addresses #43495 as well. I'm investigating whether there's an easy value that could be plugged into this PR to fully fix that issue as well, or if that should be solved elsewhere.

[MitchellGoodwin]

@Anishishi apologies for letting this sit for so long. It doesn't look like there's an easy fix for the other issue with this, so that will still be it's own work. Would you be able to rebase and resolve the conflicts?

[Anishishi]

@MitchellGoodwin
Thank you for your reply. I have resolved the conflicts.Thank you for the review!

[MitchellGoodwin]

LGTM. Thank you for putting this together. I'm going to see about getting a second review.

[gspencergoog]