flutter_scroll_shadow

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

Flutter Scroll Shadow is a lightweight package that adds dynamic shadows to scrollable widgets, enhancing visual depth and user feedback. It supports both vertical and horizontal scrolling with full compatibility with ScrollController. Ideal for improving the aesthetic of lists, grids, and other scrollable content across all major platforms including Android, iOS, Web, macOS, Windows, and Linux. The shadow adjusts in real-time as the user scrolls, creating a subtle yet effective visual effect.

Use cases

Enhancing list item visibility
Creating depth in scrollable interfaces
Improving UX with visual feedback
Adding polish to dashboard layouts
Supporting dark mode designs

Key features

Real-time shadow adjustment
Vertical and horizontal scroll support
ScrollController integration
Cross-platform compatibility
Minimal performance overhead

Suitable for

UI designers seeking visual polish
Developers building scroll-heavy apps
Apps requiring subtle animations
Projects targeting multiple platforms
Teams focused on responsive design

Considerations

May impact performance on low-end devices
Shadow appearance depends on theme and background
Limited customization beyond shadow intensity
Not suitable for complex scroll behaviors
Requires careful testing on different screen sizes

Original README snapshot from the linked source repository. Visit the repository for the latest content.

Scroll Shadow

ScrollShadow is a widget for Flutter that adds shadows to a scrollable child.

Supports ScrollController and vertical or horizontal orientation.


ScrollShadow

Features

Adds shadows over a scrollable child while not at its max extents
Supports vertical and horizontal Axis
Customizable animation duration
Determine how wide or tall shadows render

Usage

Make sure to check out the examples on GitHub.

Installation

Add the following line to pubspec.yaml:

dependencies:
  flutter_scroll_shadow: <last-release>

Basic setup

Complete example available here.

ScrollShadow(
  color: Colors.grey,
  child: ListView(
    children: List.generate(20, (index) => ListTile(title: Text('Element $index'),)),
  ),
);

Properties

color: for the shadows; default: Colors.grey
size: The width or height of shadows, depending on Axis; default: 15.0
child: Scrollable child contained by the ScrollShadow
duration: Milliseconds, as an int, for animation of shadow visibility changes; default: 300
fadeInCurve: The animation [Curve] to use for shadow appearance; default: Curves.easeIn
fadeOutCurve: The animation [Curve] to use for shadow disappearance; default: Curves.easeOut
ignoreInteraction: Determines if shadow is wrapped inside a [IgnorePointer] widget, so that all touch events with the shadow will be ignored; default: true