ShadStickySectionList class

A scrollable list with a single dynamic sticky header that updates based on the current section in view.

The header at the top changes instantly (no animation) to reflect the section currently being scrolled through. Section headers appear inline within the scrollable content. The active section is detected by measuring the real, live position of each inline header on every scroll frame, so the title switches exactly when a section's header reaches the top of the scroll area — regardless of item heights, async image loads, or viewport resizes.

Use as the child of a ShadSheet with scrollable: false:

showShadSheet(
  context: context,
  builder: (context) => ShadSheet(
    scrollable: false,
    child: ShadStickySectionList(
      sections: [
        ShadListSection(
          header: Text('Popular'),
          items: popularProducts
              .map((p) => ProductCard(product: p))
              .toList(),
        ),
        ShadListSection(
          header: Text('New Arrivals'),
          items: newProducts.map((p) => ProductCard(product: p)).toList(),
        ),
      ],
    ),
  ),
);
Inheritance
Available extensions

Constructors

ShadStickySectionList({Key? key, required List<ShadListSection> sections, ScrollController? controller, ScrollPhysics? physics, EdgeInsetsGeometry? padding, EdgeInsetsGeometry? headerPadding, Color? headerBackgroundColor, ShadBorder? headerBorder, AlignmentGeometry? headerAlignment, EdgeInsetsGeometry? inlineHeaderPadding, Color? inlineHeaderBackgroundColor, Clip clipBehavior = Clip.hardEdge, ValueChanged<int>? onSectionChanged})
A scrollable list with a single dynamic sticky header that updates based on the current section in view.
const

Properties

clipBehavior → Clip
final
controller → ScrollController?
Optional ScrollController for the internal scroll view.
final
hashCode → int
The hash code for this object.
no setterinherited
headerAlignment → AlignmentGeometry?
Alignment of the header content within the sticky header bar. Defaults to Alignment.centerLeft.
final
headerBackgroundColor → Color?
Background color of the sticky header. Defaults to the theme's background color.
final
headerBorder → ShadBorder?
Border surrounding the sticky header. Defaults to a bottom border using the theme's border color.
final
headerPadding → EdgeInsetsGeometry?
Padding inside the sticky header pinned at the top. Defaults to EdgeInsets.fromLTRB(24, 20, 24, 12).
final
inlineHeaderBackgroundColor → Color?
Background color of the inline section headers. Defaults to the theme's muted color at 30% alpha.
final
inlineHeaderPadding → EdgeInsetsGeometry?
Padding inside the inline section headers within the scroll content. Defaults to EdgeInsets.symmetric(horizontal: 24, vertical: 12).
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
onSectionChanged → ValueChanged<int>?
Called when the active section changes during scrolling.
final
padding → EdgeInsetsGeometry?
Padding around the entire scrollable content. Defaults to EdgeInsets.zero.
final
physics → ScrollPhysics?
Scroll physics for the list.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
sections → List<ShadListSection>
The sections to display in the list.
final

Methods

animate({Key? key, List<Effect>? effects, AnimateCallback? onInit, AnimateCallback? onPlay, AnimateCallback? onComplete, bool? autoPlay, Duration? delay, AnimationController? controller, Adapter? adapter, double? target, double? value}) → Animate

Available on Widget, provided by the AnimateWidgetExtensions extension

Wraps the target Widget in an Animate instance, and returns the instance for chaining calls. Ex. myWidget.animate() is equivalent to Animate(child: myWidget).
createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<ShadStickySectionList>
Creates the mutable state for this widget at a given location in the tree.
override
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
positionedWith(ShadPosition position) → Widget

Available on Widget, provided by the PositionedExt extension

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