无限水平翻转动画ImageWidget Flutter

Question

我的问题实际上与之前的主题(链接(相似，我测试过，但不起作用。。。。

我想获得一个简单的屏幕与无限水平翻转动画；我想，自从我的窗口加载以来，有一个使用以下代码进行无限水平咆哮的图像：

import 'dart:math';
import 'package:flip_card/flip_card.dart';
import 'package:flutter/material.dart';
class FlipCardPage extends StatefulWidget {
@override
_FlipCardPageState createState() => _FlipCardPageState();
}
class _FlipCardPageState extends State<FlipCardPage>
with SingleTickerProviderStateMixin {
AnimationController animationController;
@override
void initState() {
super.initState();
animationController = new AnimationController(
vsync: this,
duration: new Duration(seconds: 7),
);
animationController.repeat();
}
@override
Widget build(BuildContext context) {
return   AnimatedBuilder(
animation: animationController,
builder: (context, child){
return Transform(
transform: Matrix4.rotationY((1 - animationController.value ) * pi / 2),
child: FlipCard(
direction: FlipDirection.HORIZONTAL, // default
front: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("pictures/css.png"),
fit: BoxFit.scaleDown,
),
shape: BoxShape.rectangle,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[],
),
),
back: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("pictures/css.png"),
fit: BoxFit.scaleDown,
),
shape: BoxShape.rectangle,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[],
),
),
),
);
}
);
// _controller.forward();
// _controller.reverse();
}
}

我执行了上面的代码，但我什么都没得到(…只是一个白色屏幕：/(

有什么建议吗？提前感谢

Answer 1

此外，我尝试了另一个代码：

import 'dart:math';
import 'package:flutter/material.dart';
class FlipCardPage2 extends StatefulWidget {
@override
_FlipCardPage2State createState() => _FlipCardPage2State();
}
class _FlipCardPage2State extends State<FlipCardPage2> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flip Animation'),
),
body: Container(
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
FlipCard(),
],
),
),
);
}
}
class FlipCard extends StatefulWidget {
@override
_FlipCardState createState() => _FlipCardState();
}
class _FlipCardState extends State<FlipCard>
with SingleTickerProviderStateMixin {
AnimationController animationController;
bool _isFront = true;
@override
void initState() {
super.initState();
animationController = new AnimationController(
vsync: this,
duration: new Duration(seconds: 4),
);
// print("Inside initState!");
animationController.addListener(() {
setState(() {
if (animationController.status == AnimationStatus.completed) {
//  print("Status: completed");
animationController.repeat();
//  print("After repeat");
setState(() {
_isFront = !_isFront;
});

}
else if (animationController.status == AnimationStatus.dismissed){
// print("Status: dismisses");
animationController.forward();
setState(() {
_isFront = !_isFront;
});
}
});
});
animationController.forward();
}
Widget _frontCard() {
return Container(
key: ValueKey(true),
color: Colors.orangeAccent,
width: 200,
height: 200,
child: Center(
child: Text(
'Front',
style: TextStyle(color: Colors.white, fontSize: 48),
)),
);
}
Widget _rearCard() {
return Container(
key: ValueKey(false),
color: Colors.orange,
width: 200,
height: 200,
child: Center(
child: Text(
'Rear',
style: TextStyle(color: Colors.white, fontSize: 48),
)),
);
}
@override
Widget build(BuildContext context) {
return AnimatedSwitcher(
child: _isFront ? _frontCard() : _rearCard(),
duration: Duration(seconds: 1),
transitionBuilder: (Widget child, Animation<double> animation) {
final rotate = Tween(begin: pi, end: 0.0).animate(animation);
return AnimatedBuilder(
animation: rotate,
child: child,
builder: (BuildContext context, Widget child) {
final angle = (ValueKey(_isFront) != widget.key)
? min(rotate.value, pi / 2)
: rotate.value;
return Transform(
transform: Matrix4.rotationY(angle),
child: child,
alignment: Alignment.center,
);
});
},
switchInCurve: Curves.easeInCubic,
switchOutCurve: Curves.easeOutCubic,
);
}
}

当我完成这段代码时，动画只开始一次，只开始一个方向。。它没有循环运行。。。