如何在Flutter中将动画添加到基于Firebase AuthState的充当路由器的StreamBuilder中？

Question

在main.dart我将Router()小部件返回为我的home 。 在Router.dart我基本上有StreamBuilder ，它将FirebaseAuth.instance.onAuthStateChanged作为stream并根据用户的AuthState返回要显示的窗口小部件。 如果connectionState正在waiting我将Splash作为自定义的Splash Screen返回。 如果snapshot.hasData我返回“ Home小部件，如果没有，则返回“ Login小部件。

现在我的问题是整个路由工作正常，但是我需要为过渡设置动画。 假设从Splash到任何小部件过渡， Splash都会淡出。 从Login到Home转换Login将向左滑动。 从Home到Login过渡Login将从左滑动。 如何为这些变化设置动画？

这些是我的文件：

main.dart

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

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

提前致谢。

如果需要每个小部件文件，请发表评论。 我没有上传它们，因为它们很大并且包含一些秘密。

Answer 1

我遇到了同样的问题。 我建议您在didChangeDependencies（）中使用stream.listen而不是StreamBuilder。 然后，根据Auth状态，将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();
  }
}

Answer 2

要执行动画以在streambuilder中的小部件之间转换，很简单，只需使用一个名为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作为参数来添加自定义动画。