How to define page transition on RouterOutlet?

[arguswaikhom]

Describe the question
RouterOutlet has this annoying transition by default. Is there any way to fix this? I couldn't find one.

Expected behavior
I think it should have a smooth transition or developers should be able to define their own animation or transition to change the widgets.

Screenshots

In modular I've defined the child route like this

ChildRoute('/',child: (_, __) => const HomePage(),
          children: [
            ChildRoute(...),
            ChildRoute('/chart', child: (_, __) => const Chartpage()),
            ChildRoute('/more', child: (_, __) => const MorePage()),
          ],
        ),

And the below code as the body of the home page scaffold
body: const RouterOutlet(),

[GabrielCR99]

Hey there! Hope you've already made it.
Anyway, you can easily define page transition in RouterOutlet, using your initial ChildRoute, then, all of its children, will have the transition. Like so:

    ChildRoute(
      '/',
      child: (_, __) => HomePage(),
      transition: TransitionType.fadeIn,
      children: [
        ModuleRoute('/products', module: ProductsModule()),
        ModuleRoute('/cart', module: CartModule()),
        ModuleRoute('/orders', module: OrdersModule()),
        ModuleRoute('/profile', module: ProfileModule()),
      ],
    ),

You can also define individual transition for each ModuleRoute/ChildRoute.

[arguswaikhom]

Got it. Thanks for the help 😊