Flutter animation

(future language)

I understand that the flutter language is still too young compared to Xamarin or React Native and can cause mistrust in both developers and customers. In this article I will try to convince otherwise you on the example of a simple animation.

Flutter consists of three components:
Flutter engine.
Foundation library (Dart).
Design-specific widgets.
Flutter engine - written on C ++, provides low-level rendering support, uses the skia graphic library for this.
Skia has several main internal components: CPU-based programmer rasterization, PDF output and acceleration of OpenGL graphics processor. Also available OpenGL ES2, OpenVG, SVG and Adobe SWF (Flash).




Flutter is probably only one hybrid application development lenguage with which you can create complex animations that can run continuously at 60 frames per second.
In this article we will create a point spinner with looping animation. To create a widget that can be easily animated, start by creating a class that extends the class StatefulWidget  and overrides method createState(). This method should return an instance State.



For animation, our widget must not only extend the class State, but still have to use SingleTikerProviderStateMixin. Tiker constantly gives out callback, known as tiki. Since ticks are generated constantly with equal intervals of time, you can use them to customize the display of each frame of the animation.



The tween animation is one of the simplest animations which you can create with Flutter. When creating, all we need to do is provide two different values: the initial value and the final value. Then the framework automatically generates a set of intermediate values, starting from the initial value, smoothly increasing it to the final value.
To create and manage animations we need objects Animation and AnimationController. Add them as variables to your state:
AnimationController controller;
Animation AnimationRotation
We have to initialize both objects, override the method initState() our class.
In this method, we call the class constructor AnimationController, to initialize the controller. You will need to specify an object TikerProvider. And since the state is already using SingleTikerProviderStateMixin, you can just use this.



You can use the property duration, to set the duration of the animation.
The following code creates an animation controller with a duration of two seconds. To associate a Tween object with an AnimationController object, you must call the animate () method, in which we call CurvedAnimation and set the interval for the animation curve. Also, set the radius for the spinner and tell the controller to constantly repeat the animation.

controller.repeat();

At this stage, the animation is ready. Next, create elements for the spinner.
Create a constructor class with two values: сolor and radius.



In the build method, set the dimensions for the container and values for each point in the spinner with the Transform method, which creates a widget that transforms its descendant using rotation around the center. Also set the radius and color. Then wrap it in the RotationTransition method, which creates a transition rotation.



You can run your application to see the animation.

So, we seen how easy to create a beautiful animation with the programming language Flutter. Its animation capabilities are huge, starting with simple transitions between screens and ending with full-fledged games. To create game animations, you can add a third-party library flame.
https://pub.dartlang.org/packages/flame
Now our application consists of only one file main.dart, and there is no architecture in it,



since this language is new for most users, then writing a more complex application with the possibility of their further support will immediately become a question about architecture, and here I will advise you to study the BLOC pattern - it was specially created by Google developers for the Flutter language.

https://medium.com/flutterpub/architecting-your-flutter-project-bd04e144...
or
https://www.didierboelens.com/2018/08/reactive-programming---streams---b...

The principle of reactive programming will also help you to make development easier.

https://pub.dartlang.org/packages/rxdart
https://docs.flutter.io/flutter/dart-async/Stream-class.html

Before sit down and write code, I recommend you to study all these articles and you will see that the Flutter programming language is the language of the future!

Tags: