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