Flutter Sticky Headers

pub package

Lets you place headers on scrollable content that will stick to the top of the container whilst the content is scrolled.

In your pubspec.yaml

dependencies:
  sticky_headers: "^0.1.3"

Usage

import 'package:sticky_headers/sticky_headers.dart';

// ...
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

Example 1 - Headers and Content

Demo 1

Example 2 - Animated Headers with Content

Demo 2

Example 3 - Headers overlapping the Content

Demo 3

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.

Libraries

render
sticky_headers
widget