Skip to content

CupertinoActionSheet doesn't perfectly match with native #37086

@miguelpruivo

Description

@miguelpruivo

Fidelity wise speaking, the CupertinoActionSheet isn't pixel perfect along with the native one and also there are some key features that are missing. Below are some of the findings I've gather that should be enough to make it perfectly match it.

Environment:

  • Device: iPhone X
  • OS version: 12.3.1
  • Font scale: Set to minimum

Flutter screenshots ar on the left, iOS native on the right


Font scale factor shouldn't be allowed below 1.0 and bottom safe area is wrong

IMG_0293 IMG_0292

The bottom safe area has more pixeis in the Flutter that it should, also, the font scaling factor, in iOS native, doesn't go below 1.0 whereas Flutter allows it, it should be max(1.0, fontScaleFactor).

When system font scale is set to maximum, the sizes don't match properly

IMG_0295 IMG_0296

Looks like Flutter is scaling a bit more that it should. Fixing this, can potentially fix some other wrong scaling across cupertino widgets.

Opacity when selected

IMG_0294 IMG_0292

Despite the fact of having different backgrounds, it looks like Flutter is using a different opacity when selecting the item in the sheet. Plus, native allows you to keep it pressed while navigating up and down without raising the finger, providing a light haptic feedback when doing so. Flutter doesn't allow this at all.


Flutter doctor

[✓] Flutter (Channel unknown, v1.8.0, on Mac OS X 10.14.5 18F132, locale pt-PT)
    • Flutter version 1.8.0 at /Users/miguelruivo/DevTools/flutter
    • Framework revision 2fefa8c731 (4 weeks ago), 2019-07-01 11:33:22 -0700
    • Engine revision 45b66b722e
    • Dart version 2.4.0

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: fidelityMatching the OEM platforms betterf: cupertinoflutter/packages/flutter/cupertino repositoryfound in release: 3.3Found to occur in 3.3found in release: 3.7Found to occur in 3.7frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

    Type

    No type

    Projects

    Status

    Done

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions