Skip to main content
Mapagam

Implementing Slivers

1. Using CustomScrollView Widget

The CustomScrollView widget in Flutter is a powerful way to create scrollable layouts with complex content. It allows you to define custom scroll behavior using slivers, which are specialized widgets that can be used to build complex scrolling experiences.

Property Description Values
slivers List of sliver widgets to display List<Widget>
scrollDirection Direction in which the scroll view scrolls Axis.horizontal or Axis.vertical
reverse Whether the scroll view scrolls in the reverse direction true or false
controller ScrollController to control the scroll behavior ScrollController
primary Whether this scroll view is the primary scroll view true or false

Example: Basic CustomScrollView

CustomScrollView(
  slivers: [
    SliverAppBar(
      title: Text('My App'),
      floating: true,
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return ListTile(
            title: Text('Item $index'),
          );
        },
        childCount: 50,
      ),
    ),
  ],
)

2. Using SliverAppBar Widget

Property Values Description
floating false Whether the app bar should float above the sliver content.
pinned false Whether the app bar should remain pinned to the top of the scrollable area.
snap false Whether the app bar should snap to the top when scrolling.
expandedHeight 150.0 The height of the app bar when fully expanded.
flexibleSpace null Custom widget to display in the flexible space area.
title Text('SliverAppBar') The title to display in the app bar.

Example: Basic SliverAppBar Usage

SliverAppBar(
  floating: true,
  pinned: true,
  expandedHeight: 200.0,
  title: Text('Flutter Sliver Demo'),
  flexibleSpace: FlexibleSpaceBar(
    title: Text('SliverAppBar'),
    background: Image.asset(
      'assets/images/flutter_logo.png',
      fit: BoxFit.cover,
    ),
  ),
)

3. Using SliverList Widget

Property Values Description
delegate SliverChildDelegate Required. Builds the children of the sliver list.
addAutomaticKeepAlives true | false Whether to wrap each child in a KeepAlive.
addRepaintBoundaries true | false Whether to wrap each child in a RepaintBoundary.
addSemanticIndexes true | false Whether to add semantic indexes to children.

Example: Basic SliverList Usage

SliverList(
  delegate: SliverChildBuilderDelegate(
    (context, index) {
      return ListTile(
        title: Text('Item $index'),
      );
    },
    childCount: 50,
  ),
)
Note: The SliverChildBuilderDelegate is commonly used to build lists dynamically.

4. Using SliverGrid Widget

The SliverGrid widget is used to create a grid of slivers that can be scrolled. It is a part of the flutter package and is used to create a grid of slivers that can be scrolled. It is a part of the flutter package and is used to create a grid of slivers that can be scrolled.

Property Description Values
gridDelegate Defines the layout of the grid. SliverGridDelegate
delegate Defines the content of the grid. SliverChildDelegate

Example: Creating a SliverGrid

SliverGrid(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
  ),
  delegate: SliverChildBuilderDelegate(
    (context, index) {
      return Container(
        color: Colors.blue,
        child: Center(
          child: Text('Item $index'),
        ),
      );
    },
    childCount: 10,
  ),
)

5. Using SliverToBoxAdapter Widget

The SliverToBoxAdapter widget is used to wrap a regular widget and convert it into a sliver. It's particularly useful when you want to include a non-sliver widget inside a CustomScrollView.

Property Description Values
child The widget to be wrapped and converted into a sliver. Widget

Example: Using SliverToBoxAdapter

<CustomScrollView
  slivers: [
    SliverToBoxAdapter(
      child: Container(
        height: 100,
        color: Colors.blue,
        child: Center(child: Text('Static Box')),
      ),
    ),
  ],
)>

6. Using SliverFillRemaining Widget

The SliverFillRemaining widget is used to fill the remaining space in a sliver list or grid. It ensures that the child widget takes up all the available space in the viewport after other slivers have been laid out.

Property Values Description
child Widget The widget to be filled in the remaining space.
hasScrollBody bool Whether the scrollable body has a scrollable content. Defaults to true.
fillOverscroll bool Whether to fill the overscroll area. Defaults to false.

Example: Using SliverFillRemaining

CustomScrollView(
  slivers: [
    SliverAppBar(
      title: Text('SliverFillRemaining Example'),
      floating: true,
    ),
    SliverFillRemaining(
      child: Center(
        child: Text('This fills the remaining space'),
      ),
    ),
  ],
)

