fluttercommunity / Flutter_sticky_headers
Licence: mit
Flutter Sticky Headers - Lets you place "sticky headers" into any scrollable content in your Flutter app. No special wrappers or magic required. Maintainer: @slightfoot
Stars: ✭ 614
Programming Languages
dart
5743 projects
Flutter 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:
dependencies:
sticky_headers: "^0.1.8"
Import it:
import 'package:sticky_headers/sticky_headers.dart';
Use it:
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
Example 2 - Animated Headers with Content
Example 3 - Headers overlapping the Content
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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].