CODEWITHSUNDEEP
flutterdart
Mahmoud Al-Haroon
Mahmoud Al-Haroon

Reputation: 2449

How to use AnimationController in GetX instead of using StatefulWidget and SingleTickerProviderStateMixin

I have an initState() method and contains AnimationController as the below code:

_controller = AnimationController(
      vsync: this,
      duration: const Duration(
        milliseconds: 2500,
      ),
    );

for example I want to use as the below way:

import 'package:get/get.dart';
import 'package:flutter/material.dart';

class ControllerViewModel extends GetxController {
  AnimationController _controller;
  @override
  void onInit() {
    // TODO: implement onInit
    super.onInit();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(
        milliseconds: 2500,
      ),
    );
  }
}

but of course I found an error with The argument type 'ControllerViewModel' can't be assigned to the parameter type 'TickerProvider'.

So there's a way to use this AnimationController in GetX state management way?

Upvotes: 11

Views: 9672

Answers (2)

Mahmoud Al-Haroon
Mahmoud Al-Haroon

Reputation: 2449

I found a solution just add withGetSingleTickerProviderStateMixin to be the full code as the below one:

import 'package:get/get.dart';
import 'package:flutter/material.dart';

class ControllerViewModel extends GetxController with GetSingleTickerProviderStateMixin {
  AnimationController _controller;
  @override
  void onInit() {
    // TODO: implement onInit
    super.onInit();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(
        milliseconds: 2500,
      ),
    );
  }
}

Upvotes: 21

GtdDev
GtdDev

Reputation: 928

That is my solution for this case - thanks for @Mahmoud Harooney

class CartController extends GetxController with GetSingleTickerProviderStateMixin {
  final ICartService cartService;
  final IOrdersService ordersService;
  late AnimationController _badgeShopCartAnimationController;
  late Animation badgeShopCartAnimation;

  CartController({required this.cartService, required this.ordersService});

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

    _badgeShopCartAnimationSetup();
  }

  void addCartItem(Product product) {
    cartService.addCartItem(product);
    _badgeShopCartAnimationPlay();
  }

  void _badgeShopCartAnimationSetup() {
    _badgeShopCartAnimationController =
        AnimationController(duration: const Duration(milliseconds: 225), vsync: this);

    badgeShopCartAnimation = Tween<Offset>(
      begin: const Offset(0, 0.0),
      end: const Offset(.2, 0.0),
    ).animate(
      CurvedAnimation(
        parent: _badgeShopCartAnimationController,
        curve: Curves.elasticIn,
      ),
    );
  }

  void _badgeShopCartAnimationPlay() async {
    await _badgeShopCartAnimationController.forward();
    await _badgeShopCartAnimationController.reverse();
  }
}

Upvotes: 2

Related Questions