sticky_headers 0.3.0+2 icon indicating copy to clipboard operation
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.

532
likes
120
pub points
99%
popularity

Publisher

verified publisher iconfluttercommunity.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.

Homepage

Documentation

API reference

License

Icon for licenses.MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on sticky_headers