Introduction to Animations in Flutter

In this blog, we will explore animations in flutter. We would be covering different types of animation and implementing basic animation in flutter using some specific in-built widget.

Table of Contents:

Introduction

Types Of Animation

Implicit Animation

Fade-In Effect

Conclusion

Introduction

Animations play a vital role in enhancing the user experience of your app. But what are animations? Animation means showing a series of images, one after another, in a given span of time. Flutter comes with a rich set of ready to use animation widgets.

Let’s Get Started

Now let’s dive into the world of flutter animations. There are mainly two types of animations in flutter,

1. Drawing-Based Animations
2. Code-Based Animations

Whenever we want our animation to look like drawing we choose Drawing-Based animation. Mainly Drawing-based animations appear like someone is drawing them.

Now let’s check out Code-based animation…

Code-Based Animations are widget focused and are rooted in standard layout and style primitives like rows, columns, colors, or text styles. If you want to include your animation in these types of widgets then Code-Based Animation is a perfect choice.

Code based Animation is a Pure kind of flutter animation and it comes up with two types,

1. Implicit Animation
2. Explicit Animation

Implicit Animations

With Flutter’s animation library, you can add motion and create visual effects for the widgets in your UI. One widget set in the library manages animations for you. These widgets are collectively referred to as implicit animations, or implicitly animated widgets, deriving their name from the ImplicitlyAnimatedWidget class that they implement.

Fade-In Effect

The most simple example of implicit animation is the Fade-In effect. You can use AnimatedOpacity to animate opacity and add implicit animation to Fade-In simple starter code.

This is our Starter code of Fade-In effect.

import ‘package:flutter/material.dart’;
const owl_url = ‘https://raw.githubusercontent.com/flutter/website/master/src/images/owl.jpg';
class FadeInDemo extends StatefulWidget {
 _FadeInDemoState createState() => _FadeInDemoState();
}
class _FadeInDemoState extends State<FadeInDemo> {
 @override
 Widget build(BuildContext context) {
 return Column(children: <Widget>[
 Image.network(owl_url),
 RaisedButton(
 child: Text(
 ‘Show details’,
 style: TextStyle(color: Colors.blueAccent),
 ),
 onPressed: () => null),
 Container(
 child: Column(
 children: <Widget>[
 Text(‘Type: Owl’),
 Text(‘Age: 39’),
 Text(‘Employment: None’), ], ), ) ]); }}
class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 debugShowCheckedModeBanner: false,
 home: Scaffold(
 body: Center(
 child: FadeInDemo(), ), ), ); }}
void main() {
 runApp(
 MyApp(),
 );
}

Output

Now we will add an implicit animation into it by using the AnimatedOpacity widget. So excited to change your simple fade-In to an animated one !!

We will follow some simple steps to turn the Starter code into an Animated one.

1. Change Container widget to an AnimatedOpacity widget

2. Initialize state variable for animated property

3. Set starting value for opacity = 0 before clicking on a button to

4. Set ending value for opacity after clicking on the button

5. Set the duration of the animation

import ‘package:flutter/material.dart’;
const owl_url = ‘https://raw.githubusercontent.com/flutter/website/master/src/images/owl.jpg';
class FadeInDemo extends StatefulWidget {
 _FadeInDemoState createState() => _FadeInDemoState();
}
class _FadeInDemoState extends State<FadeInDemo> {
 double opacityLevel = 0.0;
@override
 Widget build(BuildContext context) {
 return Column(children: <Widget>[
 Image.network(owl_url),
 RaisedButton(
 child: Text(
 ‘Show details’,
 style: TextStyle(color: Colors.blueAccent),
 ),
 onPressed: () => setState(() {
 opacityLevel = 1.0;
 }),
 ),
 AnimatedOpacity(
 duration: Duration(seconds: 3),
 opacity: opacityLevel,
 child: Column(
 children: <Widget>[
 Text(‘Type: Owl’),
 Text(‘Age: 39’),
 Text(‘Employment: None’), ], ), ) ]); }}
class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 debugShowCheckedModeBanner: false,
 home: Scaffold(
 body: Center(
 child: FadeInDemo(),), ), ); }}
void main() {
 runApp(
 MyApp(),
 );
}

Conclusion:

Here it is Fade-In effect with features of AnimatedOpacity. You can run it and check the difference between Fade-In Starter Code and Fade-In with Implicit Animation.

Hope this blog helps you and gives insight into Animations in Flutter. Thanks for reading it! If there’s any mistake, please let me know in the comments so that I can improve. Clap 👏 if this blog helps you!