side_header_list_view

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A Flutter package that implements a ListView with sticky side headers, similar to the Android contacts and calendar apps. It allows users to scroll through a list while keeping section headers visible on the side, improving navigation and visual organization. The headers remain fixed as the user scrolls, enhancing usability for long lists grouped by categories or time periods. Designed for clean, intuitive interfaces in apps requiring categorized data display.

Use cases

Contact list with alphabetical grouping
Calendar view with date headers
Categorized product listings
User profile sections with labels
Long-form content with topic headers

Key features

Sticky side headers
Alphabetical or custom header grouping
Smooth scrolling with header alignment
Customizable header styling
Efficient rendering for large datasets

Suitable for

Apps with categorized data
Contacts or directory apps
Time-based data displays
UIs needing clear section separation
Developers seeking Android-style list design

Considerations

Limited to vertical lists
Header positioning may require layout adjustments
Best suited for narrow to medium screen widths
May need additional styling for dark mode
Not ideal for horizontal scrolling scenarios

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

Listview with sticky headers like the Android contact page

alt text

Usage

  new SideHeaderListView(
    // Set how many items the list has
    itemCount: items.length,
    
    // Set the height of the item widgets. For now this has to be a fixed height
    itemExtend: 150.0,
    
    // Set the header builder, this needs to return the widget for the side header
    headerBuilder: (BuildContext context, int index){
      return new HeaderWidget(items[index].startDate);
    },
    
    // Set the item builder, this is everything in the row without the header
    itemBuilder: (BuildContext context, int index){
      return new ListItem(items[index]);
    },
    
    // HasSameHeader will be used to know whether the header has to be shown for a position 
    hasSameHeader: (int a, int b){
      return items[a].day == items[b].day;
    },
  );

Search packages, repositories and app categories