https://github.com/fluttercommunity/flutter_sticky_headers

Flutter Sticky Headers - Lets you place "sticky headers" into any scrollable content in your Flutter app. No special wrappers or magic required. Maintainer: @slightfoot
https://github.com/fluttercommunity/flutter_sticky_headers

Last synced: about 2 months ago
JSON representation

Flutter Sticky Headers - Lets you place "sticky headers" into any scrollable content in your Flutter app. No special wrappers or magic required. Maintainer: @slightfoot

• Host: GitHub
• URL: https://github.com/fluttercommunity/flutter_sticky_headers
• Owner: fluttercommunity
• License: mit
• Created: 2018-05-06T18:26:54.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2024-03-15T01:58:50.000Z (3 months ago)
• Last Synced: 2024-04-25T21:08:27.444Z (about 2 months ago)
• Language: Dart
• Homepage: https://pub.dev/packages/sticky_headers
• Size: 23.7 MB
• Stars: 1,057
• Watchers: 16
• Forks: 126
• Open Issues: 40
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Authors: AUTHORS

Lists

• awesome-flutter - Sticky Headers - Configurable sticky headers by [Simon Lightfoot](http://www.devangels.london/). (Components / UI)
• awesome-stars - flutter_sticky_headers - Lets you place "sticky headers" into any scrollable content in your Flutter app. No special wrappers or magic required. Maintainer: @slightfoot | fluttercommunity | 1066 | (Dart)

README

        

[![Flutter Community: sticky_headers](https://fluttercommunity.dev/_github/header/sticky_headers)](https://github.com/fluttercommunity/community)

# Flutter Sticky Headers

[![pub package](https://img.shields.io/pub/v/sticky_headers.svg)](https://pub.dartlang.org/packages/sticky_headers)

Lets you place headers on scrollable content that will stick to the top of the container

whilst the content is scrolled.

## Usage

You can place a `StickyHeader` or `StickyHeaderBuilder`

inside any scrollable content, such as:  `ListView`, `GridView`, `CustomScrollView`,

`SingleChildScrollView` or similar.

Depend on it:

```yaml

dependencies:

  sticky_headers: "^0.3.0"

```

Import it:

```dart

import 'package:sticky_headers/sticky_headers.dart';

```

Use it:

```dart

class Example extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return ListView.builder(itemBuilder: (context, index) {

      return StickyHeader(

        header: Container(

          height: 50.0,

          color: Colors.blueGrey[700],

          padding: EdgeInsets.symmetric(horizontal: 16.0),

          alignment: Alignment.centerLeft,

          child: Text('Header #$index',

            style: const TextStyle(color: Colors.white),

          ),

        ),

        content: Container(

          child: Image.network(

            imageForIndex(index), 

            fit: BoxFit.cover,

            width: double.infinity, 

            height: 200.0,

          ),

        ),

      );

    });

  }

}

```

## Examples

### Example 1 - Headers and Content

![Demo 1](https://github.com/slightfoot/flutter_sticky_headers/raw/gh-pages/demo1.gif)

### Example 2 - Animated Headers with Content

![Demo 2](https://github.com/slightfoot/flutter_sticky_headers/raw/gh-pages/demo2.gif)

### Example 3 - Headers overlapping the Content

![Demo 3](https://github.com/slightfoot/flutter_sticky_headers/raw/gh-pages/demo3.gif)

## Bugs/Requests

If you encounter any problems feel free to open an issue. If you feel the library is

missing a feature, please raise a ticket on Github and I'll look into it.

Pull request are also welcome.