https://github.com/cosee/alphabet_list_view
Flutter package. A ListView with sticky headers and an iOS-like clickable sidebar.
https://github.com/cosee/alphabet_list_view
dart flutter listview package ui-components
Last synced: 4 months ago
JSON representation
Flutter package. A ListView with sticky headers and an iOS-like clickable sidebar.
- Host: GitHub
- URL: https://github.com/cosee/alphabet_list_view
- Owner: cosee
- License: bsd-3-clause
- Created: 2022-01-11T11:54:29.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2026-02-03T12:29:45.000Z (5 months ago)
- Last Synced: 2026-02-04T02:39:38.881Z (4 months ago)
- Topics: dart, flutter, listview, package, ui-components
- Language: Dart
- Homepage:
- Size: 45.8 MB
- Stars: 14
- Watchers: 2
- Forks: 20
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Alphabet List View
[![pub package][pub_badge]][pub_badge_link]
[![package publisher][publisher_badge]][publisher_badge_link]
[![style][style_badge]][style_link]
[![license][license_badge]][license_link]
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:
```yaml
dependencies:
alphabet_list_view: ^1.1.1
```
Import it:
```dart
import 'package:alphabet_list_view/alphabet_list_view.dart';
```
Example:
```dart
final List 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:
```dart
final String alphabet = DefaultScrollbarSymbols.alphabet;
```
## Customization options
```dart
final List 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,
);
```
[publisher_badge]: https://img.shields.io/pub/publisher/alphabet_list_view.svg
[publisher_badge_link]: https://pub.dev/publishers/cosee.biz/packages
[license_badge]: https://img.shields.io/github/license/cosee/alphabet_list_view
[license_link]: https://github.com/cosee/alphabet_list_view/blob/main/LICENSE
[style_badge]: https://img.shields.io/badge/style-cosee__lints-brightgreen
[style_link]: https://pub.dev/packages/cosee_lints
[pub_badge]: https://img.shields.io/pub/v/alphabet_list_view.svg
[pub_badge_link]: https://pub.dartlang.org/packages/alphabet_list_view