alphabet_scroll_view 0.2.0
alphabet_scroll_view: ^0.2.0 copied to clipboard

Flutter Android iOS web

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

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(waterMark) 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
dependencies:
  alphabet_scroll_view: ^0.2.0
  • 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 waterMark #

Screenshot 2021-01-24 at 1 12 37 PM
waterMark: (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
 waterMark: (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),
                    ),
                  ),

WaterMark in Action #

ezgif com-gif-maker

Refer the complete example here

Contributing #

You are welcome to contribute to this package,contribution doesnt necessarily mean sending a pull request it could be

  • pointing out bugs/issues
  • requesting a new feature
  • improving the documentation

If you feel generous and confident send a PR but make sure theres an open issue if not feel free to create one before you send a PR. This helps Identify the problem and helps everyone to stay aligned with the issue :)

12
likes
100
pub points
64%
popularity

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

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

maheshmn121@gmail.com

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on alphabet_scroll_view