How to use AnimationController in GetX with GetTickerProviderStateMixin-CodePudding

I want to impeliment animation in flutter with GetxController and GetView to controll my animation in every widget I want and this is my Getx Controller:

class TestAnimationController extends GetxController
    with GetTickerProviderStateMixin {
  late AnimationController anim;
  late Animation<double> animation;
  @override
  void onInit() {
    super.onInit();
    initAnimation();
    anim.forward();
  }

  void initAnimation() {
    anim = AnimationController(
      duration: Duration(seconds: 1),
      vsync: this,
    );
    animation = Tween<double>(begin: 1, end: 0).animate(
      CurvedAnimation(
        parent: anim,
        curve: Interval(0.0, 1.0, curve: Curves.linear),
      ),
    );
  }
}

and my GetView class is:

class TestAnimationHome extends GetView<TestAnimationController> {
  const TestAnimationHome({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: controller.animation.value   100,
          height: controller.animation.value   100,
          color: Colors.amber,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          controller.anim.forward();
        },
        child: Icon(
          Icons.play_circle,
        ),
      ),
    );
  }
}

I google a lot and do every step that mentioned but my animation doesn't start and I don't know where I did wrong!

CodePudding user response：

You are facing this problem because you are not telling the UI to explicitly draw (e.g setstate). You can see the below implementation in GetX.

I have used addListener function along with GetBuilder in the UI part

class TestAnimationController extends GetxController
    with GetTickerProviderStateMixin {
  late AnimationController anim;
  late Animation<double> animation;
  @override
  void onInit() {
    initAnimation();
    anim.forward();
    super.onInit();
  }

  void initAnimation() {
    anim = AnimationController(
      duration: Duration(seconds: 1),
      vsync: this,
    );
    animation = Tween<double>(begin: 10, end: 100).animate(
      CurvedAnimation(
        parent: anim,
        curve: Interval(0.0, 1.0, curve: Curves.linear),
      ),
    )..addListener(() {
        update();
      });
  }
}

class TestAnimationHome extends StatelessWidget {
  const TestAnimationHome({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GetBuilder<TestAnimationController>(
        init: TestAnimationController(),
        initState: (_) {},
        builder: (controller) {
          return Center(
            child: Container(
              width: controller.animation.value   100,
              height: controller.animation.value   100,
              color: Colors.amber,
            ),
          );
        },
      ),
      floatingActionButton: GetBuilder<TestAnimationController>(
        builder: (controller) {
          return FloatingActionButton(
            onPressed: () {
              controller.anim.forward();
              controller.update();
            },
            child: const Icon(
              Icons.play_circle,
            ),
          );
        },
      ),
    );
  }
}

Hope it answers your question