启动画面 - 在 initState 上完成异步调用之前，AnimationController 不会启动答案

【问题标题】：Splash screen - AnimationController won't start before async call is done on initState启动画面 - 在 initState 上完成异步调用之前，AnimationController 不会启动
【发布时间】：2020-01-27 22:41:38
【问题描述】：

我正在尝试为我的 Flutter 应用程序制作启动画面。我希望我的徽标在检查用户是否登录 firebase authentifaction 时旋转，然后根据返回值转到相关视图。

问题是我的应用程序在我的异步调用之前没有正确构建（我看到了我的背景，但没有看到 AnimatedBuilder）。

我尝试使用after_layout 包运行我的CheckUser()，或使用此功能：

WidgetsBinding.instance.addPostFrameCallback((_) => yourFunction(context));

但它总是等待CheckUser() 函数完成，所以我看不到动画，因为它直接导航到我的其他视图。

如果你想测试，这是我的代码：

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:skull_mobile/connexion/login.dart';
import 'accueil.dart';

class SplashPage extends StatefulWidget {
  SplashPage({Key key}) : super(key: key);

  @override
  _SplashPage createState() => _SplashPage();
}

class _SplashPage extends State<SplashPage>
    with SingleTickerProviderStateMixin {

  AnimationController animationController;

  @override
  void initState() {
    super.initState();
    animationController = new AnimationController(
      vsync: this,
      duration: new Duration(seconds: 5),
    );
    animationController.repeat();
    checkUser();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[800],
      body: Center(
        child: Container(
          child: new AnimatedBuilder(
            animation: animationController,
            child: new Container(
              height: 150.0,
              width: 150.0,
              child: new Image.asset('assets/skull.png'),
            ),
            builder: (BuildContext context, Widget _widget) {
              return new Transform.rotate(
                angle: animationController.value * 6.3,
                child: _widget,
              );
            },
          ),
        ),
      ),
    );
  }

  void checkUser() async {
    FirebaseAuth.instance.currentUser().then((currentUser) => {
          if (currentUser == null)
            {Navigator.pushNamed(context, LoginPage.routeName)}
          else
            {Navigator.pushNamed(context, AccueilPage.routeName)}
        });
  }
}

【问题讨论】：

首先需要创建屏幕，然后检查任何内容。尝试使用 FutureBuilder，因为这个 firebase 函数是 Future 。并将其从 initeState 中移除，通过 FutureBuilder 调用它。
您是否尝试过将它们分成不同的小部件？让您的主应用程序文件加载并显示带有动画的启动小部件，同时发出您需要的请求。请求完成后，您可以将启动小部件替换为您要显示的屏幕，或导航到另一个视图。

标签： flutter dart flutter-animation

【解决方案1】：

根据我的评论，我在这里分享我自己的代码的 sn-p 以及我如何处理启动屏幕，这里称为“WaitingScreen”，设备的连接状态，然后将用户发送到具有不同属性的不同页面，具体取决于关于结果：

@override
Widget build(BuildContext context) {
  switch (authStatus) {
    case AuthStatus.notDetermined:
      if(_connectionStatus == ConnectionStatus.connected){
        return _buildWaitingScreen();
      }else{
        return _buildNoConnectionScreen();
      }
      break;
    case AuthStatus.notSignedIn:
      return LoginPage(
        onSignedIn: _signedIn,
        setThemePreference: widget.setThemePreference,
      );
    case AuthStatus.signedIn:
      return MainPage(
        onSignedOut: _signedOut,
        setThemePreference: widget.setThemePreference,
        getThemePreference: widget.getThemePreference,
      );
  }
  return null;
}

【讨论】：