Flutter Listview Header

Flutter Listview Header


Flutter implementation of sticky headers and Flutter Expandable Listview .Support use it in a CustomScrollView.


Flutter Listview Header


  • Support build an expandable ListView, which can expand/collapse section group or pin section header.
  • Use it with CustomScrollView„ÄĀSliverAppBar.
  • Listen the scroll offset of current sticky header,
    and current sticky header index.

Getting Started

In the pubspec.yaml of your flutter project, add the following dependency:

  sticky_and_expandable_list: '^0.1.0'

Basic Usage

    //sectionList is a custom data source for ExpandableListView.
    //echo Section class must implement ExpandableListSection.
    List<Section> sectionList = MockData.getExampleSections();
    return ExpandableListView(
      builder: SliverExpandableChildDelegate<String, Section>(
          sectionList: sectionList,
          headerBuilder: (context, section, index) => Text("Header #$index"),
          itemBuilder: (context, section, item, index) => ListTile(
                leading: CircleAvatar(
                  child: Text("$index"),
                title: Text(item),

Detail Examples


How to expand/collapse item?



How to listen current sticky header or the sticky header scroll offset?

  Widget build(BuildContext context) {
      builder: SliverExpandableChildDelegate<String, Section>(
        headerController: _getHeaderController(),

  _getHeaderController() {
    var controller = ExpandableListHeaderController();
    controller.addListener(() {
      print("switchingSectionIndex:${controller.switchingSectionIndex}, stickySectionIndex:" +
    return controller;

Source Code

Please Visit Flutter Listview Header Source Code at GitHub

Be the first to comment

Leave a Reply

Your email address will not be published.