flutter 页面加载动画_flutter - 如何在Flutter上的页面加载时自动启动动画？ - 堆栈内存溢出...
我正在尝试在我的应用程序中实现启动屏幕页面。 显示页面时，我需要自动启动动画，但实际的实现无法正常工作。 动画不在打开页面时执行。
import 'package:flutter/material.dart';
import 'package:coin_flip_app/home_page.dart';
import 'package:flutter_svg/flutter_svg.dart';
class SplashScreenPage extends StatefulWidget {
SplashScreenPage({Key key}) : super(key: key);
@override
_SplashScreenPageState createState() => _SplashScreenPageState();
}
class _SplashScreenPageState extends State
with SingleTickerProviderStateMixin {
AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this, duration: Duration(milliseconds: 250), value: 1);
Future.delayed(Duration(seconds: 4), () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => HomePage(),
));
});
_controller.forward().then((f) {
_controller.reverse();
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: const Color.fromARGB(255, 48, 48, 48),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
RotationTransition(
turns: Tween(begin: 0.0, end: 1.0).animate(_controller),
child: SizedBox(
child: SvgPicture.asset('assets/app_logo.svg'),
height: 150,
),
),
const Padding(
padding: const EdgeInsets.only(top: 20.0),
child: Text(
"My App",
style: TextStyle(
color: Colors.white,
fontSize: 32,
),
textAlign: TextAlign.center,
),
)
],
),
),
);
}
}
如果我尝试使用带有GestureDetector的onTap()事件来调用动画，那么它将起作用。 但是我需要它在没有用户输入的情况下自动启动并完成。
更新＃1
这是更新的代码。 它也不起作用。 它仅在取消注释第一个// await Future.delayed(Duration(seconds: 1)); 但我认为这只是解决方法，而不是最终解决方案
import 'package:flutter/material.dart';
import 'package:coin_flip_app/home_page.dart';
import 'package:flutter_svg/flutter_svg.dart';
class SplashScreenPage extends StatefulWidget {
SplashScreenPage({Key key}) : super(key: key);
@override
_SplashScreenPageState createState() => _SplashScreenPageState();
}
class _SplashScreenPageState extends State
with SingleTickerProviderStateMixin {
AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this, duration: Duration(milliseconds: 250), value: 1);
WidgetsBinding.instance.addPostFrameCallback(
(_) => loopOnce(context)); //i add this to access the context safely.
}
Future loopOnce(BuildContext context) async {
// await Future.delayed(Duration(seconds: 1));
await _controller.forward();
await _controller.reverse();
//we can add duration here
await Future.delayed(Duration(seconds: 1));
Navigator.of(context).push(MaterialPageRoute(
// since this triggers when the animation is done, no duration is needed
builder: (context) => HomePage(),
));
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: const Color.fromARGB(255, 48, 48, 48),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
RotationTransition(
turns: _controller,
child: SizedBox(
child: SvgPicture.asset('assets/app_logo.svg'),
height: 150,
),
),
const Padding(
padding: const EdgeInsets.only(top: 20.0),
child: Text(
"My App",
style: TextStyle(
color: Colors.white,
fontSize: 32,
),
textAlign: TextAlign.center,
),
)
],
),
),
);
}
}