Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fluttercommunity/flutter_sticky_headers
Flutter Sticky Headers - Lets you place "sticky headers" into any scrollable content in your Flutter app. No special wrappers or magic required. Maintainer: @slightfoot
https://github.com/fluttercommunity/flutter_sticky_headers
Last synced: about 2 months ago
JSON representation
Flutter Sticky Headers - Lets you place "sticky headers" into any scrollable content in your Flutter app. No special wrappers or magic required. Maintainer: @slightfoot
- Host: GitHub
- URL: https://github.com/fluttercommunity/flutter_sticky_headers
- Owner: fluttercommunity
- License: mit
- Created: 2018-05-06T18:26:54.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-03-15T01:58:50.000Z (6 months ago)
- Last Synced: 2024-05-20T22:45:24.185Z (4 months ago)
- Language: Dart
- Homepage: https://pub.dev/packages/sticky_headers
- Size: 23.7 MB
- Stars: 1,062
- Watchers: 16
- Forks: 129
- Open Issues: 42
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Authors: AUTHORS
Awesome Lists containing this project
README
[![Flutter Community: sticky_headers](https://fluttercommunity.dev/_github/header/sticky_headers)](https://github.com/fluttercommunity/community)
# Flutter Sticky Headers
[![pub package](https://img.shields.io/pub/v/sticky_headers.svg)](https://pub.dartlang.org/packages/sticky_headers)
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:
```yaml
dependencies:
sticky_headers: "^0.3.0"
```Import it:
```dart
import 'package:sticky_headers/sticky_headers.dart';
```Use it:
```dart
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](https://github.com/slightfoot/flutter_sticky_headers/raw/gh-pages/demo1.gif)### Example 2 - Animated Headers with Content
![Demo 2](https://github.com/slightfoot/flutter_sticky_headers/raw/gh-pages/demo2.gif)### Example 3 - Headers overlapping the Content
![Demo 3](https://github.com/slightfoot/flutter_sticky_headers/raw/gh-pages/demo3.gif)## 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.