AnimatedCrossFade with Fade Out then Fade In

user_10697321 0
Viewed 1081

AnimatedCrossFade is one of my favourite widgets using Flutter, it's slick and really convenient.

I understand that this contradicts what the widget is supposed to be used for but I was wondering if there was a way to tweak it so that it doesn't cross-fade between it's children but instead fades out one of them and THEN fades in the other one.

If it's not possible to do this using this widget what would be the best way to do this?

flutter-animation dart flutter fade
1 Answers

Found the solution I was looking for.

"Something like this works great:

class LinearHalfCurve extends Curve {
   @override
   double transformInternal(double t) {
      if(t < 0.5) {
        return t*2; // goes from 0-1.0 when t is 0-0.5
      }
      return 1.0; // cap to 1.0 when t is above 0.5
    }
}

then in your AnimatedCrossFade set:

    firstCurve: LinearHalfCurve(),
    secondCurve: LinearHalfCurve().flipped,

If you want more fancy curves, you could keep an internal curve of that type in your custom curve class and pass t*2 into that one in the first return."

user_106973210
Related