DropDownSearchableField

DropDownSearchableField is a customizable Flutter widget that provides a searchable dropdown menu. This widget allows users to filter and select items from a list in real-time, making it ideal for forms and search-driven applications.

Features

  • Real-time search and filtering functionality.
  • Customizable dropdown UI with support for item builders.
  • Error widget for handling empty search results.
  • Configurable dropdown menu height, background color, and decoration.
  • Custom input decoration and validation support.

Installation

Add the following dependency in your pubspec.yaml file:

dependencies:
  dropdown_searchable_field: ^0.0.2

Then, run flutter pub get to install the package.

Usage

Here’s a basic example of how to use the DropDownSearchableField widget:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('DropDownSearchableField Example')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: DropDownSearchableField(
            items: ['Apple', 'Banana', 'Orange', 'Pineapple'],
            controller: TextEditingController(),
            itemBuilder: (context, item) {
              return ListTile(title: Text(item));
            },
            onSelected: (value) {
              print('Selected: $value');
            },
          ),
        ),
      ),
    );
  }
}

Parameters

  • items: List of items to be displayed in the dropdown.
  • controller: TextEditingController to manage the input field.
  • itemBuilder: A function to build each dropdown item.
  • onSelected: Callback function when an item is selected.
  • textFormFieldDecoration: Custom decoration for the input field.
  • textFormFieldvalidator: Custom validator for the input field.
  • menuHeight: Maximum height for the dropdown menu.
  • menuBgColor: Background color for the dropdown menu.
  • errorWidget: Widget to display when no items match the search.
  • onChanged: Callback function triggered on text change.
  • onTap: Callback for input field tap event.

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.

License

This project is licensed under the MIT License.

Libraries