Как добавить анимированные переходы при смене виджета по шаблону BLoC? - PullRequest
Новая
       11

Как добавить анимированные переходы при смене виджета по шаблону BLoC?

3 голосов
/ 08 апреля 2019

поэтому я следовал учебному пособию по входу в блок , и хотя мне удалось его завершить, я все еще довольно новичок в Flutter & Dart.

Существует часть кода, где, в зависимости от состояния, код возвращает другой виджет вместо нового Scaffold. Поскольку маршруты не используются, переход между страницами выглядит прерывистым и неудобным. 

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();
        }
      },
    ),
  ),
);

Я попытался добавить Navigation.push, упаковывающий возвращаемые данные, например: 

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

Но, хотя синтаксически это не так, приложение вылетает. Кто-нибудь знает способ реализовать это при сохранении примера BLoC? Спасибо.

1 Ответ

2 голосов
/ 10 апреля 2019

Вы можете обернуть страницы с помощью 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),
        );
      },
    ),
  ),
);

По умолчанию он использует переход затухания и анимирует старые и новые виджеты в обратном порядке.

Чтобы сохранить старый виджет во время анимации, перейдите к AnimatedSwitcher 

switchOutCurve: Threshold(0),

Чтобы имитировать Navigator.push переход в Android, передайте его 

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

Чтобы использовать системные переходы, попробуйте что-то вроде

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);
},

(последний плохо проверен)

...