Alphabet List View

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

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.10

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,
);