Skip to content

GlassHeader

GlassHeader renders a frosted-glass panel that slides in from the top of the scroll view. It uses BackdropFilter to blur the content behind it, producing a modern glassmorphism effect that works especially well on image-heavy backgrounds.

Basic Usage

SmartRefresher(
  controller: _controller,
  header: const GlassHeader(),
  onRefresh: _onRefresh,
  child: ListView.builder(...),
)

Properties

Property	Type	Default	Description
`blurX`	`double`	`10.0`	Horizontal Gaussian blur radius for the backdrop.
`blurY`	`double`	`10.0`	Vertical Gaussian blur radius for the backdrop.
`color`	`Color`	`Colors.white30`	Fill color of the glass panel (use a semi-transparent color).
`progressIndicatorColor`	`Color`	`Colors.white`	Color of the `CircularProgressIndicator` shown during refresh.
`child`	`Widget?`	`null`	Custom child placed inside the glass panel.
`height`	`double`	`60.0`	Height reserved for the header.
`completeDuration`	`Duration`	`600ms`	Time the complete state is shown.

Examples

Subtle Light Blur

GlassHeader(
  blurX: 12.0,
  blurY: 12.0,
  color: Colors.white.withOpacity(0.15),
  progressIndicatorColor: Colors.white,
)

Dark Tinted Glass

GlassHeader(
  blurX: 20.0,
  blurY: 20.0,
  color: Colors.black.withOpacity(0.2),
  progressIndicatorColor: Colors.white70,
)

Custom Child Inside Glass

GlassHeader(
  color: Colors.white.withOpacity(0.2),
  child: const Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Icon(Icons.refresh, color: Colors.white),
      SizedBox(width: 10),
      Text('Refreshing…', style: TextStyle(color: Colors.white)),
    ],
  ),
)

Tips