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).
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.
- Built-in types and core primitives for a Flutter application. [...]
- Support for asynchronous programming, with classes such as Future and Stream. [...]
- Classes and utilities that supplement the collection support in dart:core. [...]
- Encoders and decoders for converting between different data representations, including JSON and UTF-8. [...]
- Built-in types, collections, and other core functionality for every Dart program. [...]
- Interact with developer tools such as the debugger and inspector. [...]
- Mathematical constants and functions, plus a random number generator. [...]
- Lists that efficiently handle fixed sized data (for example, unsigned 8 byte integers) and SIMD numeric types. [...]
- File, socket, HTTP, and other I/O support for non-web applications. [...]
- Concurrent programming using isolates: independent workers that are similar to threads but don't share memory, communicating only via messages. [...]