cosee/alphabet_list_view

技术话题

# dart # flutter # listview # package # ui-components

使用的依赖

依赖清单 5 项

flutter{"sdk":"flutter"}
flutter_sticky_header^0.8.0
flutter_test开发依赖{"sdk":"flutter"}
cosee_lints开发依赖^0.13.0
dart_code_linter开发依赖^4.0.0

原始 README

以下为英文项目原文快照，最新内容请访问 GitHub。

展开 / 收起项目 README

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.1.1

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

cosee ↗