Flutter: Animation-1

 

Introduction

Animation is a process of showing a series of images / picture in a particular order within a specific duration to give an illusion of movement. The most important aspects of the animation are as follows −

  • Animation have two distinct values: Start value and End value. The animation starts from Start value and goes through a series of intermediate values and finally ends at End values. For example, to animate a widget to fade away, the initial value will be the full opacity and the final value will be the zero opacity.

  • The intermediate values may be linear or non-linear (curve) in nature and it can be configured. Understand that the animation works as it is configured. Each configuration provides a different feel to the animation. For example, fading a widget will be linear in nature whereas bouncing of a ball will be non-linear in nature.

  • The duration of the animation process affects the speed (slowness or fastness) of the animation.

  • The ability to control the animation process like starting the animation, stopping the animation, repeating the animation to set number of times, reversing the process of animation, etc.,

  • In Flutter, animation system does not do any real animation. Instead, it provides only the values required at every frame to render the images.

     

     

Animation Based Classes

Flutter animation system is based on Animation objects. The core animation classes and its usage are as follows −

Animation

Generates interpolated values between two numbers over a certain duration. The most common Animation classes are −

  • Animation<double> − interpolate values between two decimal number

  • Animation<Color> − interpolate colors between two color

  • Animation<Size> − interpolate sizes between two size

  • AnimationController − Special Animation object to control the animation itself. It generates new values whenever the application is ready for a new frame. It supports linear based animation and the value starts from 0.0 to 1.0 

     

    what are some Implicitly Animated Widgets we can use?

    • AnimatedSize

    • AnimatedOpacity

    • AnimatedPadding

    • AnimatedPositioned (Limited use. Only where the Constraints are loose, like a Stack)

    • AmimatedWidget (Animates between different types of Widgets, like a Text and an Icon)

    • Hero (Animates a Widget from one page to another, when it appears on both pages)

      

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