https://github.com/timnew/text_field_suffix_button
https://github.com/timnew/text_field_suffix_button
Last synced: 29 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/timnew/text_field_suffix_button
- Owner: timnew
- License: mit
- Created: 2021-05-03T14:04:25.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-05-03T15:01:59.000Z (about 5 years ago)
- Last Synced: 2025-01-11T06:24:19.603Z (over 1 year ago)
- Language: Dart
- Size: 8.79 KB
- Stars: 1
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# text_field_suffix_button
[](https://github.com/timnew/text_field_suffix_button)
[](https://pub.dev/packages/text_field_suffix_button)
[](https://github.com/timnew/text_field_suffix_button/actions?query=workflow%3ARun-Test)
A simple widget that renders the a button as text input's suffix icon, which have a few behaviours:
## Clear Button
```dart
Widget build(BuildContext context) {
final controller = TextEditingController();
return TextField(
decoration: InputDecoration(
suffixIcon: TextFieldSuffixButton(controller: controller),
),
controller: controller,
);
}
```
A `TextEditingController` that shared with the field is required to make the button function properly.
When `controller.text` isn't empty, a button with `x` icon is show. When user clicked, it clear the text of the field.
## Paste or Clear
```dart
Widget build(BuildContext context) {
final controller = TextEditingController();
return TextField(
decoration: InputDecoration(
suffixIcon: TextFieldSuffixButton(
controller: controller,
enablePaste: true,
),
),
controller: controller,
);
}
```
When `enablePaste` set to `true`, widget render a paste button when text is empty, and a clear button when text is not empty.
The paste button allow user to paste the text from clipboard into the text field when clicked.
## Show button only when focused
```dart
Widget build(BuildContext context) {
final controller = TextEditingController();
final focusNode = FocusNode();
return TextField(
decoration: InputDecoration(
suffixIcon: TextFieldSuffixButton(
controller: controller,
enablePaste: true,
focusNode: focusNode,
),
),
controller: controller,
focusNode: focusNode,
);
}
```
An optional `FocusNode` that shared with the text field can be given. Then the `focusNode` is given, the button hides itself by default, and only shows when the field is focused. It works with both clear button and paste button.