2

I want to do Horizontal flip animation for CircularAvatar widget.. like below animationenter image description here Like this i want to flip circularAvartar

I have tried

AnimationController _controller;

    AnimatedBuilder(
          animation: _controller,
          builder: (context, child){
            return Transform(
              transform: Matrix4.rotationY((1 - _controller.value ) * pi / 2),
            child: CircleAvatar(
            radius: PROFILE_PIC_RADIUS,
            backgroundImage: AssetImage(url),
           // backgroundColor: Colors.transparent,
            ),
            );
          }
        ),

_controller.forward();
_controller.reverse();

But it is not working like below animation, i want animation like flipping coin in horizontal direction.. Please give any solution

Navin Kumar
  • 3,393
  • 3
  • 21
  • 46

1 Answers1

5

You could use library flip_card.

Add this to pubspec.yaml :

dependencies:
  flip_card: ^0.4.4

Then run

flutter packages get

To use :

import 'package:flip_card/flip_card.dart';

FlipCard(
  direction: FlipDirection.HORIZONTAL, // default
  front: Container(
        child: Text('Front'),
    ),
    back: Container(
        child: Text('Back'),
    ),
);
Augustin R
  • 7,089
  • 3
  • 26
  • 54
Aamil Silawat
  • 7,735
  • 3
  • 19
  • 37