searchable_textfeild 0.1.2

A simple textfeild which can be used to search the data in the list or can be used as simple dropdown widget

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
• Appendable items: Add a separate list of widgets below the dropdown with dynamic height adjustment

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");
  },
)

Appendable Items Example

You can add a separate list of widgets below the dropdown using the appendableItems property. These widgets will be displayed in a separate section with dynamic height adjustment.

SearchableTextField(
  controller: TextEditingController(),
  enabled: true,
  isDropdown: true,
  isObscured: false,
  items: [
    DropdownMenuItems(lable: "Apple", value: "1"),
    DropdownMenuItems(lable: "Mango", value: "2"),
  ],
  appendableItems: [
    ListTile(
      leading: Icon(Icons.add),
      title: Text("Add New Item"),
      onTap: () {
        print("Add New Item tapped");
      },
    ),
    Divider(),
    ListTile(
      leading: Icon(Icons.info),
      title: Text("About"),
      onTap: () {
        print("About tapped");
      },
    ),
  ],
)

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
• loadingWidget: Custom widget to show while loading items
• loadingIndicatorColor: Color of the default loading indicator
• loadingIndicatorSize: Size of the default loading indicator (default: 20)
• loadingIndicatorStrokeWidth: Stroke width of the default loading indicator (default: 2)
• appendableItems: A list of widgets to display in a separate section below the dropdown

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.