cosee/alphabet_list_view

Alphabet List View

pub package package publisher style license

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: ^1.1.1

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

Default symbols

You can easily get the alphabet (A-Z) using the following code:

final String alphabet = DefaultScrollbarSymbols.alphabet;

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