alphabet_navigation 1.2.1

A Flutter package that provides an alphabetically indexed list view.

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

• ✅ A vertical alphabetical navigation bar for quick access to sections.
• ✅ Smooth scrolling to the desired section when an alphabet is selected.
• ✅ Fully customizable list items and navigation styles.
• ✅ Lightweight and easy to integrate into any Flutter project.
• ✅ 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:

class AlphabetListViewExample extends StatelessWidget {
  const AlphabetListViewExample({super.key});

  @override
  Widget build(BuildContext context) {
    /// A sample list of items to display
    List<String> stringList = [
      'Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape',
      'Honeydew', 'Iceberg Lettuce', 'Jackfruit', 'Kiwi', 'Lemon', 'Mango',
      'Nectarine', 'Orange', 'Papaya', 'Quince', 'Raspberry', 'Strawberry',
      'Tomato', 'Ugli Fruit', 'Vanilla Bean', 'Watermelon', 'Xigua', 'Yam', 'Zucchini'
    ];

    /// The dynamic list (can be more complex, such as objects)
    List<dynamic> dynamicList = stringList;

    return Scaffold(
      appBar: AppBar(
        title: const Text('Alphabet List View Example'),
        centerTitle: true,
      ),
      body: 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)
        backgroundColor: Colors.blue, /// Background color for alphabet list (optional)
        selectedColor: Colors.white, /// Selected alphabet color (optional)
        unselectedColor: Colors.grey, /// Unselected alphabet color (optional)
        circleSelectedLetter: true, /// Is circle apply for the selected letter. (optional)
        circleSelectedBackgroundColor: Colors.blue, /// Circle background color for the selected letter (optional)
        circleBorderRadius: 8, /// Border radius for the selected letter circle (optional)
        itemBuilder: (context, index) {
          /// Build the item widget
          return ListTile(
            dense: true,
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
            title: Text(
              dynamicList[index],
              style: const TextStyle(fontSize: 18),
            ),
            leading: CircleAvatar(
              backgroundColor: Colors.blueAccent,
              child: Text(
                dynamicList[index][0],
                style: const TextStyle(color: Colors.white),
              ),
            ),
            trailing: const Icon(Icons.arrow_forward_ios, size: 16),
          );
        },
      ),
    );
  }
}

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

• Alphabet Navigation (pub.dev)
• Alphabet Navigation (GitHub)

License

This project is licensed under the MIT License - see the LICENSE file for details.

CONTRIBUTORS

Akash Das

Happy Coding 👨‍💻