CODEWITHSUNDEEP
dartflutter
user8187389
user8187389

Reputation:

How to customize AnimatedCrossFade with a flip animation in Flutter?

I want to switch between 2 card widgets on a button press. I found AnimatedCrossFade which does exactly the same but the switch animation is a fading one. I want to make a flip animation when it switches. How do I do that?

Upvotes: 2

Views: 1345

Answers (1)

Lucas
Lucas

Reputation: 2852

Something like:

...
AnimatedSwitcher(
  duration: Duration(milliseconds: 400),
  transitionBuilder: (child, animation) => SizeTransition(
    sizeFactor: animation.drive(CurveTween(curve: 
       //these intervals might be wrong, but the point is
       //you can differentiate what is transitioning using the key
       child.key == Key("flipped")
         ? Interval(0.5, 1.0)
         : Interval(0.0, 0.0)
    )),
    child: child,
  ),
  child: myState.isButtonFlipped
    ? FlippedWidget(
      key: Key("flipped"),
    )
    : MyButton(
      key: Key("notFlipped"),
    ),
),

If you want a different transition, look at the source for SizeTransition and see if you can make your own FlipTransition in a similar manner that uses Transform.

Upvotes: 3

Related Questions