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

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.