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 ↗