Flutter animation controller using GetX

Question

I recently switch to GetX and want to init animation controller in GetxController and can access it in GetView. When app started animation gets to go without any problem but can not forward it again.

class SplashController extends GetxController with GetTickerProviderStateMixin {
  var h = 0.0.obs;
  late AnimationController ac;
  late Animation animation;

  Future<void> initAnimation() async {
    ac = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    );
    animation = Tween(begin: 0.0, end: 1.0).animate(ac);
  }

  forwardAnimationFromZero() {
    ac.forward(from: 0);
  }

  @override
  void onInit() {
    super.onInit();
    initAnimation();
    forwardAnimationFromZero();
    ac.addListener(() {
      h.value = animation.value;
    });
  }

  @override
  void onReady() {
    super.onReady();
    forwardAnimationFromZero();
  }

  @override
  void onClose() {
    super.onClose();
    ac.dispose();
  }
}

As you see I extended GetxController with GetTickerProviderStateMixin but The ticker not work properly. I define var h = 0.0.obs; as observable so can access in screen and without it animation does not tick!

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

  @override
  Widget build(BuildContext context) {
    var c = Get.put(SplashController());
    return Scaffold(
      body: Column(
        children: [
          Container(
            color: Colors.amber,
            width: (controller.animation.value * 100) + 100,
            height: (controller.animation.value * 100) + 100,
            child: Center(
              child: Text(
                controller.animation.value.toString(),
              ),
            ),
          )
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          c.ac.forward(from: 0);
        },
        child: Icon(Icons.refresh),
      ),
      appBar: AppBar(
        title: const Text('Splash Page'),
      ),
    );
  }
}

in this view when started animation does not react but when I hot relaod i see it in end state. when change the Container widget to:

          Obx(
            () => Container(
              color: Colors.amber,
              width: (controller.animation.value * 100) + 100,
              height: (controller.h.value * 100) + 100,
              child: Center(
                child: Text(
                  controller.animation.value.toString(),
                ),
              ),
            ),
          ),

respet to ac.addListener(() {h.value = animation.value;}); animation play at the beginning but can't forward again from zero when I press floatingActionButton. What I want:

1. Why animation does not paly at the beginning without h observable?
2. How can I access animation controller functions in the view?
3. When some animation controller complete I want to start another animation controller.

Answer 1

Use AnimatedContainer in this part. Because writing too long will slow down your work as the code grows.

Controller

class SplashController extends GetxController {
  var h = 40.0.obs;
}

Page

class SplashPage extends GetView<SplashController> {
  var click = true;
  @override
  Widget build(BuildContext context) {
    return GetBuilder<SplashController>(
      init: Get.put(SplashController()),
      builder: (cnt) {
        return Center(
          child: PageView(
            children: <Widget>[
              Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  ElevatedButton(
                    child: Text('Animate!'),
                    onPressed: () {
                      click
                          ? cnt.h.value = 250.0
                          : cnt.h.value = 50.0;
                      click = !click;
                    },
                  ),
                  Obx(
                    () => AnimatedContainer(
                      duration: Duration(seconds: 1),
                      width: cnt.h.value,
                      height: 40,
                      color: Colors.red,
                    ),
                  ),
                ],
              )
            ],
          ),
        );
      }
    );
  }
}

The following code is used to update your code when it is a StatelessWidget.

Obx(
    () => AnimatedContainer(
       duration: Duration(seconds: 1),
       width: cnt.h.value,
       height: 40,
       color: Colors.red,
       ),
   ),

Each time you click the button, you will be able to zoom in and out.