Searchable TextField #

A customizable Flutter widget that combines the functionality of a TextField with dropdown search capabilities.

Features #

• Standard TextField functionality
• Dropdown with search functionality
• API-based search support
• Pagination for large datasets
• Customizable appearance
• Form validation support

Upcoming Updates #

• Multi-select support
• Loading indicator for API-based searches
• Empty state handling with customizable empty state widget
• Additional TextField parameters support
• Custom ui option for dropdown items
• Improved decoration customization options
• Performance optimizations for large datasets

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 #

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

dependencies:
  searchable_textfield: ^latest_version

Usage #

Basic example:

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

API-based search example:

SearchableTextField(
  controller: TextEditingController(),
  enabled: true,
  isDropdown: true,
  isObscured: false,
  getItems: ({page, filter, limit}) async {
    // Implement your API call here
    return yourApiCall(page: page, searchText: filter, pageSize: limit);
  },
  onChanged: (value) {
    print("Selected value: $value");
  },
)

API Reference #

Main Properties #

• controller: TextEditingController for managing the text input
• enabled: Enables/disables the text field
• isDropdown: Enables dropdown functionality
• items: List of predefined dropdown items
• getItems: Function for API-based item fetching
• onChanged: Callback for value changes
• validator: Form validation function
• isObscured: Toggle password visibility
• textFeildDecorator: Custom input decoration
• dropdownDecoration: Custom BoxDecoration for dropdown container
• dropdownItemStyle: TextStyle for dropdown items
• dropdownBackgroundColor: Background color of dropdown
• dropdownItemPadding: Padding for dropdown items
• dropdownElevation: Elevation of dropdown container

Usage with Custom Styling #

SearchableTextField(
  controller: TextEditingController(),
  enabled: true,
  isDropdown: true,
  isObscured: false,
  items: [
    DropdownMenuItems(lable: "Item 1", value: "1"),
    DropdownMenuItems(lable: "Item 2", value: "2"),
  ],
  dropdownDecoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(8),
    border: Border.all(color: Colors.grey),
  ),
  dropdownItemStyle: TextStyle(
    color: Colors.blue,
    fontSize: 16,
  ),
  dropdownBackgroundColor: Colors.grey[100],
  dropdownItemPadding: EdgeInsets.symmetric(
    horizontal: 20,
    vertical: 15,
  ),
  dropdownElevation: 4,
  onChanged: (value) {
    print("Selected value: $value");
  },
)

Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.

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.