sticky_headers 0.3.0+2 copy "sticky_headers: ^0.3.0+2" to clipboard
sticky_headers: ^0.3.0+2 copied to clipboard

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

Flutter Community: sticky_headers

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.

Usage #

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.3.0"

Import it:

import 'package:sticky_headers/sticky_headers.dart';

Use it:

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

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.

817
likes
120
pub points
99%
popularity

Publisher

verified publisherfluttercommunity.dev

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

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on sticky_headers