Usage

FieldSuggestion was designed to be pretty simple to use, you just need to create some sort of required objects and that's it, it'd work perfectly.

If you're interested in, how the widget actually does work refer to the How It Works article.

We need a TextEditingController object, and suggestions list. I've to mention that, you should look at before starting - Make ready your home widget by creating required options for FieldSuggestion to understands the first steps of the FieldSuggestion widget.

Basic Usage:

Text editing controller:

final textEditingController = TextEditingController();

Suggestions data:

List<String> suggestions = [
   'johndoe@gmail.com'
   'charliefr@mail.com',
   'angelinaa9@gmail.com'
   // ...
];

Widget:

FieldSuggestion(
  textController: textEditingController,
  suggestions: suggestions,
  search: (item, input) {
      // Make item and input lowercase to disable case sensitiveness.
      return item.toString().toLowerCase().contains(input.toLowerCase());
  },
  itemBuilder: (context, index) {
      return Card(...) // Fill the matcher item as the way you want.
  },
  fieldDecoration: InputDecoration(
    labelText: 'Email',           // optional
    hintText: 'example@mail.com', // optional
  ),
)

Medium Usage

Box controller:

final boxController = BoxController();

Text editing controller:

final textEditingController = TextEditingController();

Suggestions data:

List<UserModel> suggestions = [
    UserModel(email: 'johndoe@gmail.com', username: 'johnDoe'),
    UserModel(email: 'charliefr@mail.com', username: 'CharlieFR'),
    UserModel(email: 'angelinaa9@gmail.com', username: 'Angelinaa'),
    // ...
];

Widget:

FieldSuggestion(
  textController: textEditingController,
  suggestions: suggestions,
  search: (item, input) {
      // Disable box, if item is selected.
      if (item.email == input) return false;

      // Make item[values] and input lowercase to disable case sensitiveness.
      final in = input.toLowerCase();
      final itemEmail = item.email.toString().toLowerCase();
      final itemUsername = item.username.toString().toLowerCase();

      // Search by both(email and username) fields.
      return itemEmail.contains(in) || itemUsername.contains(in);
  },
  itemBuilder: (context, index) {
      return GestureDetector(
           child: Card(...), // Fill the matcher item as the way you want.
           onTap: () {
               setState(() {
                  textEditingController.text = suggestions[index].email;
               });
               textController.selection = TextSelection.fromPosition(
                  TextPosition(offset: textController.text.length),
               );

               // Actually we defined a equality checker into 
               // search method to do that automatically but, also you can 
               // do same thing, but with different way.
               boxController.close.call();
           },
      );
  },
  fieldDecoration: InputDecoration(
    labelText: 'Email',          
    hintText: 'example@mail.com',
  ),
  boxStyle: BoxStyle(
    backgroundColor: Colors.purple.withOpacity(.8),
    border: Border.all(color: Colors.white),
    borderRadius: BorderRadius.circular(30),
    boxShadow: [...],
  ),
  // ...
)