alphabet_scroll_view

Description:

alphabet scroll view

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.


Responsive on device of any size #

Installation #

Add the dependency

flutter pub add alphabet_scroll_view
copied to clipboard

Import the package
​

import 'package:alphabet_scroll_view/alphabet_scroll_view.dart';

copied to clipboard
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;
});
},
),
),
);
},
),
copied to clipboard
Customize your overlay widget #

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),
),
),
],
),
copied to clipboard

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),
),
),
copied to clipboard
Overlay Widget in Action #

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 :)