alphabet_list_scroll_view 1.0.6

  • Readme
  • Changelog
  • Example
  • Installing
  • 93

Alphabet List Scroll View #

A customizable listview with A-Z side scrollbar to fast jump to the item of the selected character. Quick scroll through list via dragging through alphabets.

API #

nametypedefaultdescription
strListList-List of Strings
itemBuilderitemBuilder(context, index)-itemBuilder similar to itemBuilder in ListView.builder
highlightTextStyleboolfalsehighlight the focused pin box.
normalTextStyleColorColors.blackSet color of the focused pin box.
showPreviewbooltrueshow preview on screen
keyboardUsagebooltrueThe alphabet list will be wrapped in scrollview.
indexedHeightdouble Function(int)query the height of widget with index
headerWidgetListListheaders

AlphabetScrollListHeader #

nametypedefaultdescription
widgetListList[]
iconIconIcon shows in the side alphabet list and the preview
indexedHeaderHeightdouble Function(int)query the height of header with index
drawing
drawing

1.0.6 #

Updated RxDart to 0.23.1

1.0.5 #

  • Fixed touch event not register in the middle that is caused by the preview.

1.0.4 #

  • Shrink the gesturedetector to not interfere with other widgets such as slidables

1.0.3 #

  • Fixed screen and side height

1.0.2 #

  • Fixed max range errors

1.0.1+3 #

  • Fixed out of range errors

1.0.1+2 #

  • Fixed super

1.0.1 #

  • Added headers

1.0.0 #

  • Massively improve performance
  • Removed unnecessary dependencies

0.1.5 #

  • Formatted code
  • Fixed preview
  • Update Documentation

0.1.0 #

  • Added a few options such as: strList, itemBuilder, highlightTextStyle , normalTextStyle, showPreview

0.0.1 #

  • Added alphabet scroll. Need to implement more customization options.

example/lib/main.dart

import 'package:alphabet_list_scroll_view/alphabet_list_scroll_view.dart';
import 'package:faker/faker.dart';
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

void main() => runApp(MainApp());

class User {
  final String name;
  final String company;
  final bool favourite;

  User(this.name, this.company, this.favourite);
}

class MainApp extends StatefulWidget {
  @override
  _MainAppState createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  List<User> userList = [];
  List<String> strList = [];
  List<Widget> favouriteList = [];
  List<Widget> normalList = [];
  TextEditingController searchController = TextEditingController();

  @override
  void initState() {
    for (var i = 0; i < 100; i++) {
      var name = faker.person.name();
      userList.add(User(name, faker.company.name(), false));
    }
    for (var i = 0; i < 4; i++) {
      var name = faker.person.name();
      userList.add(User(name, faker.company.name(), true));
    }
    userList
        .sort((a, b) => a.name.toLowerCase().compareTo(b.name.toLowerCase()));
    filterList();
    searchController.addListener(() {
      filterList();
    });
    super.initState();
  }

  filterList() {
    List<User> users = [];
    users.addAll(userList);
    favouriteList = [];
    normalList = [];
    strList = [];
    if (searchController.text.isNotEmpty) {
      users.retainWhere((user) =>
          user.name
              .toLowerCase()
              .contains(searchController.text.toLowerCase()));
    }
    users.forEach((user) {
      if (user.favourite) {
        favouriteList.add(
          Slidable(
            actionPane: SlidableDrawerActionPane(),
            actionExtentRatio: 0.25,
            secondaryActions: <Widget>[
              IconSlideAction(
                iconWidget: Icon(Icons.star),
                onTap: () {},
              ),
              IconSlideAction(
                iconWidget: Icon(Icons.more_horiz),
                onTap: () {},
              ),
            ],
            child: ListTile(
              leading: Stack(
                children: <Widget>[
                  CircleAvatar(
                    backgroundImage:
                    NetworkImage("http://placeimg.com/200/200/people"),
                  ),
                  Container(
                      height: 40,
                      width: 40,
                      child: Center(
                        child: Icon(
                          Icons.star,
                          color: Colors.yellow[100],
                        ),
                      ))
                ],
              ),
              title: Text(user.name),
              subtitle: Text(user.company),
            ),
          ),
        );
      } else {
        normalList.add(
          Slidable(
            actionPane: SlidableDrawerActionPane(),
            actionExtentRatio: 0.25,
            secondaryActions: <Widget>[
              IconSlideAction(
                iconWidget: Icon(Icons.star),
                onTap: () {},
              ),
              IconSlideAction(
                iconWidget: Icon(Icons.more_horiz),
                onTap: () {},
              ),
            ],
            child: ListTile(
              leading: CircleAvatar(
                backgroundImage:
                NetworkImage("http://placeimg.com/200/200/people"),
              ),
              title: Text(user.name),
              subtitle: Text(user.company),
            ),
          ),
        );
        strList.add(user.name);
      }
    });

    setState(() {
      strList;
      favouriteList;
      normalList;
      strList;
    });
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    var currentStr = "";
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Plugin example app'),
          ),
          body: AlphabetListScrollView(
            strList: strList,
            highlightTextStyle: TextStyle(
              color: Colors.yellow,
            ),
            showPreview: true,
            itemBuilder: (context, index) {
              return normalList[index];
            },
            indexedHeight: (i) {
              return 80;
            },
            keyboardUsage: true,
            headerWidgetList: <AlphabetScrollListHeader>[
              AlphabetScrollListHeader(widgetList: [
                Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: TextFormField(
                    controller: searchController,
                    decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      suffix: Icon(
                        Icons.search,
                        color: Colors.grey,
                      ),
                      labelText: "Search",
                    ),
                  ),
                )
              ], icon: Icon(Icons.search), indexedHeaderHeight: (index) => 80),
              AlphabetScrollListHeader(
                  widgetList: favouriteList,
                  icon: Icon(Icons.star),
                  indexedHeaderHeight: (index) {
                    return 80;
                  }),
            ],
          ),
        ));
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  alphabet_list_scroll_view: ^1.0.6

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:alphabet_list_scroll_view/alphabet_list_scroll_view.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
86
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
93
Learn more about scoring.

We analyzed this package on Apr 7, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.7
  • Flutter: 1.12.13+hotfix.9

Health suggestions

Fix lib/alphabet_list_scroll_view.dart. (-0.50 points)

Analysis of lib/alphabet_list_scroll_view.dart reported 1 hint:

line 4 col 8: Unused import: 'package:rxdart/rxdart.dart'.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.2.2 <3.0.0
flutter 0.0.0
rxdart ^0.23.1 0.23.1 0.24.0-dev.1
vibration ^1.2.4 1.2.4
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test