Skip to content

Material Bottom Sheet Reveal/Dismiss animation should use a curved animation #19469

Closed
#51122
Closed
Material Bottom Sheet Reveal/Dismiss animation should use a curved animation#19469
#51122
Assignees
guidezpl
Labels
a: fidelityMatching the OEM platforms betterframeworkflutter/packages/flutter repository. See also f: labels.p: material_uimaterial_ui package in flutter/packages

Description

@sir-boformer
sir-boformer
opened on Jul 17, 2018

Right now the scaffold uses the linear value of the animation controller, which results in a rather abrupt linear animation:

flutter/packages/flutter/lib/src/material/scaffold.dart

Line 1710 in c39f2f2

heightFactor: widget.animationController.value,

In the Material Design samples, you can clearly see that the bottom sheets are animated smoothly: https://material.io/design/components/sheets-bottom.html#behavior

The problem is that the animation controller is also to apply the movement caused by dragging the finger, which requires linear interpolation.

Activity

  1. zoechi
    added
    p: material_uimaterial_ui package in flutter/packages
    a: fidelityMatching the OEM platforms better
    frameworkflutter/packages/flutter repository. See also f: labels.
    on Jul 17, 2018

  2. marcoms commented on Dec 23, 2018

    @marcoms
    marcoms
    on Dec 23, 2018
    Contributor

    A few similar issues I've cataloged:

    Material

    • BottomSheet (native: ease-out vs. flutter: linear)
    • Buttons, Tappable list items, etc. (native since Android 9: ease-out vs. flutter: linear) -- could be an InkSplash/InkRipple issue
    • TextField (native: ? vs. flutter: linear)

    Cupertino

    • CupertinoActionSheet (native: ease-out-expo vs. flutter: ease-out-cubic?)
    • CupertinoPageRoute (!) (native: ease-out-expo vs. flutter: basically linear in comparison)
    • CupertinoPicker (!) (native: ease-out-expo vs. flutter: actually linear)

  3. marcoms commented on Dec 23, 2018

    @marcoms
    marcoms
    on Dec 23, 2018
    Contributor

    I made a few screen recording examples and comparisons with native iOS behavior here

  4. jordyvandomselaar commented on Jan 13, 2019

    @jordyvandomselaar
    jordyvandomselaar
    on Jan 13, 2019

    I've only just noticed this happening as well. It's really annoying imho. Functionally it works, aesthetically not so much.

  5. marcoms commented on Jan 13, 2019

    @marcoms
    marcoms
    on Jan 13, 2019
    Contributor

    With #25788, we added support for many more animation curves that will be much better suited. I can take a look at submitting a PR for this tomorrow.

  6. marcoms commented on Jan 20, 2019

    @marcoms
    marcoms
    on Jan 20, 2019
    Contributor

    Made some initial progress at #26825, for those interested :)

  7. alyyasser commented on Jan 19, 2020

    @alyyasser
    alyyasser
    on Jan 19, 2020

    any update for this? the PR seems to be closed without merged tho

  8. willlarche
    assigned
    guidezpl
    on Feb 4, 2020
  9. fluttergithubbot
    closed this as completedin #51122on Mar 2, 2020

  10. github-actions commented on Aug 22, 2021

    @github-actions
    github-actionsbot
    on Aug 22, 2021

    This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

  11. github-actions
    locked as resolved and limited conversation to collaborators on Aug 22, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

a: fidelityMatching the OEM platforms betterframeworkflutter/packages/flutter repository. See also f: labels.p: material_uimaterial_ui package in flutter/packages

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions