flutter staggered animations
easily add staggered animations to your listview, gridview, column and row children as shown in material design guidelines.
showcase
listview | gridview | column |
---|---|---|
installation
dependency
add the package as a dependency in your pubspec.yaml file.
dependencies:
flutter_staggered_animations: "^0.1.2"
import
import the package in your code file.
import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';
basic usage
here is a sample code to apply a staggered animation on listview
items.
@override
widget build(buildcontext context) {
return scaffold(
body: animationlimiter(
child: listview.builder(
itemcount: 100,
itembuilder: (buildcontext context, int index) {
return animationconfiguration.staggeredlist(
position: index,
duration: const duration(milliseconds: 375),
child: slideanimation(
verticaloffset: 50.0,
child: fadeinanimation(
child: yourlistchild(),
),
),
);
},
),
),
);
}
api overview
this package contains three type of classes:
- animation
- animationconfiguration
- animationlimiter
animations
animations are split into 4 classes:
fadeinanimation
slideanimation
scaleanimation
flipanimation
animations can be composed to produce advanced animations effects by wrapping them.
example of a slideanimation combined with a fadeinanimation:
child: slideanimation(
verticaloffset: 50.0,
child: fadeinanimation(
child: yourlistchild(),
),
)
animations must be direct children of animationconfiguration
.
animationconfiguration
animationconfiguration
is an inheritedwidget
that shares its animation settings with its children (mainly duration and delay).
named constructors
depending on the scenario in which you will present your animations, you should use one of animationconfiguration
‘s named constructors.
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 a 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 a dual-axis staggered animations (from left to right and top to bottom).
if you’re not in the context of a listview
or gridview
, an utility static method is available to help you apply staggered animations to the children of a row
or column
:
animationconfiguration.tostaggeredlist
you can override
duration
anddelay
in each child animation if needed.
animationlimiter
in the context of a scrollable view, your children’s animations are only built when the user scrolls and they appear on the screen.
this create a situation where your animations will be run as you scroll through the content. if this is not a behaviour you want in your app, you can use animationlimiter
.
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.
to be effective, animationlimiter
must be a direct parent of your scrollable list of widgets.
you can omit
animationlimiter
if your view is not scrollable.
quick samples
listview
here is a sample code to apply a staggered animation on the children of a listview
.
@override
widget build(buildcontext context) {
return scaffold(
body: animationlimiter(
child: listview.builder(
itemcount: 100,
itembuilder: (buildcontext context, int index) {
return animationconfiguration.staggeredlist(
position: index,
duration: const duration(milliseconds: 375),
child: slideanimation(
verticaloffset: 50.0,
child: fadeinanimation(
child: yourlistchild(),
),
),
);
},
),
),
);
}
gridview
here is a sample code to apply a staggered animation on the children of a 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(),
),
),
);
},
),
),
),
);
}
column
here is a sample code to apply a staggered animation on the children of a 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(),
),
),
),
),
);
}
Comments are closed.