[英]How to Pass Widget and Functions of That Widget To main.dart When Completing an Animation?
I'm kinda new to Flutter.我对 Flutter 有点陌生。 In main.dart file I have a logo and when I run the application, the logo fades into the screen and go to the top of the screen.
在 main.dart 文件中,我有一个徽标,当我运行应用程序时,徽标会淡入屏幕并转到屏幕顶部。 I have used two animation controllers for that.
我为此使用了两个动画控制器。
In welcome.dart file there is a code for two buttons (login and Signup) one animation controller for fade in animation to that buttons.在welcome.dart 文件中有两个按钮(登录和注册)的代码,一个动画控制器用于淡入该按钮的动画。
I need to show that when logo completes the animations, show the buttons on the screen with fade in animation.我需要表明当徽标完成动画时,在屏幕上显示带有淡入动画的按钮。
What I have tried is put adListener to the logo animation and when logo animation completes, start the button animations.我尝试过的是将 adListener 放在徽标动画中,当徽标动画完成时,启动按钮动画。 But it's not working.
但它不起作用。
Here's my code -这是我的代码 -
main.dart 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欢迎.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),
),
),
),
),
],
),
),
);
}
}
You can copy paste run full code below您可以在下面复制粘贴运行完整代码
For demo purpose, I slow down animation duration to 5 seconds出于演示目的,我将动画持续时间减慢到 5 秒
You can set a bool
showWelcome
to control when to show SingUp
button您可以设置
bool
showWelcome
来控制何时显示SingUp
按钮
When Move Up Logo animation complete show SignUp
button with setState
当 Move Up Logo 动画完成时,显示带有
setState
SignUp
按钮
code snippet代码片段
moveUpAnimationLogoController.addListener(() {
if (moveUpAnimationLogo.status == AnimationStatus.completed) {
//moveUpAnimationLogoController.forward();
setState(() {
showWelcome = true;
});
}
});
showWelcome
? Expanded(
child: WelcomeScreen(
title: "test",
),
)
: Container(),
working demo工作演示
full code完整代码
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),
),
),
),
),
],
),
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.