如何在 GetX 中使用 AnimationController 和 GetTickerProviderStateMixin

Question

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!

Answer 1

You are facing this problem because you are not telling the UI to explicitly draw (eg 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

Answer 2

In addition what I learned from @cavin-macwan 's answer, I want to mention some of my mistakes to anyone has same problem to undrestand better.

first of all, we need GetBiulder to track any update in controller and when you 'addListener' to your animation and update the controller with it, The GetBuilder will update the UI properly.

another mistake was Tween<double>(begin: 1, end: 0) that cause the width: of Container change just 1px so you can't see the changes that acually accure. change Tween<double>(begin: 1, end: 0) to Tween<double>(begin: 0, end: 100) or change the dimentions of Container from width: c.animation.value + 100, to width: c.animation.value * 100, .

No need controller.update(); in floatingActionButton because addListener do it after any AnimationController tickes in the controller.

Instead of using GetBuilder in floatingActionButton I prefer using extends GetView<TestAnimationController> becasue less boiler plate code.