debounce_textfield

Description:

debounce textfield

debounce_textfield #
A simple, lightweight, customizable textfield with debounce for preventing continuous execution of (onChange) callback.
Installation #

Add the latest version of package to your pubspec.yaml (and rundart pub get):

dependencies:
debounce_textfield: ^0.0.1
copied to clipboard

Import the package and use it in your Flutter App.

import 'package:debounce_textfield/debounce_textfield.dart';
copied to clipboard
Image #

Example #
You can simply just use the DebounceTextfield class and provide a callback to be executed after the delay.
DebounceTextfield(
action: (enteredText) {
print('Executed after 500 milliseconds from last change.');
print(enteredText);
},
),
copied to clipboard
customization #
Custom Duration #
DebounceTextfield(
action: (enteredText) {
print('Executed after 800 milliseconds from last change.');
print(enteredText);
},
duration: const Duration(milliseconds: 800),
),
copied to clipboard
onTextfieldEmpty Callback #
DebounceTextfield(
action: (enteredText) {
print('Executed after 500 milliseconds from last change.');
print(enteredText);
},
onTextfieldEmpty: () {
print('Textfield is empty now...');
},
),
copied to clipboard
Custom Style #
DebounceTextfield(
action: (enteredText) {
print('Executed after 500 milliseconds from last change.');
print(enteredText);
},
height: 50,
clearButtonIcon:
const Icon(Icons.clear_rounded, color: Colors.white, size: 20),
textFieldDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
color: Colors.indigo.shade200,
),
inputDecoration: const InputDecoration(
border: InputBorder.none,
hintText: 'Search for your favoutie Anime',
hintStyle: TextStyle(
fontSize: 15,
color: Colors.white,
),
icon: Icon(
Icons.search,
color: Colors.white,
size: 20,
),
),
textFieldStyle: const TextStyle(
fontSize: 15,
color: Colors.white,
),
),
copied to clipboard
Right-to-left Direction #
DebounceTextfield(
action: (enteredText) {
print('Executed after 500 milliseconds from last change.');
print(enteredText);
},
direction: TextDirection.rtl,
inputDecoration: const InputDecoration.collapsed(
hintText: 'أدخل النص هنا',
hintStyle: TextStyle(
fontSize: 13,
color: Colors.black54,
),
),
textFieldDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
color: Colors.black12,
),
),
copied to clipboard