listen for the position changes inside Animation flutter

413

Your exact requirement is unclear. Depending on what you mean by 'do something to a target widget' you might need to choose a different method. However, if you'd like to add a listener to an animation or react to the current animation value you are better off with a AnimatedBuilder. I'm including a basic example that could help with your case.

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

  @override
  State<MyAnimatedWidget> createState() => _MyAnimatedWidgetState();
}

class _MyAnimatedWidgetState extends State<MyAnimatedWidget>
    with TickerProviderStateMixin {
  late final AnimationController _controller;
  late Animation _animation;
  GlobalKey globalKey = GlobalKey();

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 1000),
    );
    _controller.addListener(() {
      //also possible to listen for changes with a listener
    });
    _animation = CurveTween(curve: Curves.easeOut).animate(_controller);
    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
        animation: _animation,
        builder: (context, child) {
          return InkWell(
            onTap: () {},
            child: Container(
                width: 200,
                height: _containerHeightBuilder(_controller.value),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    const SizedBox(
                      height: 10,
                    ),
                    //the target widget
                    SizedBox(
                      //or do something here with the current animation value
                      key: globalKey,
                    )
                  ],
                )),
          );
        });
  }

  double _containerHeightBuilder(double animationValue) {
    const double containerAnimationTarget = 60;
    const double containerBaseHeight = 40;
    const double thresholdHeight = 70;

    double currentHeight =
        containerBaseHeight + (containerAnimationTarget * animationValue);

    if (currentHeight == thresholdHeight) {
      //do something here
    }
    return currentHeight;
  }
}

Share:
413
Jaafar Melhem
Author by

Jaafar Melhem

Updated on January 04, 2023

Comments

  • Jaafar Melhem
    Jaafar Melhem over 1 year

    Is there away to listen for the changes of the child widget positions when the animation currently running (not completed or canceled)? for example we have this variables:

    GlobalKey globalKey= GlobalKey();
    bool isAnimated =false;
    

    I need to listen for the position of the target widget inside this AnimatedContainer:

     InkWell(
      onTap:() => setState(() {isAnimated=!isAnimated};) ,
    
      child:   AnimatedContainer(
      duration: Duration(milliseconds: 1000),
      width: 200,
      height: isAnimated?100:40,
      child: Column(
     mainAxisAlignment: MainAxisAlignment.end,
    children: [
      
        SizedBox(height: 10,),
      
        //the target widget
        SizedBox(
          key: globalKey,
        )
      ],)
      ),
    )
    

    when the height of the AnimatedContainer reach 70 for example, it confirm me based on the position of the target widget to do some thing.