A Flutter implementation of sticky headers with a sliver as a child.
- 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).
Getting started #
pubspec.yaml of your flutter project, add the following dependency:
dependencies: ... flutter_sticky_header: "^0.3.4"
In your library add the following import:
For help getting started with Flutter, view the online documentation.
You can place one or multiple
SliverStickyHeaders inside a
new SliverStickyHeader( header: new Container( height: 60.0, color: Colors.lightBlue, padding: EdgeInsets.symmetric(horizontal: 16.0), alignment: Alignment.centerLeft, child: new Text( 'Header #0', style: const TextStyle(color: Colors.white), ), ), sliver: new SliverList( delegate: new SliverChildBuilderDelegate( (context, i) => new ListTile( leading: new CircleAvatar( child: new Text('0'), ), title: new Text('List tile #$i'), ), childCount: 4, ), ), );
If you want to change the header layout during its scroll, you can use the
The example belows changes the opacity of the header as it scrolls off the viewport.
new SliverStickyHeaderBuilder( builder: (context, state) => new 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: new Text( 'Header #1', style: const TextStyle(color: Colors.white), ), ), sliver: new SliverList( delegate: new SliverChildBuilderDelegate( (context, i) => new ListTile( leading: new CircleAvatar( child: new Text('0'), ), title: new Text('List tile #$i'), ), childCount: 4, ), ), );
You can find more examples in the Example project.
Please see the Changelog page to know what's recently changed.
Feel free to contribute to this project.
👏 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.
- Updated SDK constraint to support new error message formats.
- Updated error message formats
- Print call for headerPosition
- Overlap support
- Dart 2 support
- Hit test implementation (https://github.com/letsar/flutter_sticky_header/issues/7)
SliverStickyHeaderStateclass. This state has
isPinnedproperties and it's passed to the
SliverStickyHeaderBuilderwhen it changes.
- The second parameter for
SliverStickyHeaderWidgetBuildertakes now a
SliverStickyHeaderStateinstead of a double.
- Rewrite how to notify the scroll percentage, so that the it does not lag by one frame.
- Initial Open Source release.
A new Flutter project.
Getting Started #
For help getting started with Flutter, view our online documentation.
Use this package as a library
1. Depend on it
Add this to your package's pubspec.yaml file:
dependencies: flutter_sticky_header: ^0.4.0
2. Install it
You can install packages from the command line:
$ flutter pub get
Alternatively, your editor might support
flutter pub get.
Check the docs for your editor to learn more.
3. Import it
Now in your Dart code, you can use:
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
We analyzed this package on Dec 13, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:
- Dart: 2.7.0
- pana: 0.13.1+4
- Flutter: 1.12.13+hotfix.4