AnimatedSize (or other built in animations that require vsync) with GetX

Question

GetX has been a blessing for us so far in terms of dependency injection and state management. However, we've come across an issue where we can't get built in animation Widgets to work,

These are built in widgets that require a vsync value. In our case, an AnimatedSize, but it could be others.

Those that don't require a vsync property, like AnimatedContainer, work fine with a controller that looks like this:

class BottomNavigationController extends GetxController with SingleGetTickerProviderMixin {
  final height = 0.0.obs;
  ...
}

and then use it like this...

final BottomNavigation controller = Get.put(BottomNavigationController());
...

AnimatedContainer(
  duration: Duration(seconds: 1),
  child: PopUpMenu(),
  height: controller.height.value
)

but in the case of, for instance, an AnimatedSize, the widget requires a vsync value... Any ideas on how I would do this?

if (navigationController.isMenuOpen.value)
  AnimatedSize(
    vsync: **value here can't be null**,
    duration: Duration(seconds: 1),
    child: PopUpMenu(),
 )

Answer 1

If you have a widget that requires vsync, just pass in the whole controller. Because the object itself is what is providing the TickerProvider . Just like if you were initializing an AnimationController in the initState of a stateful widget, the widget itself that extends SingleTickerProviderMixin provides the TickerProvider when you pass in this in vsync .

if (navigationController.isMenuOpen.value)
  AnimatedSize(
    vsync: controller, // full GetX controller
    duration: Duration(seconds: 1),
    child: PopUpMenu(),

If you're using something that requires an animated controller you would need to declare and initialize the animated controller you want to use in your GetX class.

class BottomNavigationController extends GetxController
    with SingleGetTickerProviderMixin {
  final height = 0.0.obs;
  AnimationController animationController;

  @override
  void onInit() {
    super.onInit();
    animationController =
        AnimationController(vsync: this, duration: Duration(seconds: 1)); // or whatever your desired duration
  }
}

Then if you're in a widget that requires an animation controller you pass in

controller.animationController