flutter_sticky_header

# flutter_sticky_header

A Flutter implementation of sticky headers with a sliver as a child.

[![Pub](https://img.shields.io/pub/v/flutter_sticky_header.svg)](https://pub.dartlang.org/packages/flutter_sticky_header)
[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QTT34M25RDNL6)

![Screenshot](https://raw.githubusercontent.com/letsar/flutter_sticky_header/master/doc/images/sticky_header_all.gif)

## 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.
* Notifies when the state of a header changes (with the `onStateChanged` parameter).
* Supports headers at the end of their sliver, such as date headers in a reversed chat list or sticky footers (with the `stickToEnd` parameter).

## Do you need this package?

Since Flutter 3.13, you can create simple sticky headers with the framework alone: put a pinned header (for example a `PinnedHeaderSliver`, available since Flutter 3.24) and the content in a `SliverMainAxisGroup`. The header stays pinned until the end of its group:

```dart
CustomScrollView(
  slivers: [
    SliverMainAxisGroup(
      slivers: [
        PinnedHeaderSliver(child: Header()),
        SliverList.builder(itemBuilder: ...),
      ],
    ),
  ],
)
```

This package is still useful if you need:

* a header that overlaps its content, for example sticky side headers (`overlapsContent`);
* a header built from its state, whether it is pinned and how much it is scrolled out (`SliverStickyHeader.builder`), or notified when this state changes (`onStateChanged`);
* the scroll offset of the current sticky header (`StickyHeaderController`);
* a header at the end of its sliver, sticking to the end of the viewport (`stickToEnd`), for example in a reversed list.

## Getting started

In the `pubspec.yaml` of your flutter project, add the following dependency:

```yaml
dependencies:
  ...
  flutter_sticky_header:
```

In your library add the following import:

```dart
import 'package:flutter_sticky_header/flutter_sticky_header.dart';
```

For help getting started with Flutter, view the online [documentation](https://flutter.io/).

## SliverStickyHeader

You can place one or multiple `SliverStickyHeader`s inside a `CustomScrollView`.

```dart
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(