swipe_confirm_button #

A universal, zero-dependency "slide to confirm" button for Flutter — a themeable, robust reimagining of the classic swipe-to-action pattern.

• No external packages — only the Flutter SDK.
• Two usage modes — automatic (await a Future) or manual (drive it with a controller, e.g. from a BLoC).
• Single source of truth — the visual status comes from one controller, so the UI can never desync.
• Fully themeable — colors, height, radius, icons, threshold, direction (LTR/RTL), haptics, animations.
• States: idle → loading → success / error, with a smooth collapse into a loading circle.
• Accessible — exposes a tap action for screen readers and honors the platform's reduce motion setting.
• Rich animations — idle hint, drag feedback, rolling icon, animated icon swaps — all selectable.

Gallery #

Default
Custom colors
Gradient + trailing hint, draggable track
Rounded, padded track, custom icon
Success state (successColor)

The button is animated — slide, idle hint, drag feedback, collapse-to-loading and the rolling icon are best seen live: cd example && flutter run.

Quick start #

import 'package:swipe_confirm_button/swipe_confirm_button.dart';

// 1. Automatic — show a spinner until the Future completes, then success.
SwipeButton(
  text: 'Slide to confirm',
  autoResetAfterSuccess: const Duration(seconds: 2),
  onSwipe: () async => api.confirmOrder(),
);

// 2. Manual — you own the state (BLoC / Cubit / setState).
final controller = SwipeButtonController();

SwipeButton(
  controller: controller,
  text: 'Buyurtmani yetkazdim',
  onSwipe: () => bloc.add(ConfirmOrder()),
);

// elsewhere, react to your state:
controller.loading();
controller.success(); // or controller.error();
controller.reset();

Customization #

App-wide theming #

Set defaults once via a ThemeExtension; per-widget values still win.

MaterialApp(
  theme: ThemeData(
    extensions: const [
      SwipeButtonThemeData(
        height: 56,
        thumbColor: Colors.indigo,
        dragEffect: SwipeDragEffect.glow,
      ),
    ],
  ),
);

Accessibility #

The button exposes a tap action so screen-reader users can activate it without performing a drag, and it honors the platform's reduce motion setting (MediaQuery.disableAnimations) by stopping the idle hint loop and making transitions instant.

Programmatic confirm #

final controller = SwipeButtonController();
// animates the thumb across and fires onSwipe, just like a real swipe:
controller.complete();

Installation #

dependencies:
  swipe_confirm_button: ^0.1.0

Demo #

example/lib/main.dart contains four runnable examples (automatic, manual, custom-styled RTL, and error handling):

cd example
flutter run

Tests #

flutter test