Flutter how do I convert the animation value range?

Question

I want to make my own CrossFadeTransition. The implementation I can think of is to get an animation, two child widgets and based on the value of the animation, fade in one child and fade out the other child. But in order to fade in and out them at the same time, I need a reversed value of the animation. Because the incoming animation value can be in any range, I need some way to convert them to my own range value. For example, if I pass the animation ranged from 100.0 to 200.0, I want to convert the value to 0.0 to 1.0 so that I can ensure the maximum value of animation is 1.0. By doing so, I can get a reversed value of the animation. Is there a way to convert the animation value?

class CrossFadeTransition extends AnimatedWidget {
  const CrossFadeTransition({
    Key? key,
    required Animation<double> opacity,
    required this.outgoingChild,
    required this.ingoingChild,
  }) : super(key: key, listenable: opacity);

  final Widget outgoingChild;
  final Widget ingoingChild;

  Animation<double> get opacity => listenable as Animation<double>;

  @override
  Widget build(BuildContext context) {
    final double outgoingValue = 1.0 - opacity.value; // There's no guarantee that 1.0 would be the max value for the animation.
    final double ingoingValue = opacity.value;
    return Stack(
      fit: StackFit.expand,
      children: [
        FadeTransition(
          opacity: opacity,
          child: outgoingChild,
        ),
        FadeTransition(
          opacity: opacity,
          child: ingoingChild,
        ),
      ],
    );
  }
}

score 1 · Answer 1 · answered Mar 07 '21 at 10:22

If I understood correctly,

you are passing opacity animation value from 100 to 200 and you have complete control to call the constructor with additional value as well

like min: 100 and max: 200 pass those with constructor and create a helper method on widget to convert this range from 100.0-200.0 to 0.0-1.0

sample function Reference

double get outgoingValue(double OldValue){
    return (((OldValue - OldMin) * (NewMax - NewMin)) / (OldMax - OldMin)) + NewMin;

}

NewValue = (((OldValue - OldMin) * (NewMax - NewMin)) / (OldMax - OldMin)) + NewMin

e.g. if current op: 200

NewValue = (200 - 100) * (1 - 0) / (200 - 100) + 0.0 
         = 1

e.g. if current op: 100

NewValue = (100 - 100) * (1 - 0) / (200 - 100) + 0.0 
         = 0

e.g. if current op: 150

NewValue = (150 - 100) * (1 - 0) / (200 - 100) + 0.0 
         = 0.5

Flutter how do I convert the animation value range?

1 Answers1