Flutter animation controller 使用 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.