Flutter component for list and search a simple or complex data items, similar to contact list.

Demo (live):

Features

  • Search/filter items;
  • Customization (default is app Theme);
  • Build your own Widget to show;
  • Easy to use (Besides being beautiful 💅🏼);

Usage

Adding in pubspec.yaml:

dependencies:
  alphabet_search_view: ^2.0.0

Import it where you want to use:

import 'package:alphabet_search_view/alphabet_search_view.dart';

Example:

Specific String use:

final myStringList = [
    'Katlego Dhaval',
    'Belenos Haniya',
    'Alaattin Ísak',
    'Ephraim Ríghnach',
    'Heli Jerahmeel',
];

AlphabetSearchView<String>.list(
    list: myStringList.map((e) => AlphabetSearchModel<String>(title: e, data: e)).toList(),

General use:

final myModelList = [
    AlphabetSearchModel<MyModel>(title: 'Katlego Dhaval', subtitle: 'Dad', data: myDataModel_1),
    AlphabetSearchModel<MyModel>(title: 'Belenos Haniya', subtitle: 'Friend', data: myDataModel_2),
    AlphabetSearchModel<MyModel>(title: 'Alaattin Ísak', subtitle: 'Friend', data: myDataModel_3),
    AlphabetSearchModel<MyModel>(title: 'Ephraim Ríghnach', subtitle: 'Uncle', data: myDataModel_4),
    AlphabetSearchModel<MyModel>(title: 'Heli Jerahmeel', subtitle: 'Friend', data: myDataModel_5),
];

AlphabetSearchView<MyModel>.list(
    list: myModelList,
),

With build:

final myStringList = [
    'Katlego Dhaval',
    'Belenos Haniya',
    'Alaattin Ísak',
    'Ephraim Ríghnach',
    'Heli Jerahmeel',
];

AlphabetSearchView<String>.list(
    list: myStringList.map((e) => AlphabetSearchModel<String>(title: e, data: e)).toList(),
    buildItem: (context, index, item) => Card(
        child: Text(item.title),
    ),
),

With tap callback:

AlphabetSearchView<String>.list(
    list: myStringList.map((e) => AlphabetSearchModel<String>(title: e, data: e)).toList(),
    onItemTap: (context, index, item) {
        print(item.title);
    },
),

Customization

AlphabetSearchView<String>.list(
    decoration: AlphabetSearchDecoration.fromContext(
        context,
        withSearch?: false, // default is: true
        titleStyle?: TextStyle(...), // default is: TextTheme.subtitle1
        subtitleStyle?: TextStyle(...), // default is: TextTheme.bodyText2
        letterHeaderTextStyle?: TextStyle(...), // default is: TextTheme.headline2
        dividerThickness?: double, // default is: 1
        color?: Color, // default is: ColorScheme.primary
        backgroundColor?: Color, // default is: Theme.scaffoldBackgroundColor
    ),
    list: myStringList.map((e) => AlphabetSearchModel<String>(title: e, data: e)).toList(),
),