GlassScrollEdgeEffect class

A widget that fades scroll content at the top and/or bottom edges.

Matches iOS 26's .scrollEdgeEffectStyle(_:for:) modifier. Places gradient overlays at the specified edges, creating the effect of content dissolving into navigation bars or bottom bars rather than clipping sharply.

How it works

Inside GlassPage (recommended): Automatically captures the page's background texture and paints it over the scroll edges with a gradient alpha mask. This produces a pixel-perfect fade for ANY background — images, patterns, mesh gradients, anything. No configuration needed.

Outside GlassPage: Falls back to a solid-colour gradient overlay using fadeColor (or the scaffold background colour from the theme). Works perfectly for solid-colour and simple gradient backgrounds.

Why not ShaderMask?

ShaderMask(blendMode: BlendMode.dstIn) creates a saveLayer that breaks BackdropFilterLayer (premium glass) on Impeller — glass widgets inside it render as opaque black because BackdropFilterLayer samples an empty backdrop within the saveLayer boundary. This widget avoids that by placing overlays ON TOP of the content rather than wrapping it.

Usage

GlassScrollEdgeEffect(
  topFadeHeight: 100,
  bottomFadeHeight: 80,
  child: ListView.builder(
    itemBuilder: (_, i) => ListTile(title: Text('Item $i')),
  ),
)

With GlassAppBar

Scaffold(
  extendBodyBehindAppBar: true,
  appBar: GlassAppBar(title: Text('Messages')),
  body: GlassScrollEdgeEffect(
    topFadeHeight: MediaQuery.paddingOf(context).top + 44 + 50,
    bottomFadeHeight: 60 + MediaQuery.paddingOf(context).bottom,
    child: ListView(...),
  ),
)

The topFadeHeight should typically cover the safe area + app bar height

  • a buffer zone so content fades before reaching the navigation buttons.
Inheritance

Constructors

GlassScrollEdgeEffect({Key? key, required Widget child, double topFadeHeight = 100.0, double bottomFadeHeight = 60.0, bool fadeTop = true, bool fadeBottom = true, GlassScrollEdgeStyle style = GlassScrollEdgeStyle.soft, Color? fadeColor})
Creates a scroll edge effect that fades content at the edges.
const

Properties

bottomFadeHeight → double
The height of the bottom fade zone in logical pixels.
final
child → Widget
The scrollable content to apply edge fading to.
final
fadeBottom → bool
Whether to fade content at the bottom edge.
final
fadeColor → Color?
Fallback colour used when no background texture is available.
final
fadeTop → bool
Whether to fade content at the top edge.
final
hashCode → int
The hash code for this object.
no setterinherited
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
style → GlassScrollEdgeStyle
The edge effect style.
final
topFadeHeight → double
The height of the top fade zone in logical pixels.
final

Methods

createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<GlassScrollEdgeEffect>
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
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