AnimatedGrid class

A scrolling container that animates items when they are inserted into or removed from a grid. in a grid.

This widget's AnimatedGridState can be used to dynamically insert or remove items. To refer to the AnimatedGridState either provide a GlobalKey or use the static of method from an item's input callback.

This widget is similar to one created by GridView.builder.

This sample application uses an AnimatedGrid to create an effect when items are removed or added to the grid.

To create a local project with this code sample, run:
flutter create --sample=widgets.AnimatedGrid.1 mysample

By default, AnimatedGrid will automatically pad the limits of the grid's scrollable to avoid partial obstructions indicated by MediaQuery's padding. To avoid this behavior, override with a zero padding property.

The following example demonstrates how to override the default top and bottom padding using MediaQuery.removePadding.
Widget myWidget(BuildContext context) {
  return MediaQuery.removePadding(
    context: context,
    removeTop: true,
    removeBottom: true,
    child: AnimatedGrid(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
      initialItemCount: 50,
      itemBuilder: (BuildContext context, int index, Animation<double> animation) {
        return Card(
          color: Colors.amber,
          child: Center(child: Text('$index')),

See also:

  • SliverAnimatedGrid, a sliver which animates items when they are inserted into or removed from a grid.
  • SliverAnimatedList, a sliver which animates items added and removed from a list instead of a grid.
  • AnimatedList, which animates items added and removed from a list instead of a grid.


AnimatedGrid({Key? key, required AnimatedItemBuilder itemBuilder, required SliverGridDelegate gridDelegate, int initialItemCount = 0, Axis scrollDirection = Axis.vertical, bool reverse = false, ScrollController? controller, bool? primary, ScrollPhysics? physics, EdgeInsetsGeometry? padding, Clip clipBehavior = Clip.hardEdge})
Creates a scrolling container that animates items when they are inserted or removed.


clipBehavior Clip
The content will be clipped (or not) according to this option.
controller ScrollController?
An object that can be used to control the position to which this scroll view is scrolled.
gridDelegate SliverGridDelegate
A delegate that controls the layout of the children within the AnimatedGrid.
hashCode int
The hash code for this object.
no setterinherited
initialItemCount int
The number of items the AnimatedList or AnimatedGrid will start with.
itemBuilder AnimatedItemBuilder
Called, as needed, to build children widgets.
key Key?
Controls how one widget replaces another widget in the tree.
padding EdgeInsetsGeometry?
The amount of space by which to inset the children.
physics ScrollPhysics?
How the scroll view should respond to user input.
primary bool?
Whether this is the primary scroll view associated with the parent PrimaryScrollController.
reverse bool
Whether the scroll view scrolls in the reading direction.
runtimeType Type
A representation of the runtime type of the object.
no setterinherited
scrollDirection Axis
The Axis along which the scroll view's offset increases.
shrinkWrap bool
Whether the extent of the scroll view in the scrollDirection should be determined by the contents being viewed.


createElement() StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
createState() AnimatedGridState
Creates the mutable state for this widget at a given location in the tree.
debugDescribeChildren() List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
toString({DiagnosticLevel minLevel =}) String
A string representation of this object.
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) String
Returns a string representation of this node and its descendants.
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) String
Returns a one-line detailed description of the object.
toStringShort() String
A short, textual description of this widget.


operator ==(Object other) bool
The equality operator.

Static Methods

maybeOf(BuildContext context) AnimatedGridState?
The state from the closest instance of this class that encloses the given context.
of(BuildContext context) AnimatedGridState
The state from the closest instance of this class that encloses the given context.