Flutter Sticky Headers into any scrollable content

Flutter Sticky Headers

With the popularity of social media, scrolling has become a must-have feature for discovery interfaces. When the user searches for something specific, they are able to browse through a large number of items to find the one thing they like. People visit sites for content first, with everything else secondary. And scrolling helps people access the content they need. To develop this function, Flutter Sticky headers into any scrollable content allows you to place headers on scrollable content that will stick to the top of the container whilst the content is scrolled.

Usage

The first step for you.

You can place a StickyHeader or StickyHeaderBuilder
inside any scrollable content, such as: ListView, GridView, CustomScrollView,
SingleChildScrollView or similar.

Depend on it:

dependencies:
  sticky_headers: "^0.1.7"

Import it:

import 'package:sticky_headers/sticky_headers.dart';

Use it:

class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new ListView.builder(itemBuilder: (context, index) {
      return new StickyHeader(
        header: new Container(
          height: 50.0,
          color: Colors.blueGrey[700],
          padding: new EdgeInsets.symmetric(horizontal: 16.0),
          alignment: Alignment.centerLeft,
          child: new Text('Header #$index',
            style: const TextStyle(color: Colors.white),
          ),
        ),
        content: new Container(
          child: new Image.network(imageForIndex(index), fit: BoxFit.cover,
            width: double.infinity, height: 200.0),
        ),
      );
    });
  }
}

Examples

Here are some particular examples displayed to you.

Example 1 – Headers and Content

Example 2 – Animated Headers with Content

Example 3 – Headers overlapping the Content

Bugs/Requests

Finally, if you run into any issues, please submit a support ticket. Please submit a ticket on Github if you believe the library is lacking a feature, and I’ll investigate.
All requests are also welcome, requests for a pull are also appreciated.

GitHub

https://github.com/fluttercommunity/flutter_sticky_headers