0

I want to make a ball with a number written roll to the left side, and I want to make the ball stop when it reaches at the left end. I tried to find a listener but I couldn't, and I didn't manage to find any way to notify when the ball hits left position 0. How can I make it?

I don't think this code can help but the ball code is like this:

Container(
  width: Get.width,
  height: 90,
  padding: const EdgeInsets.only(top: 10, bottom: 10),
  decoration: const BoxDecoration(
      border: Border(top: BorderSide(color: Colors.black, width: 1), bottom: BorderSide(color: Colors.black, width: 1))
  ),
  child: Stack(
      alignment: Alignment.center,
      children: [
        AnimatedBuilder(
            animation: controller.firstAnimationController,
            builder: (context, widget) {
              return AnimatedPositioned(
                  duration: const Duration(milliseconds: 1000),
                  left: !controller.isFirstStarted.value ? Get.width : 0,
                  child: Transform.rotate(
                      angle: -controller.firstAnimationController.value * 6.3,
                      child: Container(
                          width: 60,
                          height: 60,
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                            border: Border.all(color: Colors.black, width: 1),
                            borderRadius: BorderRadius.circular(30),
                            color: Colors.white,
                          ),
                          child: const Text('37', style: TextStyle(fontSize: 20)
                          ))
                  )
              );
            }
        ),
      ]
  ),
);

and controller:

  late AnimationController firstAnimationController;
  RxBool isFirstStarted = false.obs;

  @override
  void onInit() async {
    super.onInit();
    firstAnimationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 1500),
    );
    firstAnimationController.repeat();
  }

  @override
  void dispose() {
    super.dispose();
    firstAnimationController.dispose();
  }
Md. Yeasin Sheikh
  • 54,221
  • 7
  • 29
  • 56
dfassf
  • 142
  • 10

1 Answers1

0

You can addListener to the animationController. and listen the changes during animation changes.

 @override
  void initState() {
    super.initState();
    firstAnimationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 1500),
    )..addListener(() {
        if (firstAnimationController.value == .3) { // 0-1
          firstAnimationController.stop();
        }
      });

    firstAnimationController.forward();
  }

Not using getx here.

Md. Yeasin Sheikh
  • 54,221
  • 7
  • 29
  • 56
  • cool,I tried it too, but I can't get the position of AnimatedPositioned. currently the animation is attached to the rotate animation, so it only handles rotation effect. what I want to do is when 'left' value of AnimatedPositioned reaches 0, the rotation also stops – dfassf Feb 01 '23 at 00:20
  • Perhaps you just want `firstAnimationController.forward();` instead of `firstAnimationController.repeat();` also you can use status listener. – Md. Yeasin Sheikh Feb 01 '23 at 00:22
  • forward seems to only repeat once. I need it to keep rolling until it reaches a specific position value and stop it. listener couldn't get the position information so I couldn't do anything – dfassf Feb 02 '23 at 12:09
  • can you include full widget by removing other dependencies that can be tested on dartPad – Md. Yeasin Sheikh Feb 02 '23 at 21:47