Alphabet Navigation

License GitHub Contributors Stars GitHub Closed Issues

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

  1. Add the package to your pubspec.yaml file:

    dependencies:
      alphabet_navigation: ^1.0.0
    
  2. 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.

CONTRIBUTORS

Contributors
Akash Das

Happy Coding 👨‍💻