How to add animated transitions when changing Widget on BLoC pattern?

Question

so I was following bloc login tutorial, and while I managed to complete it, I'm still fairly new to Flutter & Dart.

There is a portion of the code where, depending on the state, the code returns a different widget, instead of a new Scaffold. Since it's not using routes, the transition between pages looks choppy and akward.

return BlocProvider<AuthenticationBloc>(
  bloc: authenticationBloc,
  child: MaterialApp(
    debugShowCheckedModeBanner: false,
    home: BlocBuilder<AuthenticationEvent, AuthenticationState>(
      bloc: authenticationBloc,
      builder: (BuildContext context, AuthenticationState state) {
        if (state is AuthenticationUninitialized) {
          return SplashPage();
        }
        if (state is AuthenticationAuthenticated) {
          return HomePage();
        }
        if (state is AuthenticationUnauthenticated) {
          return LoginPage(userRepository: userRepository);
        }
        if (state is AuthenticationLoading) {
          return LoadingIndicator();
        }
      },
    ),
  ),
);

I've tried adding a Navigation.push wrapping the returns, like this:

if (state is AuthenticationUninitialized) {
  Navigation.push(
    return SplashPage();
  ),
}

But while is not syntactically wrong, that crashes the app. Does anyone know a way to implement this while maintaining the BLoC example? Thanks.

Answer 1

You can wrap the pages with AnimatedSwitcher:

return BlocProvider<AuthenticationBloc>(
  bloc: authenticationBloc,
  child: MaterialApp(
    home: BlocBuilder<AuthenticationEvent, AuthenticationState>(
      bloc: authenticationBloc,
      builder: (BuildContext context, AuthState state) {
        return AnimatedSwitcher(
          duration: Duration(milliseconds: 250),
          child: _buildPage(context, state),
        );
      },
    ),
  ),
);

By default it uses fade transition and animates old and new widgets in reverse order.

---

To keep old widget in place during animation, pass to AnimatedSwitcher

switchOutCurve: Threshold(0),

To mimic Navigator.push transition in Android, pass it

transitionBuilder: (Widget child, Animation<double> animation) {
  return SlideTransition(
    position: Tween<Offset>(
      begin: const Offset(0, 0.25),
      end: Offset.zero,
    ).animate(animation),
    child: child,
  );
},

To use system transitions, try something like

transitionBuilder: (Widget child, Animation<double> animation) {
  final theme = Theme.of(context).pageTransitionsTheme;
  final prev = MaterialPageRoute(builder: (_) => widget);
  return theme.buildTransitions(prev, context, animation, null, child);
},

(the last isn't tested well)