一个无限的水平翻转动画 ImageWidget Flutter

如何解决一个无限的水平翻转动画 ImageWidget Flutter

我的问题实际上类似于之前的主题 ( Link )，我测试过但它不起作用....

我想实现一个带有无限水平翻转动画的简单屏幕；我想要，因为我的窗口加载，有一个使用以下代码进行无限水平旋转的图像：

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"),);
    }
 );
// _controller.forward();
// _controller.reverse();
}
}

我执行了上面的代码，但我什么也没得到（...只是一个白屏：/）

有什么修复建议吗？ 提前致谢

解决方法

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

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,child: Center(
      child: Text(
        'Rear',);
 }
 @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),alignment: Alignment.center,);
        });
  },switchInCurve: Curves.easeInCubic,switchOutCurve: Curves.easeOutCubic,);
  }
  }

当我执行此代码时，动画开始一次和一个方向......它没有循环运行......