Pub Version

Animated Multichild

Create ListView, GridView, Row or Column whose children are animated easily.


Row Column Grid List

Getting started

Add animated_multichild to pubspec.yaml of your project.

      animated_multichild: ^0.0.2

Or use the below command to install it with your terminal.

flutter pub add animated_multichild


Import it in your Dart code:

import 'package:animated_multichild/animated_multichild.dart';


Replace ListView with AnimatedListView. You can also use builder and separated constructors. But custom constructor is not available

    itemBuilder: (BuildContext context, int index) {
      return const SizedBox(
        width: double.infinity,
        height: 100,
        child: Card(
          margin: EdgeInsets.all(8),
          elevation: 4,
    itemCount: 16,

See the example folder to view examples for other widgets.


You can customize how the animation is built via the transitionBuilder property.

/// This will create a fade effect for the children
    transitionBuilder: (context, animation, child) {
      return FadeTransition(
        opacity: animation,
        child: child,
    /// rest of your code

There are some pre-defined transitions available via the Transitions class. They are

  • fadeIn
  • scale
  • slideInFromLeft
  • slideInFromRight
  • slideInFromBottom

The Transitions class also has a combine method which takes a list of transition builders to combine multiple transitions into one transition.

Along with transitionBuilder, there are another functions which passes the index of the child widget to the transition builder. This is known as IndexedTransitionBuilder. This is helpful to apply different transitions to different widgets based on the index.

Duration and Delay

You can customize the duration of the animation and starting delay of the animation.

The duration parameter takes in a Duration which defines how long the animation should run.

The delay parameter takes in a Duration which defines the starting delay of the of the animation. Remember that this delay is incremental. This is used to apply staggered animation effect. If you don't want staggered animation effect than set this delay to

Also to customize the delay of the animation without staggered effect, you can define a CurvedAnimation with an Interval curve to the transition builder.


MIT License