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
License
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
Customer Reviews
There are no reviews.
