alphabet_list_view 1.1.0 copy "alphabet_list_view: ^1.1.0" to clipboard
alphabet_list_view: ^1.1.0 copied to clipboard

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

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

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,
);
34
likes
140
pub points
86%
popularity
screenshot

Publisher

verified publishercosee.biz

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

Homepage
Repository (GitHub)
View/report issues

Topics

#list

Documentation

API reference

License

BSD-3-Clause (LICENSE)

Dependencies

flutter, flutter_sticky_header

More

Packages that depend on alphabet_list_view