How to implement Alphabetical Scroll (A-Z) in Flutter

In this guide, we will learn how to implement the Alphabetical Scroll in Flutter by using the external package name  alphabet_scroll_view . A Scrollable ListView Widget with the dynamic vertical Alphabet List on the Side which you can drag and tap to scroll to the first item starting with that letter in the list.

Related: Slivers And CustomScrollView In Flutter

Features 

  • Responsive on all screens of different sizes and runs on all Flutter-supported platforms
  • show your own widget(overlayWidget) when the pointer is in focus with Screen
  • Align the alphabet list on the left or right
  • Tap or drag to scroll to a particular Alphabet.

Installation 

  • Add the dependency
dependencies:
  alphabet_scroll_view: ^0.3.1
  • Import the package​
import 'package:alphabet_scroll_view/alphabet_scroll_view.dart';

Let’s take an example of how we can implement the Alphabetical Scroll (A-Z) in our flutter application.

import 'package:flutter/material.dart';
import 'package:alphabet_scroll_view/alphabet_scroll_view.dart';

class AlphabeticalScrollerWidegt extends StatefulWidget {
  const AlphabeticalScrollerWidegt({Key? key}) : super(key: key);

  @override
  State<AlphabeticalScrollerWidegt> createState() =>
      _AlphabeticalScrollerWidegtState();
}

class _AlphabeticalScrollerWidegtState
    extends State<AlphabeticalScrollerWidegt> {
  List<String> list = [
    'angel',
    'apple',
    'bubbles',
    'shimmer',
    'angelic',
    'bubbly',
    'glimmer',
    'baby',
    'pink',
    'little',
    'butterfly',
    'sparkly',
    'doll',
    'sweet',
    'sparkles',
    'dolly',
    'sweetie',
    'sprinkles',
    'lolly',
    'princess',
    'fairy',
    'honey',
    'snowflake',
    'pretty',
    'sugar',
    'cherub',
    'lovely',
    'blossom',
    'Ecophobia',
    'Hippophobia',
    'Scolionophobia',
    'Ergophobia',
    'Musophobia',
    'Zemmiphobia',
    'Geliophobia',
    'Tachophobia',
    'Hadephobia',
    'Radiophobia',
    'Turbo Slayer',
    'Cryptic Hatter',
    'Crash TV',
    'Blue Defender',
    'Toxic Headshot',
    'Iron Merc',
    'Steel Titan',
    'Stealthed Defender',
    'Blaze Assault',
    'Venom Fate',
    'Dark Carnage',
    'Fatal Destiny',
    'Ultimate Beast',
    'Masked Titan',
    'Frozen Gunner',
    'Bandalls',
    'Wattlexp',
    'Sweetiele',
    'HyperYauFarer',
    'Editussion',
    'Experthead',
    'Flamesbria',
    'HeroAnhart',
    'Liveltekah',
    'Linguss',
    'Interestec',
    'FuzzySpuffy',
    'Monsterup',
    'MilkA1Baby',
    'LovesBoost',
    'Edgymnerch',
    'Ortspoon',
    'Oranolio',
    'OneMama',
    'Dravenfact',
    'Reallychel',
    'Reakefit',
    'Popularkiya',
    'Breacche',
    'Blikimore',
    'StoneWellForever',
    'Simmson',
    'BrightHulk',
    'Bootecia',
    'Spuffyffet',
    'Rozalthiric',
    'Bookman'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Alphabetical Scroller '),
        centerTitle: true,
      ),
      body: Column(
        children: [
          Expanded(
            child: AlphabetScrollView(
              list: list.map((e) => AlphaModel(e)).toList(),
              // isAlphabetsFiltered: false,
              alignment: LetterAlignment.right,
              itemExtent: 50,
              unselectedTextStyle: const TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.normal,
                  color: Colors.black),
              selectedTextStyle: const TextStyle(
                  fontSize: 20, fontWeight: FontWeight.bold, color: Colors.red),

              itemBuilder: (_, index, string) {
                return Padding(
                  padding: const EdgeInsets.only(right: 20),
                  child: ListTile(
                    title: Text(string),
                    leading: const Icon(Icons.person),
                  ),
                );
              },
            ),
          )
        ],
      ),
    );
  }
}

Meanwhile, when we run this application in the emulator or device, we should get the UI similar to the screenshot below:

Get the full snippet from here