getx icon indicating copy to clipboard operation
getx copied to clipboard

Flutter animation controller using GetX

Open tofiqsp opened this issue 2 years ago • 0 comments

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.

flutter doctor Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel stable, 3.0.3, on Microsoft Windows [Version 10.0.19044.1826], locale en-US) Checking Android licenses is taking an unexpectedly long time...[√] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1) [√] Chrome - develop for the web [√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.2.0) [√] Android Studio (version 2021.2) [√] VS Code (version 1.69.2) [√] Connected device (4 available) [√] HTTP Host Availability

• No issues found!

tofiqsp avatar Jul 26 '22 16:07 tofiqsp