scroll_shadow_container

pub package

A widget that wraps scrollable container and draws neat little shadows until top or bottom of container is not reached.

shadows

Usage

To use this package, add scroll_shadow_container as a dependency in your pubspec.yaml file.

dependencies:
  scroll_shadow_container:

And import the package in your code.

import 'package:scroll_shadow_container/scroll_shadow_container.dart';

Example

You can specify shadow elevation via elevation property which does not very accurately mocks Material's elevation.

ScrollShadowContainer(
  elevation: MaterialElevation.the2dp,
  child: ListView(
    children: List.generate(10, (i) {
      return ListTile(
        leading: CircleAvatar(child: Text((i + 1).toString())),
        title: Text('List item title'),
        subtitle: Text('List item subtitle'),
      );
    }),
  ),
)

Or you can use ScrollShadowContainer.custom constructor to supply your own BoxShadow:

ScrollShadowContainer.custom(
  boxShadow: BoxShadow(blurRadius: 5, spreadRadius: 5),
  child: /* ... */
)

You can also obtain BoxDecorations used by this package using following code.

Container(
  decoration: MaterialShadow.asBoxDecoration(elevation: MaterialElevation.the4dp),
)

I only tried to replicate Material's shadows so they're not actually identical but close. Only 1 to 8 elevation values available.

Libraries

scroll_shadow_container