TextField Dropdown Search¶

The text field dropdown allows the user to select and search text.

DesignImplementation

TextFieldDropdownSearch<String>(
    onChanged: (String? value) {},
    title: 'Type',
    hint: 'Select type',
    itemAsString: (String element) => element.toString(),
    compareFn: (String selected, String? val) => val == null ? false : selected == val,
    items: const ['Type 1', 'Type 2', 'Type 3'],
)

Constructors

onChanged use this property to retrieve data.
title defines the title on top field.
selectedItem initial value selected.
itemAsString customize the fields the be shown.
compareFn function that compares two object with the same type to detected if it's the selected item or not.
itemDisabledFn defines if an item of the popup is enabled or not, if the item is disabled, it cannot be clicked.
dropdownKey key of the Widget.

Customization¶

To change the whole Input Theme, please open the core/themes/app_theme.dart. Here's how to change the Widget TextField theme:

inputDecorationTheme: InputDecorationTheme(
  contentPadding: const EdgeInsets.all(AppDimens.paddingMedium),
  errorStyle: const TextStyle(color: AppColors.red),
  alignLabelWithHint: true,
  floatingLabelBehavior: FloatingLabelBehavior.never,
  hintStyle: TextStyle(color: AppColors.grey.shade300),
  border: OutlineInputBorder(
    borderSide: BorderSide(color: AppColors.grey.shade100, width: 1),
    borderRadius: BorderRadius.circular(AppDimens.radiusMedium),
  ),
  enabledBorder: OutlineInputBorder(
    borderSide: BorderSide(color: AppColors.grey.shade300, width: 1),
    borderRadius: BorderRadius.circular(AppDimens.radiusMedium),
  ),
  focusedBorder: OutlineInputBorder(
    borderSide: const BorderSide(color: AppColors.secondary, width: 1.5),
    borderRadius: BorderRadius.circular(AppDimens.radiusMedium),
  ),
  errorBorder: OutlineInputBorder(
    borderSide: const BorderSide(color: AppColors.red, width: 1.5),
    borderRadius: BorderRadius.circular(AppDimens.radiusMedium),
  ),
  focusedErrorBorder: OutlineInputBorder(
    borderSide: const BorderSide(color: AppColors.red, width: 1.5),
    borderRadius: BorderRadius.circular(AppDimens.radiusMedium),
  ),
)

Support Packages¶

Info

The Textfield Dropdown uses the dropdown_search package to call DropdownSearch. For more can be learned in Pub Dev.

Authors: Nanang Prasetya