animated_multichild

Description:

animated multichild

Animated Multichild #
Create ListView, GridView, Row or Column whose children are animated easily.
Showcase #




Row
Column
Grid
List











Getting started #
Add animated_multichild to pubspec.yaml of your project.
dependencies:
animated_multichild: ^0.0.2
copied to clipboard
Or use the below command to install it with your terminal.
flutter pub add animated_multichild
copied to clipboard
Usage #
Import it in your Dart code:
import 'package:animated_multichild/animated_multichild.dart';
copied to clipboard
ListView
Replace ListView with AnimatedListView. You can also use builder and separated constructors. But
custom constructor is not available
AnimatedListView.builder(
itemBuilder: (BuildContext context, int index) {
return const SizedBox(
width: double.infinity,
height: 100,
child: Card(
margin: EdgeInsets.all(8),
elevation: 4,
),
);
},
itemCount: 16,
)
copied to clipboard
See the example folder to view examples for other widgets.
Transitions
You can customize how the animation is built via the transitionBuilder property.
/// This will create a fade effect for the children
AnimatedListView.builder(
transitionBuilder: (context, animation, child) {
return FadeTransition(
opacity: animation,
child: child,
);
},
/// rest of your code
)
copied to clipboard
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 Duration.zero.
Also to customize the delay of the animation without staggered effect, you can define a
CurvedAnimation with an
Interval curve to the transition builder.
License #
MIT License