AnimatedCrossFade with Fade Out then Fade In

Question

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?

Answer 1

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."