Flutter : Animation 2

 Flutter Animation 

Now, we are going to see how we can create explicit animation in Flutter. There are mainly three pillars of an animation, which are given below:

  1. Ticker
  2. Animation Class
  3. AnimationController

Ticker

The Ticker is a class which sends a signal at a regular interval, i.e., around 60 times per second. You can understand it with your watch, which tics at regular intervals. At each tick, Ticker provides a callback method with the duration since the first ticks at each second, after it was started. Even if the tickers started at different times, it always synchronized automatically. The reason behind this is that the tickers give their elapsed time relative to the first tick after it was started.

Animation

The Animation class is the core building block of the animation system. The animation is nothing else, but it represents a value (specific type) that can change over the lifetime of an animation. In Flutter, the widgets which perform an animation take an animation object as a parameter. This Animation object gives the information from which they read the current value of the animation and to which they listen for changes to that value. The animation class contains two methods addListener() and addStatusListener(). When the value of animation changes, it notifies all the listeners added with addListener(). Again, when the status of the animation changes, it notifies all the listeners added with addStatusListener().

The most common Animation classes are:

  • Animation<double>: It interpolates values between two decimal numbers over a certain duration.
  • Animation<Color>: It interpolates colors between two color values.
  • Animation<Size>: It interpolates sizes between two size values.

Animation Controller

The animation controller is a class that allows us to control the animation. It always generates new values whenever the application is ready for a new frame. For example, it gives the controlling of start, stop, forward, or repeat of the animation. Once the animation controller is created, we can start building other animation based on it, such as reverse animation and curved animation.

  1. animcontroller = AnimationController(vsync: this, duration: Duration(milliseconds: 2500));  

Here, the duration option controls the duration of the animation process, and vsync option is used to optimize the resource used in the animation.

The basic steps necessary for using an AnimationController are:

Step 1: First, instantiate an AnimationController with parameters, such as duration and vsync.

Step 2: Add the required listeners like addListener() or addStatusListener().

Step 3: Start the animation.

Step 4: Perform the action in the listener callback methods (for example, setState).

Step 5: Last, dispose of the animation.

Comments

Post a Comment

Popular posts from this blog

Flutter: Everything is a widget

Image
  Widgets The core concept of the Flutter framework is In Flutter, Everything is a widget . Widgets are basically user interface components used to create the user interface of the application. In Flutter , the application is itself a widget. The application is the top- level widget and its UI is build using one or more children (widgets), which again build using its children widgets. This composability feature helps us to create a user interface of any complexity. For example, the widget hierarchy of the hello world application (created in previous chapter) is as specified in the following diagram −   Here the following points are worth notable − MyApp is the user created widget and it is build using the Flutter native widget, MaterialApp . MaterialApp has a home property to specify the user interface of the home page, which is again a user created widget, MyHomePage . MyHomePage is build using another flutter native widget, Scaffold Scaffold has two properties –...
Read more

Flutter: Statefull vs Stateless widget

Image
What is the difference between Stateful and Stateless Widget. In Flutter all the UI components are known as widgets. The widget which contains the code for a single screen of the app can be just of two types — Stateful Stateless Stateless Stateless widgets do not require mutable state, i.e., it is immutable . In simple words, Stateless widgets cannot change their state during the runtime of the app, which means the widgets cannot be redrawn while the app is in action. The structure of a Stateless widget looks like this: So, let’s understand what is there in this small code snippet. The name of this Stateless Widget is “ StartScreen ”, inside which we have to override the “ build” method. This build method takes in a “ BuildContext ” as the parameter and returns a widget. That’s why you can see that the return type of the build method is a widget. And this the place where you can design the UI of this screen, which is Stateless. In Stateless widget, The “ build ” method can be c...
Read more

Flutter: Container, Column and Rows

Image
  Flutter Container The container in Flutter is a parent widget that can contain multiple child widgets and manage them efficiently through width, height, padding, background color, etc. It is a widget that combines common painting, positioning, and sizing of the child widgets. It is also a class to store one or more widgets and position them on the screen according to our needs. Generally, it is similar to a box for storing contents. It allows many attributes to the user for decorating its child widgets, such as using margin , which separates the container with other contents. A container widget is same as <div> tag in html. If this widget does not contain any child widget, it will fill the whole area on the screen automatically. Otherwise, it will wrap the child widget according to the specified height & width. It is to note that this widget cannot render directly without any parent widget. We can use Scaffold widget, Center widget, Padding widget, Row w...
Read more