This package allows you to create an outlined Material design search bar.

pub package

Screenshots

Getting started

To use this package, add outline_search_bar as a dependency in your pubspec.yaml file. For example:

dependencies:
  outline_search_bar: ^2.2.0

OutlineSearchBar

ParameterDescription
textEditingControllerThe keyword of OutlineSearchBar can be controlled with a TextEditingController.
keyboardTypeSet keyboard type.
Default value is TextInputType.text.
textInputActionSet keyboard action.
Default value is TextInputAction.search.
maxHeightSet the maximum height of OutlineSearchBar.
iconSet the icon of OutlineSearchBar.
backgroundColorSet the color of OutlineSearchBar.
Default value is Theme.of(context).scaffoldBackgroundColor.
borderColorSet the border color of OutlineSearchBar. If value is null and theme brightness is light, use primaryColor, if dark, use accentColor.
borderWidthSet the border thickness of OutlineSearchBar.
Default value is 1.0.
borderRadiusSet the border radius of OutlineSearchBar.
Default value is const BorderRadius.all(const Radius.circular(4.0)).
marginSet the margin value of OutlineSearchBar.
Default value is const EdgeInsets.only().
paddingSet the padding value of OutlineSearchBar.
Default value is const EdgeInsets.symmetric(horizontal: 5.0).
textPaddingSet the text padding value of OutlineSearchBar.
Default value is const EdgeInsets.symmetric(horizontal: 5.0).
elevationSet the elevation of OutlineSearchBar.
Default value is 0.0.
initTextSet the keyword to be initially entered. If initial text is set in textEditingController, this value is ignored.
hintTextSet the text to be displayed when the keyword is empty.
textStyleSet the input text style.
hintStyleSet the style of hintText.
maxLengthSet the maximum length of text to be entered.
cursorColorSet the color of cursor.
cursorWidthSet the width of cursor.
Default value is 2.0.
cursorHeightSet the height of cursor.
cursorRadiusSet the radius of cursor.
clearButtonColorSet the background color of the clear button.
Default value is const Color(0xFFDDDDDD).
clearButtonIconColorSet the icon color inside the clear button.
Default value is const Color(0xFFFEFEFE).
searchButtonSplashColorSet the splash color that appears when the search button is pressed.
searchButtonIconColorSet the icon color inside the search button. If value is null and theme brightness is light, use primaryColor, if dark, use accentColor.
searchButtonPositionSet the position of the search button. Default value is SearchButtonPosition.trailing.
debounceDelayThe delay between when the user stops typing a keyword and receives the onTypingFinished event.
Default value is 500.
autoCorrectWhether to use autoCorrect option.
Default value is false.
enableSuggestionsWhether to use enableSuggestions option.
Default value is true.
hideSearchButtonWhether to hide the search button.
Default value is false.
ignoreWhiteSpaceWhether to ignore input of white space.
Default value is false.
ignoreSpecialCharWhether to ignore input of special characters.
Default value is false.
onTapCalled when OutlineSearchBar is tapped.
onKeywordChangedCalled whenever a keyword is changed.
onTypingFinishedCalled when keyword typing is finished.
onClearButtonPressedWhen the clear button is pressed, it is called with the previous keyword.
onSearchButtonPressedWhen the search button is pressed, it is called with the entered keyword.

Support

If you find any bugs or issues while using the plugin, please register an issues on GitHub. You can also contact us at hwj930513@naver.com.

Libraries