letsar/flutter_sticky_header
Fork: 176 Star: 911 (更新于 2024-11-26 00:16:07)
license: MIT
Language: Dart .
Flutter implementation of sticky headers for sliver
最后发布版本: v0.4.0 ( 2019-05-24 01:16:36)
flutter_sticky_header
A Flutter implementation of sticky headers with a sliver as a child.
Features
- Accepts one sliver as content.
- Header can overlap its sliver (useful for sticky side header for example).
- Notifies when the header scrolls outside the viewport.
- Can scroll in any direction.
- Supports overlapping (AppBars for example).
- Supports not sticky headers (with
sticky: false
parameter). - Supports a controller which notifies the scroll offset of the current sticky header.
Getting started
In the pubspec.yaml
of your flutter project, add the following dependency:
dependencies:
...
flutter_sticky_header:
In your library add the following import:
import 'package:flutter_sticky_header/flutter_sticky_header.dart';
For help getting started with Flutter, view the online documentation.
SliverStickyHeader
You can place one or multiple SliverStickyHeader
s inside a CustomScrollView
.
SliverStickyHeader(
header: Container(
height: 60.0,
color: Colors.lightBlue,
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerLeft,
child: Text(
'Header #0',
style: const TextStyle(color: Colors.white),
),
),
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(context, i) => ListTile(
leading: CircleAvatar(
child: Text('0'),
),
title: Text('List tile #$i'),
),
childCount: 4,
),
),
);
SliverStickyHeader.builder
If you want to change the header layout during its scroll, you can use the SliverStickyHeader.builder
constructor.
The example belows changes the opacity of the header as it scrolls off the viewport.
SliverStickyHeader.builder(
builder: (context, state) => Container(
height: 60.0,
color: (state.isPinned ? Colors.pink : Colors.lightBlue)
.withOpacity(1.0 - state.scrollPercentage),
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerLeft,
child: Text(
'Header #1',
style: const TextStyle(color: Colors.white),
),
),
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(context, i) => ListTile(
leading: CircleAvatar(
child: Text('0'),
),
title: Text('List tile #$i'),
),
childCount: 4,
),
),
);
You can find more examples in the Example project.
Sponsoring
I'm working on my packages on my free-time, but I don't have as much time as I would. If this package or any other package I created is helping you, please consider to sponsor me. By doing so, I will prioritize your issues or your pull-requests before the others.
Changelog
Please see the Changelog page to know what's recently changed.
Contributions
Feel free to contribute to this project.
If you find a bug or want a feature, but don't know how to fix/implement it, please fill an issue.
If you fixed a bug or implemented a new feature, please send a pull request.
Thanks
:clap: Thanks to slightfoot with it's RenderBox version (https://github.com/slightfoot/flutter_sticky_headers) which unintentionally challenged me to work in this RenderSliver version.
最近版本更新:(数据更新于 2024-09-13 15:04:17)
2019-05-24 01:16:36 v0.4.0
2018-08-25 16:24:41 v0.3.4
2018-08-22 14:26:20 v0.3.3
2018-06-30 13:57:53 v0.3.0
2018-06-16 20:56:44 v0.1.0
主题(topics):
dart, flutter, sticky-headers
letsar/flutter_sticky_header同语言 Dart最近更新仓库
2024-12-22 15:25:05 Xmarmalade/alisthelper
2024-12-19 13:46:32 3003h/Eros-FE
2024-12-17 11:45:14 KaringX/karing
2024-12-14 22:23:30 guozhigq/pilipala
2024-12-09 02:47:22 KRTirtho/spotube
2024-12-09 00:51:26 chen08209/FlClash