getCommonSearchTextField method

Widget getCommonSearchTextField(
  1. BuildContext context,
  2. TextEditingController txtController,
  3. String hintText,
  4. dynamic onSubmitted(
    1. String
    ), {
  5. Color theme = Colors.grey,
  6. Color focusColor = Colors.black,
  7. Color borderColor = Colors.black,
  8. double? width,
  9. double height = 47,
  10. double? imgSearchSizeHeight,
  11. double? imgSearchSizeWidth,
  12. double? searchTextFieldPadding,
  13. TextInputAction? textInputAction,
  14. InputBorder? inputBorder,
  15. TextStyle? txtSearchTextStyle,
  16. BorderRadiusGeometry? searchIconContainerBorderRadius,
  17. Icon? imgSearch,
  18. TextStyle? labelTxtSearchTextStyle,
})

Creates a common search text field with dynamic focus styling.

Displays a search input field with a search icon suffix button. The border and icon colors change dynamically based on focus state.

Parameters:

  • context: BuildContext for focus management.
  • txtController: Controller for the text field.
  • hintText: Placeholder text for the search field.
  • onSubmitted: Callback invoked when search is submitted (enter key or icon tap).
  • theme: Background color for the search icon when unfocused (defaults to grey).
  • focusColor: Background color for the search icon when focused (defaults to black).
  • borderColor: Border color when the field is focused (defaults to black).
  • width: Width of the text field. Defaults to full screen width.
  • height: Height of the text field (defaults to 47).
  • imgSearchSizeHeight: Height of the search icon container.
  • imgSearchSizeWidth: Width of the search icon container.
  • searchTextFieldPadding: Left padding for the text field.
  • textInputAction: Keyboard action button. Defaults to TextInputAction.search.
  • inputBorder: Custom input border. Defaults to InputBorder.none.
  • txtSearchTextStyle: Text style for input and hint text.
  • searchIconContainerBorderRadius: Border radius for the search icon container.
  • imgSearch: Custom search icon. Defaults to Utils.appConstants.imgSearch.
  • labelTxtSearchTextStyle: Label text style.

Returns a Padding widget containing the search text field.

Features:

  • Dynamic border color based on focus (focused vs unfocused)
  • Dynamic icon background color based on focus
  • Submits search on enter key or icon tap
  • Automatically unfocuses after search submission

Example:

getCommonSearchTextField(
  context,
  searchController,
  'Search products...',
  (query) => performSearch(query),
  focusColor: Colors.blue,
  borderColor: Colors.blue,
);

Implementation

Widget getCommonSearchTextField(
    BuildContext context,
    TextEditingController txtController,
    String hintText,
    Function(String) onSubmitted,
    {Color theme = Colors.grey,
    Color focusColor = Colors.black,
    Color borderColor = Colors.black,
    double? width,
    double height = 47,
    double? imgSearchSizeHeight,
    double? imgSearchSizeWidth,
    double? searchTextFieldPadding,
    TextInputAction? textInputAction,
    InputBorder? inputBorder,
    TextStyle? txtSearchTextStyle,
    BorderRadiusGeometry? searchIconContainerBorderRadius,
    Icon? imgSearch,
    TextStyle? labelTxtSearchTextStyle}) {
  return Padding(
    padding: Utils.appConstants.searchContainerPadding,
    child: Container(
      decoration: BoxDecoration(
        border: Border.all(
            color: focusNode.hasFocus
                ? borderColor
                : Utils.appConstants
                    .searchBarThemeColor), // Change border color based on focus
        color: Colors.white,
        borderRadius: Utils.appConstants.searchContainerBorderRadius,
      ),
      child: SizedBox(
        width: width ?? Get.width,
        height: height,
        child: Padding(
          padding: searchTextFieldPadding != null
              ? EdgeInsets.only(left: searchTextFieldPadding)
              : Utils.appConstants.searchTextFieldPadding,
          child: TextField(
            focusNode: focusNode, // Assign the focusNode to the TextField
            textInputAction: textInputAction ?? TextInputAction.search,
            controller: txtController,
            onSubmitted: onSubmitted,
            decoration: InputDecoration(
              border: inputBorder ?? InputBorder.none,
              hintText: hintText,
              hintStyle:
                  txtSearchTextStyle ?? Utils.appConstants.txtSearchTextStyle,
              suffixIcon: Padding(
                padding: Utils.appConstants.searchContainerSuffixIconPadding,
                child: InkWell(
                  child: SizedBox(
                    height: imgSearchSizeHeight ??
                        Utils.appConstants.imgSearchSize,
                    width: imgSearchSizeWidth ??
                        Utils.appConstants.imgSearchSize,
                    child: Container(
                      decoration: BoxDecoration(
                        color: focusNode.hasFocus
                            ? focusColor
                            : theme, // Change icon color based on focus
                        borderRadius: searchIconContainerBorderRadius ??
                            Utils
                                .appConstants.searchIconContainerBorderRadius,
                      ),
                      child: InkWell(
                        child: imgSearch ?? Utils.appConstants.imgSearch,
                        onTap: () {
                          onSubmitted(txtController.text);
                          FocusScope.of(context).unfocus();
                        },
                      ),
                    ),
                  ),
                ),
              ),
              labelStyle: labelTxtSearchTextStyle ??
                  Utils.appConstants.txtSearchTextStyle,
            ),
          ),
        ),
      ),
    ),
  );
}