tomgilder/routemaster

Missing push animation ??

Closed this issue · 3 comments

Hey, thanks for the package! I'm new with this package (or nav 2.0 in general ^^) but I've setup a pretty common case of

Splash-screen => home
                    => login
                    => register

What I would like to achieve is a fade animation on splash screen to the next, then normal slide from home to login/register. But a fade between login and register.

Here is what is look like now:
https://user-images.githubusercontent.com/2970449/174683365-f6c6386a-4311-423f-b734-d8fa3d42bfcd.mov

My routes look like this:

final waitMap = RouteMap(
  onUnknownRoute: (route) => const Redirect('/'),
  routes: {
    '/': (_) => MaterialPage(child: SplashScreen()),
  },
);

final loggedOutMap = RouteMap(
  onUnknownRoute: (route) => const Redirect('/'),
  routes: {
    '/': (_) => MaterialPage(child: IntroScreen()),
    '/login': (_) => MaterialPage(child: LoginScreen()),
    '/register': (_) => MaterialPage(child: RegisterScreen()),
  },
);

final loggedInMap = RouteMap(
  routes: {
    '/': (_) => MaterialPage(child: HomeScreen()),
  },
);

And on Material app:

routerDelegate: RoutemasterDelegate(
            routesBuilder: (BuildContext context) {
              final userStore = context.watch<UserStore>();
              if (!userStore.isInitialized) {
                return waitMap;
              }
              return userStore.user == null ? loggedOutMap : loggedInMap;
            },

          ),
          routeInformationParser: const RoutemasterParser(),

So like this there is no animation on splash screen, and no animations when pushing login from register or opposite. Animation only happen when pushing from Home Screen. Not sure that's a bug or just me expecting stuff that not supposed to work lol

Let me know if you can help

Experiencing the same thing.

Hi, try adding a key to the MaterialPage objects. Otherwise Flutter has no way of figuring out that the page has changed.

Like this:

    '/': (_) => MaterialPage(child: SplashScreen(), key: const ValueKey('splash')),

and

    '/': (_) => MaterialPage(child: IntroScreen(), key: const ValueKey('intro')),

That should fix it. Please let me know if it doesn't.

Closing this for now, will reopen if a key doesn't fix it.