时间戳

首页 > 解决方案 > 启动画面 - 在 initState 上完成异步调用之前，AnimationController 不会启动

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

问题描述

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

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

我尝试CheckUser()使用after_layout包运行我的，或者使用这个函数：

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

标签： flutterdartflutter-animation

解决方案

在我的评论之后，我在这里分享我自己的代码片段以及我如何处理启动屏幕，这里称为“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;
}

推荐阅读