New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support Material 3 motion - Transitions #116526
Comments
Will this also include the page transition mentioned in #110664? And does anyone know where the specifications for this transition are? |
Yes, but that'll be in framework rather than the |
What about the skeleton loaders? |
There are many packages on pub that do support this. Since the guidelines don't specify a specific kind of loader, I don't think we'll add support for them in the framework yet. |
CC @justinmc |
It looks like some of these transitions are also affected by the predictive back feature. I'm going to make sure we have a good way to respond to those back gestures and will keep in mind they need to support these kinds of animations. I previously had a video of a predictive back version of one of these transitions here, but I think it's not yet finalized, so I've removed it. Googlers can get in touch with me for the details, and I'll try to update this when there is a final public version. |
I think this issue should be updated to reflect the fact that some of the transitions listed above are already available in the animations package and are ready to use. I was searching for a way to use Material 3 transitions in Flutter earlier this week and this issue came up pretty high on search results but was really misleading byt making my think they were not available at all in flutter. |
Is this planned for the near future? A lot of Material Design value comes from motion. |
I added the curves and durations with #129942, so this issue is unblocked for any contributor. |
Will these features be implemented, while the main issue #91605 is closed? |
This issue is missing a priority label. Please set a priority label when adding the |
@dhushyanth-s |
Contributions to |
I'm working on the OpenContainer transition's predictive back support here: flutter/packages#6321 I might mess with trying to match the M3 spec better if it's not a big addition to the PR, but people should feel free to open their own PR tweaking that in the meantime. |
@justinmc We can do same with l799tk2l-10.-.Forward.and.backward.-.Button.-.3P.mp4All we need to do is edit |
Here's a video it, it's my project Instagram Redesigned with Material 3: Recording.2024-04-19.115013.mp4it's seems a little laggy in video, due to low fps, but it works smooth in app. |
Where can I find detailed specs on the transitions? The Material 3 site defines duration and easing values but does not go into detail about the transitions. For example, regarding the Top Level transition, the site says: "The exiting screen quickly fades out and then the entering screen fades in." The "Guidelines" link does not provide details, and the "Android implementation" link provides Material 2 details. All I have are the examples. When I step through them frame by frame, I see the exiting screen fading to about 50% opacity before being replaced with the entering screen at about 50% opacity. I'm able to implement the transitions well enough in this manner, but I would appreciate a look at a spec. |
As a non-designer, I am also confused when making my own app, so I am using mdc-android animation duration. |
@swch01 You will have to use one of defined easings and durations, according to your need. Normally, as said in Material Design Guidelines, use emphasizedDeccelerator when entering screen, and emphasizedAccelerator when exiting screen, and for duration, entering Duration > exiting duration, for example u can keep, entering Duration : 400ms and exiting Duration as 300ms |
FYI M3 curves are in https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/motion.dart, please use those instead of creating duplicates |
Any updates on this? |
Probably no. |
https://m3.material.io/styles/motion/transitions/transition-patterns
There are now six common transition patterns:
This work includes:
The text was updated successfully, but these errors were encountered: