The AlphabetScrollBar Package is an Simple to use, Customizable Animated AlphabetScrollBar. You have to offer an Function where you do the Scrolling by yourself. There must be an String Parameter, where you will receive the Current Selected Letter.
it`s Possible to Change almost Everything.. the Letters that are Used, the Text-Style of the Letters, the Color of the Selected Letter, the Orientation of the Scrollbar (Left, Right, Top, Bottom, Reversed)
alphabet_scrollbar: ^0.0.5
AlphabetScrollbar(
//onLetterChange is needed and should contain a Function(String letter), where you handle your Scrolling.
onLetterChange: (value) => setState(() {
_letter = value;
}),
reverse: false, //optional. would Reverse the Order (Z-A).
switchToHorizontal: false, //optional. makes the Scrollbar Horizontally not Verticaly.
//optional. changes the side to left (if switchToHorizontal also True,Switches to Top)
leftSidedOrTop: false,
),
u can Simply Use this Widget. all of these Parameters (except the onLetterChange) are Optional.
AllParamsExample:
AlphabetScrollbar(
onLetterChange: (value) => setState(() {
_letter = value;
}),
style: const TextStyle(),
duration: const Duration(),
selectedLetterAdditionalSpace: 15.toDouble(),
selectedLetterColor: Colors.red,
padding: EdgeInsets.all(8),
factor: 30,
letterCollection: const ["A","B","C"],
reverse: false,
switchToHorizontal: false,
leftSidedOrTop: false,
);
Minimal Params Example:
AlphabetScrollbar(
onLetterChange: (value) => setState(() {
_letter = value;
}),
);
for Scrolling you have to do something like this... (Just an Example)
void _onLetterChangeExample(String letter){
var index = _myList.indexWhere((n) =>
n.toLowerCase().startsWith(letter.toLowerCase()));
_scrollController.scrollTo(_itemHeight * index);
}