I'm trying to code a custom component for a feature in my current project. Which is increasing the height of the container by dragging and when the tap on-screen is released it should go back to how it was. The issue is whenever I restart, the animation plays once, for a second time if I drag the component to increase its size it works but does not go back, so the animation is not playing. The codes are following ;

class _HomeViewState extends State<HomeView> with TickerProviderStateMixin {
  HomeViewController homeController = HomeViewController();

  late Animation<double> translateBetween;
  late AnimationController customAnimationController;

  @override
  void initState() {
    customAnimationController = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 2000));
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Obx(() {
            return Container(
              alignment: Alignment.topCenter,
              child: Column(
                children: [
                  GestureDetector(
                    onVerticalDragUpdate: (dragUpdateDetails) {
                      var tween = Tween(
                          begin: homeController.animatedHeight, end: 20.0);
                      translateBetween = tween.animate(CurvedAnimation(
                        parent: customAnimationController,
                        curve: Curves.bounceOut,
                      ))
                        ..addListener(() {
                          homeController.animatedHeight =
                              translateBetween.value;
                        });

                      if (homeController.animatedHeight >= 20) {
                        homeController.animatedHeight = homeController
                                .animatedHeight -
                            dragUpdateDetails.primaryDelta!.roundToDouble() /
                                6.5;
                      }
                      if (homeController.animatedHeight < 20) {
                        homeController.animatedHeight = 20;
                      }
                      if (homeController.animatedHeight >= 95) {
                        homeController.animatedHeight = 95;
                      }
                    },
                    onVerticalDragEnd: (dragEndDetails) {
                      customAnimationController.forward();
                    },
                    child: Column(
                      children: [
                        const Icon(Icons.arrow_upward_rounded),
                        SizedBox(
                          width: 20.w,
                          child: Divider(
                            color: Colors.black,
                            thickness: 0.3.w,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
              width: 100.w,
              height: homeController.animatedHeight.h,
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(5.w),
                      topRight: Radius.circular(5.w))),
            );
          })
        ],
      ),
    );
  }
}

I used getx controller for dynamically changing the size of the container.

class HomeViewController extends GetxController {
  final RxDouble _animatedHeight = 20.0.obs;
  double get animatedHeight => _animatedHeight.value;
  set animatedHeight(double value) => _animatedHeight.value = value;
}

GIF of issue

CodePudding user response：

You need to reset your animation to the beginning after it is completed.

Try this,

 onVerticalDragEnd: (dragEndDetails) {
   customAnimationController.reset();
   customAnimationController.forward();
 },