Tactile Loading Button

A lightweight, high-utility Flutter package that converts a standard button into a smooth loading spinner during asynchronous operations. It features a tactile, responsive shrink/bounce animation upon physical interaction.

Features

Tactile Feedback: Shrinks slightly when pressed down and pops back up on release, mimicking native platform physics.
Asynchronous State Handling: Automatically morphs into a loading circle when a Future triggers, and disables interaction to prevent multi-click bugs.
Customizable Styling: Adjust custom widths, heights, colors, custom spinners (loadingWidget), and background morph durations.
Zero External Dependencies: Built entirely with native Flutter material and animation tools.

Installation

Add tactile_loading_button to your pubspec.yaml file:

dependencies:
  tactile_loading_button: ^1.0.0

Or run the following command in your terminal:

flutter pub add tactile_loading_button

Usage

Import the package in your Dart file:

import 'package:tactile_loading_button/tactile_loading_button.dart';

Implement it inside your widget tree. Ensure your onPressed callback returns a Future:

TactileLoadingButton(
  width: 200,
  height: 50,
  color: Colors.blueAccent,
  borderRadius: BorderRadius.circular(10),
  onPressed: () async {
    // Perform async task (e.g., API call, Database write)
    await Future.delayed(const Duration(seconds: 3));
  },
  // Define a complex loading widget (Row with Text)
  loadingWidget: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      const SizedBox(
        width: 24,
        height: 24,
        child: CircularProgressIndicator(color: Colors.white),
      ),
      const SizedBox(width: 12),
      const Text(
        'Processing...',
        style: TextStyle(color: Colors.white, fontSize: 16),
      ),
    ],
  ),
  child: const Text(
    'Submit Form',
    style: TextStyle(color: Colors.white, fontSize: 16),
  ),
)

Parameters

Parameter	Type	Default	Description
`onPressed`	`Future<void> Function()`	Required	Asynchronous action executed when tapped. Keeps button loading until resolved.
`child`	`Widget`	Required	Label/Content of the button when idle (e.g., Text, Icon).
`loadingWidget`	`Widget?`	`CircularProgressIndicator`	Custom loading animation spinner.
`width`	`double`	`200`	Regular horizontal width of the button.
`height`	`double`	`50`	Operational height of the button.
`color`	`Color?`	`Theme.primaryColor`	Button background color.
`borderRadius`	`BorderRadius?`	`BorderRadius.circular(8)`	Inherent shape curving of the button.
`pressDuration`	`Duration`	`100ms`	Transition speed of the physical tap effect.
`loadingDuration`	`Duration`	`300ms`	Shifting speed from button to circle spinner.

License

This project is licensed under the MIT License - see the LICENSE file for details.