Improve page transitions to fit to the desktop

[Feichtmeier]

[jpnurmi]

a default transition that works everywhere is probably going to be difficult to achieve. would it be better to offer a few alternatives? horizontal slide+fade for wizards, something else for master-detail

[jpnurmi]

https://github.com/ubuntu/yaru.dart/pull/182 is not necessarily a bad default for a desktop theme :thinking:

[Feichtmeier]

a default transition that works everywhere is probably going to be difficult to achieve. would it be better to offer a few alternatives? horizontal slide+fade for wizards, something else for master-detail

That's a good idea. Eventually add an transition enum for all the variants we create and then default to a value in the yarutheme constructor?

YaruPageTransition.none YaruPageTransition.Xyz YaruPageTransition.abc ?

[jpnurmi]

a default transition that works everywhere is probably going to be difficult to achieve

I recall the old default transition in flutter was a pretty good all-rounder, though. Was it really so, or did time golden my memories? :older_man:

[Feichtmeier]

One-fits-all design rarely exists :D But maybe if that transition does not involve any movement from left/right/top it could work. Like a short fade-in

[jpnurmi]

Do you know if Yaru has any sort of transitions defined anywhere in GTK or other themes?

[Feichtmeier]

Only for some buttons I think. https://github.com/ubuntu/yaru/blob/e6abecab7710d0a006ae6ff7c4e94ab6de284df4/gtk/src/default/gtk-3.0/_common.scss#L8

[jpnurmi]

How do you like this kind of API for passing theme data "overrides" into YaruTheme?

YaruTheme(
  data: ThemeData(
    pageTransitionsTheme: YaruPageTransitions.wizard(),
    useMaterial3: false,
    visualDensity: const VisualDensity(horizontal: -4, vertical: -4),
  ),
  builder: (context, yaru, child) => MaterialApp(
    theme: yaru.theme,
    darkTheme: yaru.darkTheme,
    home: const HomePage(),
  ),
)

[Feichtmeier]

I like it very much 🙂

[jpnurmi]

For the wizard transition, how about a shorter slide combined with a fade transition to make it have less iOS/mobile/phone feeling?

CupertinoPageTransitions

https://user-images.githubusercontent.com/140617/190445705-04b1200f-8a84-433a-b44a-679f3a7fc919.mp4

YaruPageTransitions.wizard

https://user-images.githubusercontent.com/140617/190445721-cb51c082-338e-454c-aa58-9de7b169f90f.mp4

[Feichtmeier]

Looks really good

[jpnurmi]

Remaining questions:

• What to do with the default? No transitions by default?
• Do we need to come up with something for master-detail? Is anyone aware of a master-detail app that has page transitions we could use for inspiration?

[jpnurmi]

https://user-images.githubusercontent.com/140617/190453010-ef454bee-800c-4eff-9dad-e2ee6f2b0200.mp4

[jpnurmi]

https://user-images.githubusercontent.com/140617/190479216-1f8535f1-cf92-4296-b574-4fdac1429167.mp4

[Feichtmeier]

Remaining questions:

* What to do with the default? No transitions by default?

* Do we need to come up with something for master-detail? Is anyone aware of a master-detail app that has page transitions we could use for inspiration?

Thanks for taking the time and finding a solution Boht no transitions and your new vertical transitions seem equally good to me :+1: I have no strong opinion which one is better for master details

[jpnurmi]

Actually, we cannot remove the default page transitions. I forgot that Flutter had that unthemable 300ms duration for page transitions. Page transitions were once even removed on desktop but the change had to be reverted because the delay was still there (flutter/flutter#99052).

https://user-images.githubusercontent.com/140617/190493314-3b977e11-2f71-4835-9b73-e6df15ade91a.mp4

[Feichtmeier]

Okay then the decision is easy 😸 your new one it is