header_pin_view 1.1.0
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 #
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 headersliverPersistentHeader
: The widget to be pinned at the top while scrollingbody
: The main scrollable contentsliverPersistentHeaderHeight
: Height of the pinned headerpinned
: 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.