Alphabet Navigation
alphabet_navigation
is a Flutter package that provides a dynamic, scrollable list view with an alphabetical index. It’s perfect for apps that need a quick and intuitive way to navigate long lists by alphabet.
Features
x
A vertical alphabetical navigation bar for quick access to sections.x
Smooth scrolling to the desired section when an alphabet is selected.x
Fully customizable list items and navigation styles.x
Lightweight and easy to integrate into any Flutter project.x
Compatible with all platforms.
Screenshot
Circular Selected Item | Drug by class | List Direction Left |
---|---|---|
Mac |
---|
Installation
To use the alphabet_navigation
package, follow these steps:
Run this on your project terminal:
flutter pub add alphabet_navigation
or manually configure pubspec.yml file
-
Add the package to your
pubspec.yaml
file:dependencies: alphabet_navigation: ^1.0.0
-
Run the following command to get the package:
flutter pub get
Usage
Here’s how you can use the AlphabetNavigation
widget in your app:
AlphabetNavigation(
stringList: stringList, // Pass the string list for alphabet mapping
dynamicList: dynamicList, // Pass the dynamic list for content
dynamicListHeight: 80, // Dynamic list height (optional)
listDirection: ListDirection.left, // Direction of the list (optional)
showSearchField: true, // Toggle for search field (optional)
circleSelectedLetter: true, // Is circle apply for the selected letter (optional)
itemBuilder: (context, index, searchFilterList) {}, // Item builder
)
Parameters
Parameter | Type | Description |
---|---|---|
stringList |
List<String> |
List of strings for alphabetical grouping. |
dynamicList |
List<dynamic> |
Data list to be displayed. |
listDirection |
ListDirection |
Direction of the list. |
dynamicListHeight |
double |
Dynamic list height. |
circleSelectedLetter |
bool |
Is circle apply for the selected letter. |
circleSelectedBackgroundColor |
Color |
Circle background color for the selected letter. |
circleBorderRadius |
double |
Border radius for the selected letter circle. |
backgroundColor |
Color |
Alphabet list Background color |
selectedColor |
Color |
Selected alphabet color |
unselectedColor |
Color |
Unselected alphabet color |
itemBuilder |
Function(BuildContext, int) |
Function to build list items dynamically. |
Demo
https://github.com/user-attachments/assets/8f61ac4c-4937-4c98-b86d-36bf86ac0acd
Future Plans
Here are some planned features for future releases:
- Search Functionality: Built-in search bar for filtering items dynamically.
- Theme Options: Allow users to easily configure colors, fonts, and styles.
- Accessibility Improvements: Enhanced support for voice-over and screen readers.
- Horizontal Navigation: Add support for horizontal alphabetical navigation.
- Custom Alphabet Set: Support for custom navigation sets like
'A', 'B', 'C', '1', '2', '3'
. - Multi-Language Support: Enable alphabetical navigation for other languages.
Contributing
We welcome contributions from the community! If you encounter any issues or have feature suggestions, feel free to open an issue or submit a pull request on our GitHub repository.
Additional information
License
This project is licensed under the MIT License - see the LICENSE file for details.