An infinite Horizontal Flip animation ImageWidget Flutter

Question

My question is actually similar to a previous topic ( Link ), I tested but it doesn't work....

I want to acheive a simple screen with an infinite Horizontal Flip animation; I want, since the loading of my window, to have an image that makes an infinite horizantal roation using the folowing code:

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();
}
}

I executed the above code, but i got nothing (... just a white screen :/ )

Any suggestions to fix it? Thank you in advance

score 0 · Answer 1 · answered Apr 23 '21 at 10:46

Also, I tried another code:

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,
  );
  }
  }

When I excetue this code, the animation starts for once and for one direction.. it didn't run in a loop ...

An infinite Horizontal Flip animation ImageWidget Flutter

1 Answers1