alphabet_list_view

Description:

alphabet list view

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: ^1.1.1
copied to clipboard
Import it:
import 'package:alphabet_list_view/alphabet_list_view.dart';
copied to clipboard
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,
);
copied to clipboard
Default symbols #
You can easily get the alphabet (A-Z) using the following code:
final String alphabet = DefaultScrollbarSymbols.alphabet;
copied to clipboard
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,
);
copied to clipboard