debounce_textfield 0.0.1

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

debounce_textfield

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

Installation

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

dependencies:
  debounce_textfield: ^0.0.1

2. Import the package and use it in your Flutter App.

import 'package:debounce_textfield/debounce_textfield.dart';

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);
          },
        ),

customization

Custom Duration

DebounceTextfield(
          action: (enteredText) {
            print('Executed after 800 milliseconds from last change.');
            print(enteredText);
          },
          duration: const Duration(milliseconds: 800),
        ),

onTextfieldEmpty Callback

 DebounceTextfield(
          action: (enteredText) {
            print('Executed after 500 milliseconds from last change.');
            print(enteredText);
          },
          onTextfieldEmpty: () {
            print('Textfield is empty now...');
          },
        ),

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,
          ),
        ),

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,
          ),
        ),