maheshj01/alphabet_scroll_view

기술 주제

# flutter # flutter-package

사용 중인 의존성

의존성 목록 5 개

flutter{"sdk":"flutter"}
collection^1.16.0
flutter_test개발 의존성{"sdk":"flutter"}
pedantic개발 의존성>=1.10.0-nullsafety.3 <3.0.0
flutter_lints개발 의존성2.0.1

원본 README

아래는 영문 원문 스냅샷입니다. 최신 내용은 GitHub에서 확인하세요.

README 펼치기 / 접기

alphabet_scroll_view: ^0.3.2

A Scrollable ListView Widget with the dynamic vertical Alphabet List on the Side which you can drag and tap to scroll to the first item starting with that letter in the list.

Features

Responsive on all screens of different Sizes and runs on all Flutter supported platforms
show your own widget(overlayWidget) when pointer is in focus with Screen
Align the alphabet list on the left or right
Tap or drag to scroll to particular Alphabet.

ezgif com-gif-maker

Responsive on device of any size

ezgif com-gif-maker (2)

Installation

Add the dependency

flutter pub add alphabet_scroll_view

Import the package

import 'package:alphabet_scroll_view/alphabet_scroll_view.dart';

Example Usage

AlphabetScrollView(
    list: list.map((e) => AlphaModel(e)).toList()
    itemExtent: 50,
    itemBuilder: (_, k, id) {
    return Padding(
            padding: const EdgeInsets.only(right: 20),
            child: ListTile(
                    title: Text('$id'),
                    subtitle: Text('Secondary text'),
                    leading: Icon(Icons.label),
                    trailing: Radio<bool>(
                      value: false,
                      groupValue: selectedIndex != k,
                      onChanged: (value) {
                        setState(() {
                          selectedIndex = k;
                        });
                      },
                    ),
                ),
            );
        },
    ),

Customize your overlay widget

Screenshot 2021-01-24 at 1 12 37 PM

overlayWidget: (value) => Stack(
                alignment: Alignment.center,
                children: [
                  Icon(
                    Icons.star,
                    size: 50,
                    color: Colors.red,
                  ),
                  Container(
                    height: 50,
                    width: 50,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                    ),
                    alignment: Alignment.center,
                    child: Text(
                      '$value'.toUpperCase(),
                      style: TextStyle(fontSize: 18, color: Colors.white),
                    ),
                  ),
                ],
              ),

Screenshot 2021-01-24 at 1 09 55 PM

 overlayWidget: (value) => Container(
                    height: 50,
                    width: 50,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: Theme.of(context).primaryColor,
                    ),
                    alignment: Alignment.center,
                    child: Text(
                      '$value'.toUpperCase(),
                      style: TextStyle(fontSize: 20, color: Colors.white),
                    ),
                  ),

Overlay Widget in Action