在我的main.dart
中,我返回Router()
小部件作为我的home
。在Router.dart
中,我基本上有StreamBuilder
,它将FirebaseAuth.instance.onAuthStateChanged
作为stream
并根据用户的AuthState
返回要显示的小部件。如果connectionState
waiting
我会Splash
作为自定义初始屏幕返回。如果snapshot.hasData
我返回Home
小部件,如果没有,我返回Login
小部件。
现在我的问题是整个路由工作正常,但我需要对过渡进行动画处理。 假设从Splash
到任何小部件过渡Splash
都会淡出。从Login
到Home
过渡Login
将向左滑动。从Home
到Login
过渡Login
将从左侧滑动。如何为这些更改添加动画效果?
这些是我的文件:
主飞镖
import 'router.dart';
void main() => runApp(Main());
class Main extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
//Theme
),
home: Router(),
);
}
}
路由器.dart
import 'login.dart';
import 'home.dart';
class Router extends StatefulWidget {
_RouterState createState() => _RouterState();
}
class _RouterState extends State<Router> {
@override
Widget build(BuildContext context){
return StreamBuilder<FirebaseUser>(
stream: FirebaseAuth.instance.onAuthStateChanged,
builder: (BuildContext context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Splash();
} else {
if (snapshot.hasData) {
return Home();
}
return Login();
}
},
);
}
}
class Splash extends StatelessWidget {
@override
Widget build(BuildContext context){
return Scaffold(
backgroundColor: Theme.of(context).backgroundColor,
body: Container(
width: MediaQuery.of(context).size.width,
child: Center(
child: Text(
"Splash"
),
)
),
);
}
}
提前谢谢。
如果需要每个小部件文件,请发表评论。我还没有上传它们,因为它们很大并且包含一些秘密。
我遇到了同样的问题。我建议您在didChangeDependencies((中使用stream.listen而不是StreamBuilder。并且您可以使用 Navigator.pushReplacement(( 与过渡动画,具体取决于身份验证状态。
示例代码:
class Router extends StatefulWidget {
_RouterState createState() => _RouterState();
}
class _RouterState extends State<Router> {
@override
void didChangeDependencies() {
FirebaseAuth.instance.onAuthStateChanged.listen((firebaseUser) {
if (firebaseUser != null) {
_next(context, Home());
}
_next(context, Login());
});
super.didChangeDependencies();
}
_next(BuildContext context, Widget nextPage) {
Navigator.of(context).pushReplacement(
PageRouteBuilder(
opaque: false,
pageBuilder: (BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation) {
return nextPage;
},
transitionsBuilder: (BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation, Widget child) {
return FadeTransition(
opacity: Tween<double>(
begin: 0.0,
end: 1.0,
).animate(animation),
child: child,
);
},
),
);
}
@override
Widget build(BuildContext context) {
return Splash();
}
}
要执行动画以在流构建器中的小部件之间转换,这很容易,只需使用一个名为 AnimatedSwitcher 的小部件:
@override
Widget build(BuildContext context) {
return StreamBuilder(
stream: FirebaseAuth.instance.onAuthStateChanged,
builder: (BuildContext context, snapshot) {
return AnimatedSwitcher(
duration: Duration(seconds: 1),
child: _getMainWidget(snapshot, context),
);
},
);
}
在这里,我们使用 AnimatedSwitcher 在 AnimatedSwitcher 的子级发生变化时对过渡进行动画处理,默认动画是淡入淡出动画,但您可以通过向小部件传递 TransitionBuilder 作为参数来添加自定义动画