问题描述
所以我一直关注 bloc登录教程，尽管我设法完成了它，我对Flutter& amp;还很陌生飞镖.
so I was following bloc login tutorial, and while I managed to complete it, I'm still fairly new to Flutter & Dart.
在代码的一部分中，根据状态的不同，代码将返回不同的小部件，而不是新的Scaffold.由于未使用路由，因此页面之间的过渡显得不连贯和笨拙.
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();
}
},
),
),
);
我尝试添加添加返回内容的Navigation.push，如下所示:
I've tried adding a Navigation.push wrapping the returns, like this:
if (state is AuthenticationUninitialized) {
Navigation.push(
return SplashPage();
),
}
但是在语法上并没有错，但它使应用程序崩溃.有谁知道在维护BLoC示例的同时实现此目的的方法?谢谢.
But while is not syntactically wrong, that crashes the app. Does anyone know a way to implement this while maintaining the BLoC example? Thanks.
推荐答案
您可以使用 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.
要在动画过程中将旧窗口小部件保留在适当的位置，请传递给AnimatedSwitcher
To keep old widget in place during animation, pass to AnimatedSwitcher
switchOutCurve: Threshold(0),
要模拟Android中的Navigator.push过渡，请将其传递
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)
这篇关于更改BLoC模式上的Widget时如何添加动画过渡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！