scroll_edge_blur 0.1.1

Progressive blur for Flutter: iOS style edge blur for scroll views, toolbars and headers. A GPU shader on the backdrop, no snapshots, cheap while scrolling.

scroll_edge_blur

Progressive blur for Flutter. Content melts into a soft blur as it scrolls under the status bar, a header or a floating toolbar, the way iOS does it.

It runs as a GPU shader on the backdrop of the edge band only. Nothing is snapshotted and the content behind is never re-rendered into an image, so it stays cheap while lists scroll, videos play or maps move.

Features

• Progressive (variable radius) Gaussian blur on any edge: top, bottom, left, right
• ScrollEdgeBlur wraps a scroll view and handles layout and safe areas
• EdgeBlur as a standalone widget for headers, toolbars and overlays
• Any Curve for the falloff, optional tint for a frosted look
• Only the band is processed, the cost doesn't grow with your content
• Touches pass straight through to the content
• Gradient fallback where shader filters aren't available
• No dependencies besides Flutter

Getting started

dependencies:
  scroll_edge_blur: ^0.1.0

import 'package:scroll_edge_blur/scroll_edge_blur.dart';

Optionally load the shader before the first frame, so it never pops in:

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await EdgeBlur.precache();
  runApp(const MyApp());
}

Usage

Blur the edges of a scroll view

ScrollEdgeBlur(
  child: ListView(children: items),
)

That blurs the top edge, including the status bar area. Turn on more edges and style each one:

ScrollEdgeBlur(
  top: const EdgeBlurStyle(extent: 72, sigma: 16),
  bottom: EdgeBlurStyle(
    extent: 110,
    tint: Theme.of(context).colorScheme.surface.withValues(alpha: 0.5),
  ),
  child: GridView.builder(...),
)

The child is laid out exactly as without the blur. Pad your scroll view so the first and last items can rest outside the blurred bands.

Standalone

EdgeBlur blurs whatever is painted behind it, strongest at edge. Give it a size:

Stack(
  children: [
    content,
    const Positioned(
      top: 0,
      left: 0,
      right: 0,
      height: 120,
      child: EdgeBlur(edge: BlurEdge.top, sigma: 20),
    ),
  ],
)

Options

EdgeBlurStyle	Default
extent	96	How far the blur reaches in from the edge. The safe area is added on top.
sigma	16	Blur strength right at the edge, in logical pixels.
curve	Curves.easeIn	Falloff from the far side of the band to the edge.
tint	null	Colour mixed in toward the edge.
fallbackColor	null	Gradient painted where the blur can't run.

ScrollEdgeBlur takes a style for top (on by default), bottom, left and right, plus includeSafeArea (default true).

Platform support

The blur needs Impeller, Flutter's default renderer on iOS and Android (and macOS). EdgeBlur.isSupported tells you at runtime. Where it isn't available (the web, or the Skia renderer) the band paints fallbackColor as a gradient instead, or nothing if you leave it null.

Requires Flutter 3.29 or newer.

Performance

Other progressive blur packages snapshot their whole child into an image every frame and run the blur over all of it at full resolution. This one only shades the pixels inside the band, straight from the backdrop.

Same scene for each: 400 colourful rows auto-scrolling at 900 px/s under a 140px top band, sigma 20, three interleaved rounds of 6 seconds each.

	Raster time, avg	p99	Frames over 16 ms
No blur	1.2 ms	4.0 ms	0
progressive_blur 0.0.2	5.8 ms	12.8 to 18.4 ms	11 of 1079
scroll_edge_blur	2.0 ms	5.5 to 5.9 ms	0 of 1078

Measured on the iPhone 17 Pro Max simulator (iOS 26.5, Impeller, Flutter 3.47) in debug mode, so treat these as relative numbers. Device profiling is next. The blur itself adds about 0.9 ms on top of the bare scene, versus about 4.7 ms.

Limitations

• The band should not be rotated. Translation and scaling are fine.
• On Impeller's OpenGL ES backend (older Android devices) the shader flips coordinates as documented, but hasn't been tested on such a device yet.

Contributing

Issues and pull requests are welcome on GitHub.

Author

Made by Umar Ghaffar. If this package saves you some time, a like on pub.dev or a star on GitHub is much appreciated.

Also by me: liquid_glass_navigation, iOS 26 style Liquid Glass navigation for Flutter.