Support Material 3 motion - Transitions

[guidezpl]

https://m3.material.io/styles/motion/transitions/transition-patterns

There are now six common transition patterns:

• Container transform
• Forward and backward
• Lateral
• Top level
• Enter and exit
• Skeleton loaders

This work includes:

• making all of these available and to spec in the animations package
• ensuring framework transitions use these transitions rather than hardcoded defaults

[florian-obernberger]

Will this also include the page transition mentioned in #110664?

And does anyone know where the specifications for this transition are?

[guidezpl]

Yes, but that'll be in framework rather than the animations package. Re the spec, I don't know

[masreplay]

What about the skeleton loaders?

[guidezpl]

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.

[HansMuller]

CC @justinmc

[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.

[dhushyanth-s]

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.

[GCSBOSS]

Is this planned for the near future? A lot of Material Design value comes from motion.

[guidezpl]

I added the curves and durations with #129942, so this issue is unblocked for any contributor.

[tbm98]

Will these features be implemented, while the main issue #91605 is closed?

[flutter-triage-bot]

This issue is missing a priority label. Please set a priority label when adding the triaged-design label.

[crystalarcus]

the transitions listed above are already available in the animations package and are ready to use.

@dhushyanth-s
Yes and No.
Yes, most transitions are available in animations package although, they are from previous material design and not Material 3. There is a lot of difference in some things, especially in easing and duration.
For example, the equivalent for Container Transform in the animation package is OpenContainer(),
which can be used for transition between 2 Widgets. But it takes only 1 argument for the duration, which it uses for both opening and closing animation, while Material 3 suggests using a longer duration while opening and shorter for closing.
I tried to customize it with setState, and give duration as a variable, but still, the duration is the same while opening and closing.
Guess we need a new package with Material 3 Specifications.

[guidezpl]

Guess we need a new package with Material 3 Specifications.

Contributions to animations are welcome

[justinmc]

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.

[crystalarcus]

I'm working on the OpenContainer transition's predictive back support here: flutter/packages#6321

@justinmc
Yesterday, I edited OpenContainer from animations package and added M3's easeInOutCubicEmphasized with 500ms duration when opening Container and Easing.EmphasizedDecelerator with 200ms duration when closing Container, and it works just find, like M3 Container transform.

We can do same with SharedAxisTransition from animations package, and to acheive Forward and Backward transitions
SharedAxisTransition in animations, see the first one, horizontal axis transition:

Material 3 Forward and Backward transition :

l799tk2l-10.-.Forward.and.backward.-.Button.-.3P.mp4

All we need to do is edit SharedAxisTransition and add M3's easing and durations. I will try doing it today.

[crystalarcus]

Yesterday, I edited OpenContainer from animations package and added M3's easeInOutCubicEmphasized with 500ms duration when opening Container and Easing.EmphasizedDecelerator with 200ms duration when closing Container, and it works just find, like M3 Container transform.

Here's a video it, it's my project Instagram Redesigned with Material 3:

Recording.2024-04-19.115013.mp4

it's seems a little laggy in video, due to low fps, but it works smooth in app.
The original OpenContainer animations were using LinearCurve and same durations for opening and closing Container. This one is using M3's Emphasized easings and different durations for open and close transitions.