A ListView with sticky headers and an iOS-like clickable sidebar.

Preview example

Features

  • Easy to create
  • Customizable header
  • Customizable sidebar
  • Customizable overlay
  • Right to left language support
  • Configurable sidebar items

Usage

Depend on it:

dependencies:
  alphabet_list_view: ^0.1.0

Import it:

import 'package:alphabet_list_view/alphabet_list_view.dart';

Example:

final List<AlphabetListViewItemGroup> tech = [
    AlphabetListViewItemGroup(tag: 'A', children: const [
    Text('Apple'),
    Text('Amazon'),
    Text('Alibaba'),
    ]),
    AlphabetListViewItemGroup(tag: 'I', children: const [
    Text('Intel'),
    Text('IBM'),
    ]),
];

AlphabetListView(
    items: tech,
);

Customization options

final List<AlphabetListViewItemGroup> tech = [
  AlphabetListViewItemGroup(tag: 'A', children: const [
    Text('Apple'),
    Text('Amazon'),
    Text('Alibaba'),
  ]),
  AlphabetListViewItemGroup(tag: 'I', children: const [
    Text('Intel'),
    Text('IBM'),
  ]),
];

final AlphabetListViewOptions options = AlphabetListViewOptions(
  listOptions: ListOptions(
    listHeaderBuilder: (context, symbol) {
      return Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          padding: const EdgeInsets.all(8.0),
          decoration: BoxDecoration(
            color: Colors.grey,
            borderRadius: BorderRadius.circular(100),
          ),
          child: Text(symbol),
        ),
      );
    },
  ),
  scrollbarOptions:
  const ScrollbarOptions(
    backgroundColor: Colors.yellow,
  ),
  overlayOptions: const OverlayOptions(
    showOverlay: false,
  ),
);

AlphabetListView(
  items: tech,
  options: options,
);

Libraries

alphabet_list_view