This package allows you to create an outlined Material design search bar.
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.3.0
OutlineSearchBar
| Parameter | Description |
|---|---|
textEditingController |
The keyword of OutlineSearchBar can be controlled with a TextEditingController. |
keyboardType |
Set keyboard type. Default value is TextInputType.text. |
textInputAction |
Set keyboard action. Default value is TextInputAction.search. |
maxHeight |
Set the maximum height of OutlineSearchBar. |
icon |
Set the icon of OutlineSearchBar. |
backgroundColor |
Set the color of OutlineSearchBar. Default value is Theme.of(context).scaffoldBackgroundColor. |
borderColor |
Set the border color of OutlineSearchBar. If value is null and theme brightness is light, use primaryColor, if dark, use accentColor. |
borderWidth |
Set the border thickness of OutlineSearchBar. Default value is 1.0. |
borderRadius |
Set the border radius of OutlineSearchBar. Default value is const BorderRadius.all(const Radius.circular(4.0)). |
margin |
Set the margin value of OutlineSearchBar. Default value is const EdgeInsets.only(). |
padding |
Set the padding value of OutlineSearchBar. Default value is const EdgeInsets.symmetric(horizontal: 5.0). |
textPadding |
Set the text padding value of OutlineSearchBar. Default value is const EdgeInsets.symmetric(horizontal: 5.0). |
elevation |
Set the elevation of OutlineSearchBar. Default value is 0.0. |
initText |
Set the keyword to be initially entered. If initial text is set in textEditingController, this value is ignored. |
hintText |
Set the text to be displayed when the keyword is empty. |
textStyle |
Set the input text style. |
hintStyle |
Set the style of hintText. |
maxLength |
Set the maximum length of text to be entered. |
cursorColor |
Set the color of cursor. |
cursorWidth |
Set the width of cursor. Default value is 2.0. |
cursorHeight |
Set the height of cursor. |
cursorRadius |
Set the radius of cursor. |
clearButtonColor |
Set the background color of the clear button. Default value is const Color(0xFFDDDDDD). |
clearButtonIconColor |
Set the icon color inside the clear button. Default value is const Color(0xFFFEFEFE). |
searchButtonSplashColor |
Set the splash color that appears when the search button is pressed. |
searchButtonIconColor |
Set the icon color inside the search button. If value is null and theme brightness is light, use primaryColor, if dark, use accentColor. |
searchButtonPosition |
Set the position of the search button. Default value is SearchButtonPosition.trailing. |
debounceDelay |
The delay between when the user stops typing a keyword and receives the onTypingFinished event. Default value is 500. |
autoCorrect |
Whether to use autoCorrect option. Default value is false. |
enableSuggestions |
Whether to use enableSuggestions option. Default value is true. |
hideSearchButton |
Whether to hide the search button. Default value is false. |
ignoreWhiteSpace |
Whether to ignore input of white space. Default value is false. |
ignoreSpecialChar |
Whether to ignore input of special characters. Default value is false. |
onTap |
Called when OutlineSearchBar is tapped. |
onKeywordChanged |
Called whenever a keyword is changed. |
onTypingFinished |
Called when keyword typing is finished. |
onClearButtonPressed |
When the clear button is pressed, it is called with the previous keyword. |
onSearchButtonPressed |
When 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.