https://github.com/dev-hwang/outline_search_bar
This package allows you to create an outlined Material design search bar.
https://github.com/dev-hwang/outline_search_bar
android flutter ios search-bar web
Last synced: 11 months ago
JSON representation
This package allows you to create an outlined Material design search bar.
- Host: GitHub
- URL: https://github.com/dev-hwang/outline_search_bar
- Owner: Dev-hwang
- License: mit
- Created: 2021-01-18T05:34:18.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-08-02T23:51:30.000Z (almost 3 years ago)
- Last Synced: 2025-05-27T09:55:36.353Z (about 1 year ago)
- Topics: android, flutter, ios, search-bar, web
- Language: Dart
- Homepage:
- Size: 53.7 KB
- Stars: 7
- Watchers: 1
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
This package allows you to create an outlined Material design search bar.
[](https://pub.dev/packages/outline_search_bar)
## Screenshots
## Getting started
To use this package, add `outline_search_bar` as a [dependency in your pubspec.yaml file](https://flutter.io/platform-plugins/). For example:
```yaml
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](https://github.com/Dev-hwang/outline_search_bar/issues). You can also contact us at .