[如何在完成动画时将小部件及其小部件的功能传递给main.dart？

Question

我对Flutter有点陌生。在main.dart文件中，我有一个徽标，当我运行该应用程序时，徽标会淡入屏幕并转到屏幕顶部。我为此使用了两个动​​画控制器。

在welcome.dart文件中，有两个按钮（登录和注册）的代码，一个动画控制器用于淡入该按钮。

我需要证明徽标完成动画后，在屏幕上显示带有淡入淡出动画的按钮。

我尝试过将adListener放到徽标动画中，当徽标动画完成时，启动按钮动画。但这不起作用。

这是我的代码-

main.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'welcome.dart';

void main() {
  runApp(MyApp());

  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarBrightness: Brightness.light),
  );




}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: ('SplashScreeen'),
      home: MySplashScreen(title: 'SplashScreen'),
    );
  }
}

class MySplashScreen extends StatefulWidget {
  MySplashScreen({Key key, this.title}) : super(key: key);

  final String title;

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

class _MySplashScreenState extends State<MySplashScreen>
    with TickerProviderStateMixin {

  AnimationController fadeAnimationLogoController;
  AnimationController moveUpAnimationLogoController;
  Animation<double> fadeAnimationLogo;
  Animation<Offset> moveUpAnimationLogo;

  initState(){

super.initState();

fadeAnimationLogoController = AnimationController(duration: Duration(milliseconds: 1500),vsync: this);
moveUpAnimationLogoController = AnimationController(duration: Duration(milliseconds: 1000),vsync: this,);
fadeAnimationLogo =CurvedAnimation(parent: fadeAnimationLogoController, curve: Curves.easeIn);
moveUpAnimationLogo = Tween<Offset>(begin: Offset(0,0),end: Offset(0, -0.2),).animate(moveUpAnimationLogoController);

fadeAnimationLogoController.forward();


fadeAnimationLogoController.addListener((){

if(fadeAnimationLogo.status == AnimationStatus.completed){

  moveUpAnimationLogoController.forward();
}



});


  }




  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: FadeTransition (
        opacity: fadeAnimationLogo,
        child: SlideTransition(
          position: moveUpAnimationLogo,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Image(
              image: AssetImage('assets/images/csrhuntlogo.png'),
              height: 300,
              width: 300,
            ),
            Text(
              ('C S R  H U N T'),
              style: TextStyle(
                fontFamily: 'League Spartan',
                height: 1,
                fontSize: 34,
                color: Colors.black,
                decoration: TextDecoration.none,
              ),
            ),
            Text(
              ('FIND     PLAY     EARN'),
              style: TextStyle(
                fontFamily: 'Montserrat',
                height: 1,
                fontSize: 15,
                color: Colors.black,
                decoration: TextDecoration.none,
              ),
            ),
          ],
        ),
      ),
      ),
    );

  }

}

welcome.dart

import 'package:flutter/material.dart';


class Welcome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: ('WelcomeScreen'),
      home: WelcomeScreen(title: 'WelcomeScreen'),
    );
  }
}

class WelcomeScreen extends StatefulWidget {
  WelcomeScreen({Key key, this.title}) : super(key: key);

  final String title;

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

class _WelcomeScreenState extends State<WelcomeScreen>
    with SingleTickerProviderStateMixin {
  AnimationController fadeAnimationWelcomeController;
  Animation<double> fadeAnimationWelcome;

  @override
  void initState() {
    fadeAnimationWelcomeController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 2000),
    );
    fadeAnimationWelcome = CurvedAnimation(
        parent: fadeAnimationWelcomeController, curve: Curves.easeIn);
    super.initState();

