Let’s make List Animation easy using Flutter!

Photo by Bhushan Sadani on Unsplash

Hey, Flutter Dev’s out there, have you ever wondered to make your app with smooth user experience? Let’s explore how can we achieve it with simple animation.

Table of Contents:

Introduction

Implementation

Source Code

Conclusion

Let’s get started!

Introduction:

The Flutter SDK provides implicit transition animations, such as FadeTransition, SizeTransition, and SlideTransition. These simple animations are triggered by setting a beginning and ending point. They are simpler to implement than explicit animations.

Recently I came across this Flutter package flutter_staggered_animations: “⁰.1.2” by mobiten.

This package provides staggered animations to your ListView, GridView, Column and Row children.

For more information check out :

mobiten/flutter_staggered_animations

Implementation:

Step 1: Add the dependencies

Go to pubspec.yaml file and add the below dependencies and run “flutter pub get” in terminal or Tools->Flutter->Flutter pub get in Android Studio.

dependencies:
  flutter_staggered_animations: "^0.1.2"

Step 2: Create a ListView:

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  static const routeName = '/home';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
          itemCount: 10,
          itemBuilder: (context, index) {
            return Card(
              elevation: 2,
              child: ListTile(
                title: Text("Title"),
                subtitle: Text('Sub'),
                trailing: Icon(
                  Icons.favorite,
                  color: Colors.red,
                ),
              ),
            );
          }),
    );
  }
}

This is a sample listview contains title, description, and a trailing widget. So in this part when the listview gets loaded there will be no animation or transition.

Output:

From the above output, we can see that the listview gets loaded as soon as we click Animated List Button.

Let’s add some Animation to it!

Step 3: Adding Animation:

Animations are split into 4 classes:

• FadeInAnimation
• SlideAnimation
• ScaleAnimation
• FlipAnimation

I. Wrap your ListView with AnimationLimiter.

import 'package:flutter/material.dart';
import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';

class HomePage extends StatelessWidget {
  static const routeName = '/home';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimationLimiter(
        child: ListView.builder(
            itemCount: 10,
            itemBuilder: (context, index) {
              return Card(
                elevation: 2,
                child: ListTile(
                  title: Text("Title"),
                  subtitle: Text('Sub'),
                  trailing: Icon(
                    Icons.favorite,
                    color: Colors.red,
                  ),
                ),
              );
            }),
      ),
    );
  }
}

AnimationLimiter is an InheritedWidget that prevents the children widgets to be animated if they don't appear in the first frame where AnimationLimiter is built.

II. Wrap the child of ListView with AnimationConfiguration.staggeredList

import 'package:flutter/material.dart';
import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';

class HomePage extends StatelessWidget {
  static const routeName = '/home';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimationLimiter(
        child: ListView.builder(
            itemCount: 10,
            itemBuilder: (context, index) {
              return AnimationConfiguration.staggeredList(
                position: index,
                duration: const Duration(milliseconds: 375),
                child: Card(
                  elevation: 2,
                  child: ListTile(
                    title: Text("Title"),
                    subtitle: Text('Sub'),
                    trailing: Icon(
                      Icons.favorite,
                      color: Colors.red,
                    ),
                  ),
                ),
              );
            }),
      ),
    );
  }
}

Animation Configuration has 2 main properties:

Duration: Duration specifies the animation-delay time.

Position: Position is the index provided by ListView.

As per the docs:

AnimationConfiguration is an InheritedWidget that shares its animation settings with its children (mainly duration and delay).

• AnimationConfiguration.synchronized if you want to launch all children's animations at the same time.
• AnimationConfiguration.staggeredList if you want to delay the animation of each child to produce single-axis staggered animations (from top to bottom or from left to right).
• AnimationConfiguration.staggeredGrid if you want to delay the animation of each child to produce dual-axis staggered animations (from left to right and top to bottom).

III. Wrap the child with SlideAnimation and FadeInAnimation:

Slide Animation with horizontal offset:

import 'package:flutter/material.dart';
import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';

class HomePage extends StatelessWidget {
  static const routeName = '/home';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimationLimiter(
        child: ListView.builder(
            itemCount: 10,
            itemBuilder: (context, index) {
              return AnimationConfiguration.staggeredList(
                position: index,
                duration: const Duration(milliseconds: 375),
                child: SlideAnimation(
                  horizontalOffset: 150,
                  child: FadeInAnimation(
                    child: Card(
                      elevation: 2,
                      child: ListTile(
                        title: Text("Title"),
                        subtitle: Text('Sub'),
                        trailing: Icon(
                          Icons.favorite,
                          color: Colors.red,
                        ),
                      ),
                    ),
                  ),
                ),
              );
            }),
      ),
    );
  }
}

Output:

Slide Animation with vertical offset:

import 'package:flutter/material.dart';
import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';

class HomePage extends StatelessWidget {
  static const routeName = '/home';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimationLimiter(
        child: ListView.builder(
            itemCount: 10,
            itemBuilder: (context, index) {
              return AnimationConfiguration.staggeredList(
                position: index,
                duration: const Duration(milliseconds: 375),
                child: SlideAnimation(
                  verticalOffset: 150,
                  child: FadeInAnimation(
                    child: Card(
                      elevation: 2,
                      child: ListTile(
                        title: Text("Title"),
                        subtitle: Text('Sub'),
                        trailing: Icon(
                          Icons.favorite,
                          color: Colors.red,
                        ),
                      ),
                    ),
                  ),
                ),
              );
            }),
      ),
    );
  }
}

Output:

Similarly, you can use it for Column and GridView.

Column:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: AnimationLimiter(
          child: Column(
            children: AnimationConfiguration.toStaggeredList(
              duration: const Duration(milliseconds: 375),
              childAnimationBuilder: (widget) => SlideAnimation(
                horizontalOffset: 50.0,
                child: FadeInAnimation(
                  child: widget,
                ),
              ),
              children: YourColumnChildren(),
            ),
          ),
        ),
      ),
    );
  }

GridView:

@override
Widget build(BuildContext context) {
  int columnCount = 3;

  return Scaffold(
    body: AnimationLimiter(
      child: GridView.count(
        crossAxisCount: columnCount,
        children: List.generate(
          100,
          (int index) {
            return AnimationConfiguration.staggeredGrid(
              position: index,
              duration: const Duration(milliseconds: 375),
              columnCount: columnCount,
              child: ScaleAnimation(
                child: FadeInAnimation(
                  child: YourListChild(),
                ),
              ),
            );
          },
        ),
      ),
    ),
  );
}

Source code:

aravindc5/list_animation

If you find this interesting to give a star

Conclusion:

In this article, I have explained the various animations that can be added to your Listview, Column, GridView.

I hope this blog will be informative and do try it in your projects for smooth user experience.

⭐ Thanks for reading this article ⭐

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 if this article helps you.

Read my other Blogs:

These libraries will make you fall in love with Flutter💙 — Techvile

Python is not the Future, Here Comes JULIA! [May 2020] — Techvile