7. Using SliverPadding Widget

The SliverPadding widget is used to add padding around slivers in a CustomScrollView. It's particularly useful for creating consistent spacing between slivers and the edges of the scroll view.

Property Description Values
padding The amount of padding to apply around the sliver. EdgeInsets
sliver The sliver widget to be padded. Widget

Example: Using SliverPadding

<CustomScrollView>
  <SliverPadding
    padding: EdgeInsets.all(16.0),
    sliver: SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return ListTile(
            title: Text('Item $index'),
          );
        },
        childCount: 50,
      ),
    ),
  >
</CustomScrollView>

8. Using SliverFixedExtentList Widget

The SliverFixedExtentList widget is used to display a list of slivers with fixed extent (height or width). It's particularly useful for creating lists where each item has the same size, such as a list of cards or items with uniform height.

Property Description Values
itemExtent Defines the fixed extent (height or width) of each item in the list. double
delegate Provides the list of slivers to be displayed in the list. SliverChildDelegate
scrollDirection Defines the scroll direction of the list (horizontal or vertical). Axis.horizontal or Axis.vertical

Example: Using SliverFixedExtentList

SliverFixedExtentList(
  itemExtent: 100.0,
  delegate: SliverChildBuilderDelegate(
    (context, index) {
      return Container(
        color: Colors.blue[100 * (index % 9)],
        child: Center(
          child: Text('Item $index'),
        ),
      );
    },
    childCount: 20,
  ),
)

9. Using SliverPersistentHeader Widget

The SliverPersistentHeader widget is used to create headers that remain visible while scrolling through a sliver-based list or grid. It's particularly useful for creating app bars that change appearance as the user scrolls.

Property Description Values
delegate Delegate that controls the header's appearance and behavior SliverPersistentHeaderDelegate
floating Whether the header floats above content when scrolling true or false
pinned Whether the header remains pinned to the top during scroll true or false
snapConfiguration Configuration for snapping behavior when scrolling SliverSnapConfiguration

Example: Basic SliverPersistentHeader

SliverPersistentHeader(
  delegate: MySliverDelegate(),
  floating: false,
  pinned: true,
)

Example: Custom SliverPersistentHeader Delegate

class MySliverDelegate extends SliverPersistentHeaderDelegate {
  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: Colors.blue,
      child: Center(
        child: Text('Header'),
      ),
    );
  }

  @override
  double get maxExtent => 100.0;

  @override
  double get minExtent => 60.0;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    return false;
  }
}

10. Creating Sticky Headers with Slivers

Property Description Usage
SliverAppBar Creates a sliver app bar that can stick to the top of the scrollable area 
SliverAppBar(
  pinned: true,
  title: Text('Sticky Header'),
)
pinned When true, the app bar remains visible while scrolling pinned: true
floating When true, the app bar floats above content when scrolling floating: true

Example: Sticky Header with SliverAppBar

CustomScrollView(
  slivers: [
    SliverAppBar(
      pinned: true,
      title: Text('My App'),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(
          title: Text('Item $index'),
        ),
        childCount: 50,
      ),
    ),
  ],
)
Note: The pinned property ensures that the SliverAppBar stays visible at the top of the scrollable area.

11. Using SliverOpacity and SliverIgnorePointer

Property Values Description
opacity double Opacity level of the sliver, from 0.0 (transparent) to 1.0 (opaque)
child Widget The sliver widget to be wrapped with opacity

Example: SliverOpacity usage

SliverOpacity(
  opacity: 0.5,
  child: SliverList(
    delegate: SliverChildBuilderDelegate(
      (context, index) => ListTile(title: Text('Item $index')),
      childCount: 10,
    ),
  ),
)
Property Values Description
ignoring bool If true, the sliver will ignore pointer events
child Widget The sliver widget to be wrapped with ignore pointer

Example: SliverIgnorePointer usage

SliverIgnorePointer(
  ignoring: true,
  child: SliverList(
    delegate: SliverChildBuilderDelegate(
      (context, index) => ListTile(title: Text('Item $index')),
      childCount: 10,
    ),
  ),
)

Was this article helpful?

Related Cheat Sheets