3

I'm trying GetX for my new project and tried to use AnimationController which is inspired this comment. Everything works fine with default value for Tween -> blur & spread & AnimationController -> duration.

What I'm doing:

1: Created an widget with corresponding controller (controller is binded through initialBinding of GetMaterialApp).

GetMaterialApp(
  ...
  initialBinding: AnimationBinding()
  ...
);

class AnimationBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut<AnimationController>(
      () => AnimationController(),
    );
  }
}

class CustomAnimatedWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetBuilder<LogoAnimationController>(
      builder: (_) {
        return Container(
          width: 150,
          height: 150,
          child: Text('for demo only, originally its not text widget'),
          ...
          remaining code that uses `_.animation.value`
          ...
          ),
        );
      },
    );
  }
}

class AnimationController extends GetxController with SingleGetTickerProviderMixin {
  Animation animation;
  AnimationController _animationController;

  @override
  void onInit() {
    super.onInit();

    _animationController = AnimationController(
        vsync: this, duration: Duration(seconds: 2));
    _animationController.repeat(reverse: true);

    animation = Tween(begin: 2.0, end: 15.0)
        .animate(_animationController)
          ..addListener(() => update());
  }

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

  @override
  void onClose() {
    super.onClose();

    _animationController.dispose();
  }
}

2: Used this widget inside view.

child: CustomAnimatedWidget();

Till now, everything is working fine. But I want to update blur, spread & duration, with: updating CustomAnimatedWidget:

final double blur;
  final double spread;
  final int duration;
  CustomAnimatedWidget({this.blur, this.spread, this.duration});

  ...
      builder: (_) => ...
      ...
      initState: (s) {
        _.blur.value = blur;
        _.spread.value = spread;
        _.duration.value = duration;
      },
  ...

updating AnimationController:

Rx<double> blur = 2.0.obs;
  Rx<double> spread = 15.0.obs;
  Rx<int> duration = 2.obs;

and using/calling the CustomAnimationWidget using:

child: CustomAnimatedWidget(duration: 4, blur: 2, spread: 10);

but don't know how to use it with _animationController & _animation because they are called in onInit.

Please share your solutions, thanks.

Anu Tig3r
  • 143
  • 1
  • 7
  • Would you can share full code of your solution to change it and solve? – Hossein Hadi May 08 '21 at 09:09
  • @HosseinHadi I already posted the code that is required to understand and answer. Please let me know which part is not missing... – Anu Tig3r May 08 '21 at 13:46
  • @HosseinHadi by the way, I moved to `StatefulWidget` from `GetxController` and get the actual result – Anu Tig3r May 08 '21 at 13:47
  • I've worked with GetX and do all animations with it , so it is possible to do that . But the question is some obfuscated for me on many places. So if you you want a good answer please make a minimal code that regenerate what you want and share that , I mean share the view fully , and controller fully , and usage of them fully ... – Hossein Hadi May 09 '21 at 15:29
  • But up to now , as it seems , you are using 'Rx' values with GetBuilder . This is not a good practice and you would not be able to get the answer . – Hossein Hadi May 09 '21 at 15:33
  • You need not to share all of your code or all of your application as well ! But this is a common practice in stack overflow to share a minimal code that regenerates the issue. There is , always for me , some small changes in working with GetX that solved my problem. – Hossein Hadi May 09 '21 at 15:39
  • @HosseinHadi Please let me know which part is not understandable or missing... – Anu Tig3r May 10 '21 at 05:22
  • Why are you using `Rx` ? Is there any `Obx` or `GetX` widget in your code ? You wrote `remaining code that uses _.animation.value` in the `GetBuilder` (while the `.value` must be used in the `Obx` or `GetX` widget); this means that you are misinterpreting and confusing reactive vs not-reactive state management. – Hossein Hadi May 10 '21 at 17:18
  • You must change any `Rx` to `double` itself (and other `Rx`s to themselves type) to work properly in `GetBuilder`. – Hossein Hadi May 10 '21 at 17:19

1 Answers1

2

I Extended GetxController with GetTickerProviderStateMixin and then make a AnimationController and CurvedAnimation by code below:

late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 2),
    vsync: this,
  )..repeat(reverse: false);

  late final Animation<double> animation = CurvedAnimation(
    parent: _controller,
    curve: Curves.ease,
  );

After that i just created object of my CustomGetxController like this final _customController = Get.put(CustomGetxController()); then i called it like this:

 FadeTransition(
            opacity: driverController.animation,
            child:const Text('My Flashing Text')
          ),
Syed Daniyal Ali
  • 359
  • 2
  • 7