StaggeredGridView class
A scrollable, 2D array of widgets with variable sizes.
The main axis direction of a grid is the direction in which it scrolls (the scrollDirection).
The most commonly used grid layouts are StaggeredGridView.count, which creates a layout with a fixed number of tiles in the cross axis, and StaggeredGridView.extent, which creates a layout with tiles that have a maximum cross-axis extent. A custom SliverStaggeredGridDelegate can produce an arbitrary 2D arrangement of children.
To create a grid with a large (or infinite) number of children, use the StaggeredGridView.builder constructor with either a SliverStaggeredGridDelegateWithFixedCrossAxisCount or a SliverStaggeredGridDelegateWithMaxCrossAxisExtent for the gridDelegate. You can also use the StaggeredGridView.countBuilder or StaggeredGridView.extentBuilder constructors.
To use a custom SliverVariableSizeChildDelegate
, use StaggeredGridView.custom.
To create a linear array of children, use a ListView.
To control the initial scroll offset of the scroll view, provide a controller with its ScrollController.initialScrollOffset property set.
Sample code
Here are two brief snippets showing a StaggeredGridView and its equivalent using CustomScrollView:
StaggeredGridView.count(
primary: false,
crossAxisCount: 4,
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
children: const <Widget>[
const Text('1'),
const Text('2'),
const Text('3'),
const Text('4'),
const Text('5'),
const Text('6'),
const Text('7'),
const Text('8'),
],
staggeredTiles: const <StaggeredTile>[
const StaggeredTile.count(2, 2),
const StaggeredTile.count(2, 1),
const StaggeredTile.count(2, 2),
const StaggeredTile.count(2, 1),
const StaggeredTile.count(2, 2),
const StaggeredTile.count(2, 1),
const StaggeredTile.count(2, 2),
const StaggeredTile.count(2, 1),
],
)
CustomScrollView(
primary: false,
slivers: <Widget>[
SliverStaggeredGrid.count(
crossAxisCount: 4,
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
children: const <Widget>[
const Text('1'),
const Text('2'),
const Text('3'),
const Text('4'),
const Text('5'),
const Text('6'),
const Text('7'),
const Text('8'),
],
staggeredTiles: const <StaggeredTile>[
const StaggeredTile.count(2, 2),
const StaggeredTile.count(2, 1),
const StaggeredTile.count(2, 2),
const StaggeredTile.count(2, 1),
const StaggeredTile.count(2, 2),
const StaggeredTile.count(2, 1),
const StaggeredTile.count(2, 2),
const StaggeredTile.count(2, 1),
],
)
],
)
See also:
- SingleChildScrollView, which is a scrollable widget that has a single child.
- ListView, which is scrollable, linear list of widgets.
- PageView, which is a scrolling list of child widgets that are each the size of the viewport.
- CustomScrollView, which is a scrollable widget that creates custom scroll effects using slivers.
- SliverStaggeredGridDelegateWithFixedCrossAxisCount, which creates a layout with a fixed number of tiles in the cross axis.
- SliverStaggeredGridDelegateWithMaxCrossAxisExtent, which creates a layout with tiles that have a maximum cross-axis extent.
- ScrollNotification and NotificationListener, which can be used to watch the scroll position without using a ScrollController.
- Inheritance
-
- Object
- DiagnosticableTree
- Widget
- StatelessWidget
- ScrollView
- BoxScrollView
- StaggeredGridView
Constructors
-
StaggeredGridView({Key? key, Axis scrollDirection = Axis.vertical, bool reverse = false, ScrollController? controller, bool? primary, ScrollPhysics? physics, bool shrinkWrap = false, EdgeInsetsGeometry? padding, required SliverStaggeredGridDelegate gridDelegate, bool addAutomaticKeepAlives = true, bool addRepaintBoundaries = true, List<
Widget> children = const <Widget>[], String? restorationId}) - Creates a scrollable, 2D array of widgets with a custom SliverStaggeredGridDelegate.
- StaggeredGridView.builder({Key? key, Axis scrollDirection = Axis.vertical, bool reverse = false, ScrollController? controller, bool? primary, ScrollPhysics? physics, bool shrinkWrap = false, EdgeInsetsGeometry? padding, required SliverStaggeredGridDelegate gridDelegate, required IndexedWidgetBuilder itemBuilder, int? itemCount, bool addAutomaticKeepAlives = true, bool addRepaintBoundaries = true, String? restorationId})
- Creates a scrollable, 2D array of widgets that are created on demand.
-
StaggeredGridView.count({Key? key, Axis scrollDirection = Axis.vertical, bool reverse = false, ScrollController? controller, bool? primary, ScrollPhysics? physics, bool shrinkWrap = false, EdgeInsetsGeometry? padding, required int crossAxisCount, double mainAxisSpacing = 0.0, double crossAxisSpacing = 0.0, bool addAutomaticKeepAlives = true, bool addRepaintBoundaries = true, List<
Widget> children = const <Widget>[], List<StaggeredTile> staggeredTiles = const <StaggeredTile>[], String? restorationId}) - Creates a scrollable, 2D array of widgets of variable sizes with a fixed number of tiles in the cross axis.
- StaggeredGridView.countBuilder({Key? key, Axis scrollDirection = Axis.vertical, bool reverse = false, ScrollController? controller, bool? primary, ScrollPhysics? physics, bool shrinkWrap = false, EdgeInsetsGeometry? padding, required int crossAxisCount, required IndexedWidgetBuilder itemBuilder, required IndexedStaggeredTileBuilder staggeredTileBuilder, int? itemCount, double mainAxisSpacing = 0.0, double crossAxisSpacing = 0.0, bool addAutomaticKeepAlives = true, bool addRepaintBoundaries = true, String? restorationId})
- Creates a scrollable, 2D array of widgets of variable sizes with a fixed number of tiles in the cross axis that are created on demand.
- StaggeredGridView.custom({Key? key, Axis scrollDirection = Axis.vertical, bool reverse = false, ScrollController? controller, bool? primary, ScrollPhysics? physics, bool shrinkWrap = false, EdgeInsetsGeometry? padding, String? restorationId, required SliverStaggeredGridDelegate gridDelegate, required SliverChildDelegate childrenDelegate, bool addAutomaticKeepAlives = true})
-
Creates a scrollable, 2D array of widgets with both a custom
SliverStaggeredGridDelegate and a custom
SliverVariableSizeChildDelegate
.const -
StaggeredGridView.extent({Key? key, Axis scrollDirection = Axis.vertical, bool reverse = false, ScrollController? controller, bool? primary, ScrollPhysics? physics, bool shrinkWrap = false, EdgeInsetsGeometry? padding, required double maxCrossAxisExtent, double mainAxisSpacing = 0.0, double crossAxisSpacing = 0.0, bool addAutomaticKeepAlives = true, bool addRepaintBoundaries = true, List<
Widget> children = const <Widget>[], List<StaggeredTile> staggeredTiles = const <StaggeredTile>[], String? restorationId}) - Creates a scrollable, 2D array of widgets of variable sizes with tiles that each have a maximum cross-axis extent.
- StaggeredGridView.extentBuilder({Key? key, Axis scrollDirection = Axis.vertical, bool reverse = false, ScrollController? controller, bool? primary, ScrollPhysics? physics, bool shrinkWrap = false, EdgeInsetsGeometry? padding, required double maxCrossAxisExtent, required IndexedWidgetBuilder itemBuilder, required IndexedStaggeredTileBuilder staggeredTileBuilder, int? itemCount, double mainAxisSpacing = 0.0, double crossAxisSpacing = 0.0, bool addAutomaticKeepAlives = true, bool addRepaintBoundaries = true, String? restorationId})
- Creates a scrollable, 2D array of widgets of variable sizes with tiles that each have a maximum cross-axis extent that are created on demand.
Properties
- addAutomaticKeepAlives → bool
-
Whether to add keepAlives to children
final
- anchor → double
-
The relative position of the zero scroll offset.
finalinherited
- cacheExtent → double?
-
The viewport has an area before and after the visible area to cache items
that are about to become visible when the user scrolls.
finalinherited
- center → Key?
-
The first child in the GrowthDirection.forward growth direction.
finalinherited
- childrenDelegate → SliverChildDelegate
-
A delegate that provides the children for the StaggeredGridView.
final
- clipBehavior → Clip
-
The content will be clipped (or not) according to this option.
finalinherited
- controller → ScrollController?
-
An object that can be used to control the position to which this scroll
view is scrolled.
finalinherited
- dragStartBehavior → DragStartBehavior
-
Determines the way that drag start behavior is handled.
finalinherited
- gridDelegate → SliverStaggeredGridDelegate
-
A delegate that controls the layout of the children within the
StaggeredGridView.
final
- hashCode → int
-
The hash code for this object.
no setterinherited
- key → Key?
-
Controls how one widget replaces another widget in the tree.
finalinherited
- keyboardDismissBehavior → ScrollViewKeyboardDismissBehavior
-
ScrollViewKeyboardDismissBehavior the defines how this ScrollView will
dismiss the keyboard automatically.
finalinherited
- padding → EdgeInsetsGeometry?
-
The amount of space by which to inset the children.
finalinherited
- physics → ScrollPhysics?
-
How the scroll view should respond to user input.
finalinherited
- primary → bool?
-
Whether this is the primary scroll view associated with the parent
PrimaryScrollController.
finalinherited
- restorationId → String?
-
Restoration ID to save and restore the scroll offset of the scrollable.
finalinherited
- reverse → bool
-
Whether the scroll view scrolls in the reading direction.
finalinherited
- runtimeType → Type
-
A representation of the runtime type of the object.
no setterinherited
- scrollBehavior → ScrollBehavior?
-
A ScrollBehavior that will be applied to this widget individually.
finalinherited
- scrollDirection → Axis
-
The Axis along which the scroll view's offset increases.
finalinherited
- semanticChildCount → int?
-
The number of children that will contribute semantic information.
finalinherited
- shrinkWrap → bool
-
Whether the extent of the scroll view in the scrollDirection should be
determined by the contents being viewed.
finalinherited
Methods
-
build(
BuildContext context) → Widget -
Describes the part of the user interface represented by this widget.
inherited
-
buildChildLayout(
BuildContext context) → Widget -
Subclasses should override this method to build the layout model.
override
-
buildSlivers(
BuildContext context) → List< Widget> -
Build the list of widgets to place inside the viewport.
inherited
-
buildViewport(
BuildContext context, ViewportOffset offset, AxisDirection axisDirection, List< Widget> slivers) → Widget -
Build the viewport.
inherited
-
createElement(
) → StatelessElement -
Creates a StatelessElement to manage this widget's location in the tree.
inherited
-
debugDescribeChildren(
) → List< DiagnosticsNode> -
Returns a list of
DiagnosticsNode
objects describing this node's children.inherited -
debugFillProperties(
DiagnosticPropertiesBuilder properties) → void -
Add additional properties associated with the node.
inherited
-
getDirection(
BuildContext context) → AxisDirection -
Returns the AxisDirection in which the scroll view scrolls.
inherited
-
noSuchMethod(
Invocation invocation) → dynamic -
Invoked when a nonexistent method or property is accessed.
inherited
-
toDiagnosticsNode(
{String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode -
Returns a debug representation of the object that is used by debugging
tools and by DiagnosticsNode.toStringDeep.
inherited
-
toString(
{DiagnosticLevel minLevel = DiagnosticLevel.info}) → String -
A string representation of this object.
inherited
-
toStringDeep(
{String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String -
Returns a string representation of this node and its descendants.
inherited
-
toStringShallow(
{String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String -
Returns a one-line detailed description of the object.
inherited
-
toStringShort(
) → String -
A short, textual description of this widget.
inherited
Operators
-
operator ==(
Object other) → bool -
The equality operator.
inherited