CODEWITHSUNDEEP
flutteranimationmixinsflutter-getx
Scofield Tran
Scofield Tran

Reputation: 840

flutter how to implement animation inside class GetView<Controller>

I'm starting a flutter project and many people said that GetX is the best state manager framework to use in flutter, so I decide to use it.

I want to do some animation in class HomePage, but when I use mixin SingleTickerProviderStateMixin, it throws a compile error that

error: 'SingleTickerProviderStateMixin<StatefulWidget>' can't be mixed onto 'GetView<HomePageController>' because 'GetView<HomePageController>' doesn't implement 'State<StatefulWidget>'.

Here is my code

class HomePage extends GetView<HomePageController> with SingleTickerProviderStateMixin {
  final Duration duration = const Duration(milliseconds: 300);
  AnimationController _animationController;

  HomePage() {
     _animationController = AnimationController(vsync: this, duration: duration);
  }

  @override
  Widget build(BuildContext context) {
     return Container();
  } 

}

Because to initialize an AnimationController, it needs an argument named 'vsync', so I have to implement the mixin SingleTickerProviderStateMixin. But because GetView<> doesn't implement State so it throws compile error.

I don't know what is the correct way to implement animation inside GetX, the weird thing is I can't find out any clue or guide for this on Google or any flutter community despite the wide popularity of GetX

Upvotes: 2

Views: 5604

Answers (2)

Loren.A
Loren.A

Reputation: 5575

You want to use with GetSingleTickerProviderStateMixin on your controller class, not your actual page. This is specific to GetX and allows you to use animation controllers on stateless widgets.

class HomePageController extends GetxController
    with GetSingleTickerProviderStateMixin {
  final Duration duration = const Duration(milliseconds: 300);

  AnimationController animationController;

  @override
  void onInit() {
    super.onInit();
    animationController = AnimationController(vsync: this, duration: duration);
  }
}

Then in your page that extends GetView<HomePageController> access the animation controller with controller.animationController.

class HomePage extends GetView<HomePageController> 
  @override
  Widget build(BuildContext context) {
// access animation controller on this page with controller.animationController
     return Container();
  } 

}

Just make sure your HomePageController is fully initialized before HomePage loads. If HomePage is the very first thing in your app, then one way to guarantee that its initialized before HomePage tries to load is to initialize the controller with a Future method in the GetX class.

 Future<void> initAnimationController() async {
    animationController = AnimationController(vsync: this, duration: duration);
  }

Then then initialize in your main method.

void main() async {
  final controller = Get.put(HomePageController());
  await controller.initAnimationController();

  runApp(MyApp());
}

In my experience if you're using an animation controller from a Getx class in the first page that the app loads, initializing in the onInit won't guarantee that it'll be ready and might throw an error. Using a Future method and await in main will ensure you won't get an uninitialized error.

Upvotes: 11

Simon Sot
Simon Sot

Reputation: 3136

Try use GetX version of SingleTickerProviderStateMixin - SingleGetTickerProviderMixin:

class HomePage extends GetView<HomePageController> with SingleGetTickerProviderMixin {

}

Upvotes: 1

Related Questions