A Flutter implementation of sticky headers with a sliver as a child.
Features
- Accepts one sliver as content.
- Header can overlap its sliver (useful for sticky side header for example).
- Notifies when the header scrolls outside the viewport.
- Can scroll in any direction.
- Supports overlapping (AppBars for example).
- Supports not sticky headers (with
sticky: false
parameter). - Supports a controller which notifies the scroll offset of the current sticky header.
Getting started
In the pubspec.yaml
of your flutter project, add the following dependency:
dependencies: ... flutter_sticky_header: "^0.4.5"
In your library add the following import:
import 'package:flutter_sticky_header/flutter_sticky_header.dart';
For help getting started with Flutter, view the online documentation.
SliverStickyHeader
You can place one or multiple SliverStickyHeader
s inside a CustomScrollView
.
SliverStickyHeader( header: Container( height: 60.0, color: Colors.lightBlue, padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerLeft, child: Text( 'Header #0', style: const TextStyle(color: Colors.white), ), ), sliver: SliverList( delegate: SliverChildBuilderDelegate( (context, i) => ListTile( leading: CircleAvatar( child: Text('0'), ), title: Text('List tile #$i'), ), childCount: 4, ), ), );
SliverStickyHeaderBuilder
If you want to change the header layout during its scroll, you can use the SliverStickyHeaderBuilder
.
The example belows changes the opacity of the header as it scrolls off the viewport.
SliverStickyHeaderBuilder( builder: (context, state) => Container( height: 60.0, color: (state.isPinned ? Colors.pink : Colors.lightBlue) .withOpacity(1.0 - state.scrollPercentage), padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerLeft, child: Text( 'Header #1', style: const TextStyle(color: Colors.white), ), ), sliver: SliverList( delegate: SliverChildBuilderDelegate( (context, i) => ListTile( leading: CircleAvatar( child: Text('0'), ), title: Text('List tile #$i'), ), childCount: 4, ), ), );