header_pin_view 1.1.0 copy "header_pin_view: ^1.1.0" to clipboard
header_pin_view: ^1.1.0 copied to clipboard

A Flutter package that provides a customizable header pinned view with support for persistent headers and custom body content.

Header Pin View #

A Flutter package that provides a customizable header pinned view with support for persistent headers and custom body content. This package allows you to create scrollable views with pinned headers that stay at the top while the content scrolls underneath.

Features #

  • 📌 Sticky header that pins to the top while scrolling
  • 🎨 Customizable header and persistent header widgets
  • 📱 Smooth scrolling behavior
  • 🎯 Easy to implement and customize
  • 🔧 Flexible configuration options

Screenshots #

Screenshot 1 Screenshot 2 Screenshot 3

Demo #

Note: For HD video demo, check out our demo video on GitHub releases

Getting started #

Add this to your package's pubspec.yaml file:

dependencies:
  header_pin_view: ^1.0.0

Usage #

Import the package in your Dart code:

import 'package:header_pin_view/header_pin_view.dart';

Basic usage example:

HeaderPinnedView(
  headerSliverBuilder: Container(
    height: 200,
    color: Colors.blue,
    child: Center(child: Text('Header Content')),
  ),
  sliverPersistentHeader: Container(
    color: Colors.grey,
    child: Center(child: Text('Pinned Header')),
  ),
  sliverPersistentHeaderHeight: 60,
  body: SingleChildScrollView(
    child: ListView.builder(
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      itemCount: 50,
      itemBuilder: (context, index) => ListTile(
        title: Text('Item $index'),
      ),
    ),
  ),
)

Parameters #

  • headerSliverBuilder: The widget to be displayed as the main header
  • sliverPersistentHeader: The widget to be pinned at the top while scrolling
  • body: The main scrollable content
  • sliverPersistentHeaderHeight: Height of the pinned header
  • pinned: Whether the header should be pinned (default: true)
  • backgroundColor: Background color of the entire view (optional)

Additional information #

For more examples and detailed usage, check out the /example directory in the repository.

For issues and feature requests, please file them on the GitHub repository.

2
likes
150
points
28
downloads

Publisher

unverified uploader

Weekly Downloads

A Flutter package that provides a customizable header pinned view with support for persistent headers and custom body content.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on header_pin_view