how to give a curve effect to a specific range from animation value - flutter

Question

I need to divide the range of animation value to a smaller ranges like this simple example:

class TextAnimation extends StatefulWidget {
  const TextAnimation({Key? key}) : super(key: key);

  @override
  State<TextAnimation> createState() => _TextAnimationState();
}

class _TextAnimationState extends State<TextAnimation>
    with SingleTickerProviderStateMixin {
  late AnimationController anController;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    anController = AnimationController(
        vsync: this,
        duration: Duration(seconds: 5),
        reverseDuration: Duration(seconds: 5));
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    anController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedBuilder(
          animation: anController,
          builder: (context, child) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                SizedBox(
                  width: double.infinity,
                ),
                Container(
                  width: 300 *
                      Tween(begin: 0.0, end: 1.0)
                          .animate(CurvedAnimation(
                              parent: anController,
                              curve:
                                 Curves.fastOutSlowIn))
                          .value,
                  height: 100,
                  color: Colors.red,
                ),
                Container(
                    width: 300 *
                        (Tween(begin: 0.0, end: 1.0) .animate(CurvedAnimation(
                                parent: anController, curve: Curves.fastOutSlowIn))
                            .value.clamp(0.5, 1)),
                    height: 100,
                    color: Colors.blue),
                InkWell(
                    onTap: () {
                      anController.forward();
                    },
                    child: Text(
                      'Start',
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 20,
                      ),
                    ))
              ],
            );
          }),
    );
  }
}

the second container need to start the animation from the half of the range to the end...

the problem is, the curve effect is lost in this range ,I need to give this range (0.5-1.0) its own curve , start fast in 0.5 and end with slow motion.

is there a way to do it without using another animation controller to drive this range?

note : without AnimatedContainer the code above is just a simple example for the problem.

Check Interval class. https://api.flutter.dev/flutter/animation/Interval-class.html — Afridi Kayal, Nov 08 '22 at 05:29

score 0 · Answer 1 · answered Mar 10 '23 at 08:14

To get it working I have extend CurvedAnimation class and adjusted it's value to the range I need:

import 'package:flutter/animation.dart';

class MyCurvedAnimation extends CurvedAnimation {
  final double min;
  final double max;

  MyCurvedAnimation(
      {required super.parent,
      required super.curve,
      super.reverseCurve,
      required this.min,
      required this.max});

  @override
  double get value {
    double valueFromParent = super.value;
    double range = max - min;

    return min + valueFromParent * range;
  }
}

To use it in your widget for e.g. rotation:

@override
Widget build(BuildContext context) {
    AnimationController _controller = AnimationController(
        duration: const Duration(milliseconds: 3000),
        vsync: this,
    );

    Animation<double> _rangedTween = MyCurvedAnimation(
        parent: _controller,
        curve: Curves.easeInOut,
        reverseCurve: Curves.easeInOut,
        min: 0.0,
        max: 0.1);

    return RotationTransition(
        turns: _rangedTween,
        child: Text("ROTATE"));
}

how to give a curve effect to a specific range from animation value - flutter

1 Answers1