How Can We Create Animations In Flutter With GetX?

By Fatih Dağlı Flutter Developer Intern, Etrexio

Animations in Flutter can add visual appeal, improve usability, and enhance the overall user experience of your app. In this article, I’ll explore the basics of animations in Flutter and provide some examples to help you get started with building engaging and dynamic user interfaces.

To start, create a controller using GetxController and remember to implement GetSingleTickerProviderStateMixin {} .

class WidgetController extends GetxController with GetSingleTickerProviderStateMixin {}

Then create an _animationController and colorAnimation (our first animation), we also define a getter for them as shown below.

final Rxn<AnimationController> _animationController = Rxn<AnimationController>();
AnimationController? get animationController => _animationController.value;


final Rxn<Animation<Color?>> _colorAnimation = Rxn<Animation<Color?>>(); 
Animation<Color?>? get colorAnimation => _colorAnimation.value;

After that, we are starting to initialize these variables in the onInit() method because we want to animate the widget when the page is opened. We initialize the _animationController with AnimationController() and for colorAnimation, we use ColorTween widget to determine to beginning and end point. Then we set .chain property to make the animation smoother, After that, we use .animate property to put our _animationController inside. Finally, we give ..addListener and put update() inside the listener so they are alive now. And don’t forget to add _animationController.value?.forward() to start your animation inside the onInit() method.

@override
void onInit() {
super.onInit();
const duration = Duration(milliseconds: 1500);
_animationController.value = AnimationController(
vsync: this, duration: duration,
);


_colorAnimation.value = (ColorTween(
begin: CustomColors.colorWhite, end: CustomColors.colorSoftGreen)
.chain(CurveTween(curve: Curves.ease))
.animate(_animationController.value!)
..addListener(() { update();
}));


_animationController.value?.forward();
}

After that, we should dispose of the _animationController inside the onClose() method.

@override
void onClose() {
_animationController.value?.dispose();
super.onClose();
}

Now we are ready to use it! Define the controller wherever you want to use it.

Get.create(() => WidgetController());
final WidgetController widgetController = Get.find();

I will use the container widget for animations so, I created a container widget and wrap it with AnimatedBuilder. We have only colorAnimation and animationController for now so we put the variables inside the container.

AnimatedBuilder(
animation: widgetController.animationController!,
builder: (context, child) { return Container( decoration: BoxDecoration(
color: widgetController.colorAnimation!.value,
borderRadius: BorderRadius.circular(12),
),
);
},
);

Finally, here we go!

Let’s continue with second animation (opacity). We are returning to controller page and creating opacityAnimation variable like colorAnimation as shown below.

final Rxn<Animation<double>> _opacityAnimation = Rxn<Animation<double>>(); 
Animation<double>? get opacityAnimation => _opacityAnimation.value;

Then initialize the opacityAnimation inside of the onInIt(). But this time we are using the Tween widget instead of ColorTween widget to determine begin and end points.

_opacityAnimation.value = (Tween<double>(begin: 0.0, end: 1.0)
.chain(CurveTween(curve: Curves.ease))
.animate(_animationCotroller.value!)
..addListener(() { update();
}));

Now, we are ready to use our opacityAnimation! Just wrap your container with Opacity widget and put the opacityAnimation inside the ‘opacity:’ property.

return Opacity(
opacity: widgetController.opacityAnimation!.value,
child: Container(...

Good work! We are done with two animations for now.

Time to add our last animation (width). Go back to your controller and create widthAnimation variable like:

final Rxn<Animation<double>> _widthAnimation = Rxn<Animation<double>>(); 
Animation<double>? get widthAnimation => _widthAnimation.value;

Then initialize it inside the onInIt() method. So it’s ready to use like a piece of cake!

_widthAnimation.value = (Tween<double>(begin: 50, end: 400)
.chain(CurveTween(curve: Curves.ease))
.animate(_animationCotroller.value!)
..addListener(() { update();
}));

Finally set your widthAnimation inside the width property of container.

width: widgetController.widthAnimation!.value,

Excellent! Now we have three animations at the same time.

The final code of the controller like:

class WidgetController extends GetxController with GetSingleTickerProviderStateMixin {

final Rxn<AnimationController> _animationController = Rxn<AnimationController>();
AnimationController? get animationController => _animationController.value;

final Rxn<Animation<double>> _widthAnimation = Rxn<Animation<double>>(); 
Animation<double>? get widthAnimation => _widthAnimation.value;

final Rxn<Animation<Color?>> _colorAnimation = Rxn<Animation<Color?>>(); 
Animation<Color?>? get colorAnimation => _colorAnimation.value;

final Rxn<Animation<double>> _opacityAnimation = Rxn<Animation<double>>(); 
Animation<double>? get opacityAnimation => _opacityAnimation.value;

@override
void onInit() {
super.onInit();
const duration = Duration(milliseconds: 1500);
_animationController.value = AnimationController(
vsync: this, duration: duration,
);


_widthAnimation.value = (Tween<double>(begin: 50, end: 400)
.chain(CurveTween(curve: Curves.ease))
.animate(_animationCotroller.value!)
..addListener(() { log(_widthAnimation.value.toString()); update();
}));


_colorAnimation.value = (ColorTween(
begin: CustomColors.colorWhite, end: CustomColors.colorSoftGreen)
.chain(CurveTween(curve: Curves.ease))
.animate(_animationCotroller.value!)
..addListener(() { log(_colorAnimation.value.toString()); update();
}));


_opacityAnimation.value = (Tween<double>(begin: 0.0, end: 1.0)
.chain(CurveTween(curve: Curves.ease))
.animate(_animationCotroller.value!)
..addListener(() { update();
}));
_animationController.value?.forward();
}


@override
void onClose() {
_animationController.value?.dispose();
super.onClose();

}
}

In conclusion, we’ve seen how to add animations to your Flutter app using the GetX package. I hope you enjoy it, see you in the next one!