Common Sliver Decorators in Flutter

Recently I have been busy with many projects, so I wrote this article to review and share the most common Sliver decorators in Flutter, both for personal revision and to help others avoid mistakes.

Introduction to Sliver

Sliver widgets are core components in Flutter used inside CustomScrollView to compose flexible scrolling effects. Commonly used Slivers include SliverList , SliverGrid , and SliverAppBar , with SliverList being the most frequent.

1. Common Decorators

1.1 SliverToBoxAdapter

Allows inserting a regular non‑Sliver widget into a Sliver list.

SliverToBoxAdapter(
  child: Container(
    height: 100,
    color: Colors.orange,
    child: Center(child: Text('This is a normal widget')),
  ),
)

1.2 SliverFillRemaining

Fills the remaining scrollable space, useful for loading or error layouts.

SliverFillRemaining(
  child: Container(
    color: Colors.green,
    child: Center(child: Text('Filling remaining space')),
  ),
)

1.3 SliverPadding

Adds padding around a Sliver component.

SliverPadding(
  padding: EdgeInsets.all(16.0),
  sliver: SliverList(
    delegate: SliverChildBuilderDelegate(
      (BuildContext context, int index) {
        return ListTile(title: Text('Item $index'));
      },
      childCount: 100,
    ),
  ),
)

Padding applies to the whole Sliver, not to each child item.

1.4 SliverOpacity

Sets the opacity of an entire Sliver, useful for fade effects.

SliverOpacity(
  opacity: 0.5,
  sliver: SliverList(
    delegate: SliverChildBuilderDelegate(
      (BuildContext context, int index) {
        return ListTile(title: Text('Item $index'));
      },
      childCount: 100,
    ),
  ),
)

1.5 DecoratedSliver

Applies a BoxDecoration (background color, border radius, etc.) to a Sliver.

DecoratedSliver(
  decoration: BoxDecoration(
    color: Colors.blue.withOpacity(0.2),
    borderRadius: BorderRadius.circular(10),
  ),
  sliver: SliverList(
    delegate: SliverChildBuilderDelegate(
      (BuildContext context, int index) {
        return ListTile(title: Text('Item $index'));
      },
      childCount: 100,
    ),
  ),
)

1.6 SliverVisibility & SliverOffstage

Control whether a Sliver is rendered or takes up space.

SliverVisibility(
    visible: true,
    sliver: SliverList(
        delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
            return ListTile(title: Text('Item $index'));
        },
        childCount: 10,
        ),
    ),

SliverOffstage(
    offstage: !_isVisible,
    sliver: SliverList(
        delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
            return ListTile(title: Text('Item $index'));
        },
        childCount: 10,
        ),
    ),

1.7 SliverMainAxisGroup & SliverCrossAxisGroup

Group multiple Slivers along the main or cross axis without third‑party packages.

SliverMainAxisGroup(
    children:
[
      SliverToBoxAdapter(child: Container(height: 100, color: Colors.red)),
      SliverToBoxAdapter(child: Container(height: 100, color: Colors.green)),
      SliverToBoxAdapter(child: Container(height: 100, color: Colors.blue)),
    ],
)

Combined with SliverPersistentHeader , groups can have sticky headers.

1.8 SliverAppBar and newer variants

Creates a flexible, scrollable app bar. Key properties include expandedHeight , pinned , floating , and flexibleSpace . Newer Flutter versions (3.24.0) add SliverFloatingHeader , PinnedHeaderSliver , and SliverResizingHeader for more scenarios.

SliverAppBar(
    expandedHeight: 200.0,
    floating: false,
    pinned: true,
    flexibleSpace: FlexibleSpaceBar(
      title: Text('SliverAppBar Example'),
      background: Image.network('xxxxxx', fit: BoxFit.cover),
    ),
)

Practical Scenario

The article demonstrates how to wrap a LoadStateLayout containing a SliverList with SliverPadding and DecoratedSliver to achieve a decorated loading view without breaking layout constraints.

LoadStateLayout(
    state: controller.loadingState,
    errorMessage: controller.errorMessage,
    errorRetry: () { controller.retryRequest(); },
    successSliverWidget: [
      SliverPadding(
        padding: const EdgeInsets.only(left: 15,right: 15,bottom: 15),
        sliver: DecoratedSliver(
          decoration: BoxDecoration(
            color: const Color(0xFF4DCFF6).withOpacity(0.2),
            borderRadius: BorderRadius.circular(5),
          ),
          sliver: SliverList(
            delegate: SliverChildBuilderDelegate((context, index) {
              return ReportStaffRequestItem(item: state.datas[index]);
            }, childCount: state.datas.length),
          ),
        ),
      ),
    ],
).expanded(),

The final result shows a nicely padded, background‑colored list that respects the Sliver hierarchy.

Conclusion

Understanding and applying the various Sliver decorators—whether for padding, opacity, decoration, visibility, or grouping—allows developers to build sophisticated scrolling UIs in Flutter with fine‑grained control.

The examples target Flutter 3.19.2 and 3.24.0, and all code shown can be used directly in projects.