alphabet_navigation - Dart API docs

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:

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

License

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

CONTRIBUTORS

Akash Das

Alphabet Navigation