    fadeAnimationWelcomeController.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: FadeTransition(
        opacity: fadeAnimationWelcome,
        child: Stack(
          children: <Widget>[
            Positioned(
              top: 590,
              left: 20,
              child: SizedBox(
                width: 350.0,
                height: 50.0,
                child: RaisedButton(
                  color: new Color.fromRGBO(255, 213, 0, 1.0),
                  textColor: Colors.black,
                  onPressed: () {},
                  child: Text(
                    'log in',
                    style: TextStyle(
                      height: 1,
                      fontSize: 25,
                      fontFamily: 'League Spartan',
                    ),
                  ),
                  shape: RoundedRectangleBorder(
                    borderRadius: new BorderRadius.circular(18.0),
                    side: BorderSide(color: Colors.transparent),
                  ),
                ),
              ),
            ),
            Positioned(
              bottom: 50,
              left: 20,
              child: SizedBox(
                width: 350.0,
                height: 50.0,
                child: RaisedButton(
                  color: new Color.fromRGBO(255, 213, 0, 1.0),
                  textColor: Colors.black,
                  onPressed: () {},
                  child: Text(
                    'Sign up',
                    style: TextStyle(
                      height: 1,
                      fontSize: 25,
                      fontFamily: 'League Spartan',
                    ),
                  ),
                  shape: RoundedRectangleBorder(
                    borderRadius: new BorderRadius.circular(18.0),
                    side: BorderSide(color: Colors.transparent),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

您可以在下面复制粘贴运行完整代码出于演示目的，我将动画持续时间减慢到5秒您可以设置bool showWelcome以控制何时显示SingUp按钮完成上移徽标动画后，在SignUp中显示setState按钮

代码段

moveUpAnimationLogoController.addListener(() {
      if (moveUpAnimationLogo.status == AnimationStatus.completed) {
        //moveUpAnimationLogoController.forward();
        setState(() {
          showWelcome = true;
        });
      }
    });

showWelcome
              ? Expanded(
                  child: WelcomeScreen(
                    title: "test",
                  ),
                )
              : Container(),    

工作演示

完整代码

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(MyApp());

  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarBrightness: Brightness.light),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: ('SplashScreeen'),
      home: MySplashScreen(title: 'SplashScreen'),
    );
  }
}

class MySplashScreen extends StatefulWidget {
  MySplashScreen({Key key, this.title}) : super(key: key);

  final String title;

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

class _MySplashScreenState extends State<MySplashScreen>
    with TickerProviderStateMixin {
  AnimationController fadeAnimationLogoController;
  AnimationController moveUpAnimationLogoController;
  Animation<double> fadeAnimationLogo;
  Animation<Offset> moveUpAnimationLogo;
  bool showWelcome = false;

  initState() {
    super.initState();

    fadeAnimationLogoController =
        AnimationController(duration: Duration(seconds: 5), vsync: this);
    moveUpAnimationLogoController = AnimationController(
      duration: Duration(seconds: 5),
      vsync: this,
    );
    fadeAnimationLogo = CurvedAnimation(
        parent: fadeAnimationLogoController, curve: Curves.easeIn);
    moveUpAnimationLogo = Tween<Offset>(
      begin: Offset(0, 0),
      end: Offset(0, -0.2),
    ).animate(moveUpAnimationLogoController);

    fadeAnimationLogoController.forward();

    fadeAnimationLogoController.addListener(() {
      if (fadeAnimationLogo.status == AnimationStatus.completed) {
        moveUpAnimationLogoController.forward();
      }
    });

    moveUpAnimationLogoController.addListener(() {
      if (moveUpAnimationLogo.status == AnimationStatus.completed) {
        //moveUpAnimationLogoController.forward();
        setState(() {
          showWelcome = true;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Container(
            color: Colors.white,
            child: FadeTransition(
              opacity: fadeAnimationLogo,
              child: SlideTransition(
                position: moveUpAnimationLogo,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Image(
                      image: AssetImage('assets/images/csrhuntlogo.png'),
                      height: 300,
                      width: 300,
                    ),
                    Text(
                      ('C S R  H U N T'),
                      style: TextStyle(
                        fontFamily: 'League Spartan',
                        height: 1,
                        fontSize: 34,
                        color: Colors.black,
                        decoration: TextDecoration.none,
                      ),
                    ),
                    Text(
                      ('FIND     PLAY     EARN'),
                      style: TextStyle(
                        fontFamily: 'Montserrat',
                        height: 1,
                        fontSize: 15,
                        color: Colors.black,
                        decoration: TextDecoration.none,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
          showWelcome
              ? Expanded(
                  child: WelcomeScreen(
                    title: "test",
                  ),
                )
              : Container(),
        ],
      ),
    );
  }
}

class WelcomeScreen extends StatefulWidget {
  WelcomeScreen({Key key, this.title}) : super(key: key);

  final String title;

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

class _WelcomeScreenState extends State<WelcomeScreen>
    with SingleTickerProviderStateMixin {
  AnimationController fadeAnimationWelcomeController;
  Animation<double> fadeAnimationWelcome;

  @override
  void initState() {
    fadeAnimationWelcomeController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 2000),
    );
    fadeAnimationWelcome = CurvedAnimation(
        parent: fadeAnimationWelcomeController, curve: Curves.easeIn);
    super.initState();

    fadeAnimationWelcomeController.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: FadeTransition(
        opacity: fadeAnimationWelcome,
        child: Stack(
          children: <Widget>[
            Positioned(
              top: 590,
              left: 20,
              child: SizedBox(
                width: 350.0,
                height: 50.0,
                child: RaisedButton(
                  color: new Color.fromRGBO(255, 213, 0, 1.0),
                  textColor: Colors.black,
                  onPressed: () {},
                  child: Text(
                    'log in',
                    style: TextStyle(
                      height: 1,
                      fontSize: 25,
                      fontFamily: 'League Spartan',
                    ),
                  ),
                  shape: RoundedRectangleBorder(
                    borderRadius: new BorderRadius.circular(18.0),
                    side: BorderSide(color: Colors.transparent),
                  ),
                ),
              ),
            ),
            Positioned(
              bottom: 50,
              left: 20,
              child: SizedBox(
                width: 350.0,
                height: 50.0,
                child: RaisedButton(
                  color: new Color.fromRGBO(255, 213, 0, 1.0),
                  textColor: Colors.black,
                  onPressed: () {},
                  child: Text(
                    'Sign up',
                    style: TextStyle(
                      height: 1,
                      fontSize: 25,
                      fontFamily: 'League Spartan',
                    ),
                  ),
                  shape: RoundedRectangleBorder(
                    borderRadius: new BorderRadius.circular(18.0),
                    side: BorderSide(color: Colors.transparent),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}