Searchable TextField #

A highly customizable Flutter widget that combines TextField functionality with dropdown search capabilities, multi-select support, and API integration.

Features #

• Standard TextField functionality with full customization
• Dropdown with search functionality
• API-based search support with pagination
• Multi-select support with checkbox customization
• Appendable items with custom tap handling
• Form validation support
• Customizable loading indicators
• Rich text input customization
• Keyboard handling and input formatting

Support My Work #

If you find this package useful, consider supporting me with a coffee. Your support helps me maintain and improve this package! ☕️

Installation #

dependencies:
  searchable_textfield: ^latest_version

Basic Usage #

SearchableTextField(
  controller: TextEditingController(),
  enabled: true,
  isDropdown: true,
  items: [
    DropdownMenuItems(lable: "Item 1", value: "1"),
    DropdownMenuItems(lable: "Item 2", value: "2"),
  ],
  onChanged: (value, label) {
    print("Selected value: $value, label: $label");
  },
)

Multi-Select Example #

SearchableTextField(
  controller: TextEditingController(),
  isDropdown: true,
  isMultiSelect: true,
  checkboxActiveColor: Colors.blue,
  checkboxCheckColor: Colors.white,
  selectedItemStyle: TextStyle(
    color: Colors.blue,
    fontWeight: FontWeight.bold,
  ),
  maxSelections: 3,
  selectionSeparator: ' | ',
  items: [
    DropdownMenuItems(lable: "Item 1", value: "1"),
    DropdownMenuItems(lable: "Item 2", value: "2"),
  ],
)

API Integration #

SearchableTextField(
  controller: TextEditingController(),
  isDropdown: true,
  getItems: ({page, filter, limit}) async {
    // Your API call here
    return yourApiResponse.map((item) => 
      DropdownMenuItems(lable: item.name, value: item.id)
    ).toList();
  },
  loadingWidget: YourCustomLoadingWidget(),
)

Appendable Items Example #

SearchableTextField(
  controller: TextEditingController(),
  isDropdown: true,
  items: [
    DropdownMenuItems(lable: "Item 1", value: "1"),
    DropdownMenuItems(lable: "Item 2", value: "2"),
  ],
  appendableItems: [
    ListTile(
      leading: Icon(Icons.add),
      title: Text("Add New Item"),
    ),
    ListTile(
      leading: Icon(Icons.refresh),
      title: Text("Refresh List"),
    ),
  ],
  onAppendableItemTap: (index) {
    // Handle tap on appendable items
    switch(index) {
      case 0: // Add New Item
        print("Add new item tapped");
        break;
      case 1: // Refresh List
        print("Refresh list tapped");
        break;
    }
  },
)

Appendable Items Options #

• appendableItems: List of widgets to show below the dropdown
• onAppendableItemTap: Callback that provides the index of tapped item
• Supports any widget as appendable item
• Auto-closes dropdown after tap (configurable)
• Inherits dropdown styling (background, elevation, etc.)

Customization Options #

Core Properties #

• controller: TextEditingController for managing input
• enabled: Enable/disable the field
• isDropdown: Enable dropdown functionality
• isMultiSelect: Enable multi-select mode
• validator: Form validation function
• onChanged: Callback for value changes (value, label)

Visual Customization #

• style: Text style for input
• dropdownItemStyle: Style for dropdown items
• selectedItemStyle: Style for selected items
• dropdownDecoration: Custom dropdown BoxDecoration
• dropdownBackgroundColor: Background color
• dropdownItemPadding: Padding for items
• dropdownElevation: Shadow elevation

Multi-select Options #

• maxSelections: Limit number of selections
• selectionSeparator: Separator for selected items
• checkboxActiveColor: Color when checked
• checkboxCheckColor: Checkbox tick color
• selectionIndicator: Custom indicator widget

Input Handling #

• keyboardType: Type of keyboard to display
• inputFormatter: Input formatting rules
• textAlign: Text alignment
• textAlignVertical: Vertical alignment
• readOnly: Prevent editing
• obscureText: Hide input text
• maxLines/minLines: Line constraints
• maxLength: Character limit

Advanced Features #

• autofillHints: Autofill suggestions
• scrollController: Custom scroll control
• scrollPhysics: Scroll behavior
• enableIMEPersonalizedLearning: IME learning
• cursorColor/cursorWidth/cursorRadius: Cursor customization
• smartDashesType/smartQuotesType: Smart text formatting

Contribution #

Contributions are welcome! Please feel free to submit pull requests.

Connect with me #

• GitHub: Your GitHub Profile
• LinkedIn: Your LinkedIn Profile

License #

This project is licensed under the MIT License - see the LICENSE file for details.