ResponsiveFlexMasonry<T> class

Creates a responsive masonry-style list.

This layout arranges children in a Pinterest/Instagram style which automatically adapts to screen size (mobile, tablet, desktop) without requiring manual calculations.

Example:

ResponsiveFlexMasonry.pinterest(
  itemCount: products.length,
  itemBuilder: (context, index) {
    return ProductCard(products[index]);
  },
)

ResponsiveFlexMasonry with respective constructor creates popular social media layouts, providing a ready-made explore/feed style grid without manually defining custom patterns.

  • Automatically handles responsiveness for different screen widths.
  • Includes animations out of the box (no controllers needed).
Inheritance

Constructors

ResponsiveFlexMasonry.instagram({Key? key, required List<T> items, required ItemBuilder<T>? itemBuilder, double maxRowHeightMultiplier = 1, int? crossAxisCount, EdgeInsets? padding, ScrollPhysics? physics, ScrollController? controller, bool shrinkWrap = false, bool reverse = false, bool? primary, double? cacheExtent, Breakpoints? breakpoints, Duration? animationDuration, Curve? animationCurve, ResponsiveAnimationType animationType = kDefaultResponsiveAnimationType, AnimationFlow animationFlow = kDefaultAnimationFlow, Duration staggerDelay = kDefaultStaggerDelay, int? maxStaggeredItems, CustomAnimationBuilder? customAnimationBuilder, RTLOptions rtlOptions = RTLOptions.defaults, double? mainAxisSpacing = 1, double? crossAxisSpacing = 1})
A masonry layout inspired by Instagram's Explore page.
const
ResponsiveFlexMasonry.pinterest({Key? key, required List<T> items, required ItemBuilder<T>? itemBuilder, int? crossAxisCount, EdgeInsets? padding, ScrollPhysics? physics, ScrollController? controller, bool shrinkWrap = false, bool reverse = false, bool? primary, double? cacheExtent, Breakpoints? breakpoints, Duration? animationDuration, Curve? animationCurve, ResponsiveAnimationType animationType = kDefaultResponsiveAnimationType, AnimationFlow animationFlow = kDefaultAnimationFlow, Duration staggerDelay = kDefaultStaggerDelay, int? maxStaggeredItems, CustomAnimationBuilder? customAnimationBuilder, RTLOptions rtlOptions = RTLOptions.defaults, double? mainAxisSpacing = 15, double? crossAxisSpacing = 10, void onLoadingProgress(int loaded, int total)?})
Non-lazy Pinterest-style masonry grid widget that pre-builds all items for optimal performance.
const

Properties

animationCurve → Curve?
Curve applied to item entrance animations.
finalinherited
animationDuration → Duration?
Duration of item entrance animations.
finalinherited
animationFlow → AnimationFlow
Controls how animations progress (individual, by row, by column, simultaneous).
finalinherited
animationType → ResponsiveAnimationType
Type of animation effect (fade, scale, slide, etc.).
finalinherited
breakpoints → Breakpoints?
Responsive breakpoints configuration for different screen sizes.
finalinherited
cacheExtent → double?
Viewport cache extent for performance optimization.
finalinherited
children → List<Widget>
List of pre-built child widgets for the children constructor.
finalinherited
controller → ScrollController?
Controller for programmatic scroll control.
finalinherited
crossAxisCount → int?
Fixed number of columns. If null, determined automatically based on breakpoints.
finalinherited
crossAxisSeparator → SeparatorBuilder?
Builder for separators between columns (cross axis).
finalinherited
crossAxisSpacing → double?
Spacing between items in a row. Cannot be used with crossAxisSeparator.
finalinherited
customAnimationBuilder → CustomAnimationBuilder?
Custom animation builder for advanced control. Overrides animationType.
finalinherited
hashCode → int
The hash code for this object.
no setterinherited
itemBuilder → ItemBuilder<T>?
Builder function that creates widgets from data items.
finalinherited
items → List<T>
List of data items to be displayed with the builder constructor.
finalinherited
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
mainAxisSeparator → SeparatorBuilder?
Builder for separators between rows (main axis).
finalinherited
mainAxisSeparatorMode → MainAxisSeparatorMode
Controls separator width behavior (fullWidth or itemWidth).
finalinherited
mainAxisSpacing → double?
Spacing between rows. Cannot be used with mainAxisSeparator.
finalinherited
maxRowHeight → double?
Maximum allowed height for a row. Perfect if you don't want to enable useIntrinsicHeight.
finalinherited
maxRowHeightMultiplier → double
Multiplier applied to calculated row heights (For Instagram Layout).
finalinherited
maxStaggeredItems → int?
Maximum items to animate in staggered sequences. Auto-calculated if null.
finalinherited
onLoadingProgress → void Function(int loaded, int total)?
Callback fired with progress updates as images load. Receives (loadedCount, totalCount).
finalinherited
padding → EdgeInsets?
Padding around the list content. Automatically flipped for RTL layouts.
finalinherited
physics → ScrollPhysics?
Scroll physics determining how the list responds to user input.
finalinherited
primary → bool?
Whether this is the primary scroll view associated with the parent.
finalinherited
reverse → bool
Whether the list scrolls in reverse direction.
finalinherited
roundRobinLayout → bool
Distributes items sequentially across columns (1→2→3→1→2→3...), similar to newspaper columns
finalinherited
rtlOptions → RTLOptions
RTL layout configuration options.
finalinherited
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
shrinkWrap → bool
Whether the list wraps its content tightly instead of expanding.
finalinherited
staggerDelay → Duration
Delay between consecutive item animations in staggered mode.
finalinherited
type → ResponsiveListType
Internal type determining which build logic to use.
finalinherited
useIntrinsicHeight → bool
Whether all items in a row match the height of the tallest item.
finalinherited

Methods

createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<BaseResponsiveWidget<T>>
Creates the mutable state for this widget at a given 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
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, int wrapWidth = 65}) → 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