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