lazy_sticky_headers

Description:

lazy sticky headers

lazy_sticky_headers #
A flutter implementation of a sticky header list widget with lazy loading support. Significant performance improvement compared to other non-lazy implementations.



Features #

Headers and contents are all lazy-loaded.
Supports programmatically scrolling to a specific item in the list.

Getting Started #
In the pubspec.yaml of your flutter project, add the following dependency:
dependencies:
...
lazy_sticky_headers:
copied to clipboard
In your library add the following import:
...
import 'package:lazy_sticky_headers/lazy_sticky_headers.dart';
copied to clipboard
Usage Example #
Defining a LazyStickyHeaders widget #
LazyStickyHeaders<String, String>(
scrollPhysics: const AlwaysScrollableScrollPhysics(parent: BouncingScrollPhysics()),
// Header
header: List.generate(5, (header) => header.toString()),

// Builder header
builderHeader: (header) {
return Row(
children: [
Container(
padding: const EdgeInsets.fromLTRB(25, 5, 25, 5),
margin: const EdgeInsets.fromLTRB(5, 5, 5, 5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5.0),
color: Colors.grey,
),
child: SizedBox(child: Text('Header $header')),
)
],
);
},

// Content
content: List.generate(
5,
(header) => List.generate(
10,
(content) {
return "$header --- Lorem ipsum dolor sit amet, consectetur adipiscing elit, "
"sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet venenatis ";
},
),
),

// Builder content
builderContent: (content) {
return Container(
padding: const EdgeInsets.fromLTRB(5, 5, 5, 5),
margin: const EdgeInsets.fromLTRB(5, 5, 5, 5),
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue,
),
),
child: Text(content),
);
},
),
copied to clipboard
Defining a Header item and builder #
The example below shows the generation of the header item and the widget builder for each header.
// Header
header: List.generate(5, (header) => header.toString()),

// Builder header
builderHeader: (header) {
return Row(
children: [
Container(
padding: const EdgeInsets.fromLTRB(25, 5, 25, 5),
margin: const EdgeInsets.fromLTRB(5, 5, 5, 5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5.0),
color: Colors.grey,
),
child: SizedBox(child: Text('Header $header')),
)
],
);
},
copied to clipboard
Defining a Content item and builder #
The example below shows the generation of the content item and the widget builder for each content. Each header will have a corresponding list of content associated with it. Ensure that the number of header matches with the number of list of content.
// Content
content: List.generate(
5,
(header) => List.generate(
10,
(content) {
return "$header --- Lorem ipsum dolor sit amet, consectetur adipiscing elit, "
"sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet venenatis ";
},
),
),

// Builder content
builderContent: (content) {
return Container(
padding: const EdgeInsets.fromLTRB(5, 5, 5, 5),
margin: const EdgeInsets.fromLTRB(5, 5, 5, 5),
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue,
),
),
child: Text(content),
);
},
copied to clipboard
Scrolling to list item #
The example below shows the index-based scrolling feature.
...
final _itemScrollController = StickyItemScrollController();

void onClicked(int index){
_itemScrollController.scrollTo(
index: index,
duration: const Duration(milliseconds: 500),
);
}

@override
Widget build(BuildContext context) {
return LazyStickyHeaders<String, String>(
...
scrollController: _itemScrollController,

...
);

copied to clipboard
Like my work? #
Support me with
41fezqfD3syGsUQNnR8t4hQghCJG61YWmHkYHMmYcNFoMgAg3VPhpXi7J94zdqqW7uBMrTTJS1FwNEZhCsoGMa2T3vQq82A
or