Draggable Floating FAB

A draggable, sticky support FAB overlay with a drag-to-dismiss zone for Flutter apps.

In a real app

Support FAB on a real app home screen Dragging the FAB to the dismiss zone in a real app

  • Ex.1 — FAB snapped to the edge over the app UI
  • Ex.2 — Drag toward the red dismiss zone to hide for the session

Demo

FAB snapped to the right edge FAB drag-to-dismiss zone FAB snapped to the left edge

Wrap your app (or any subtree) to get an edge-snapping floating action button that:

  • Drags freely and snaps to the nearest left/right edge
  • Persists its position per locale via SharedPreferences
  • Shows a dismiss zone while dragging (drop to hide for the session)
  • Optionally auto-hides on configured route paths

Installation

dependencies:
  draggable_floating_fab: ^0.1.4

Then run:

flutter pub get

Usage

Pass the router once — no wrapper widget, no ListenableBuilder:

import 'package:draggable_floating_fab/draggable_floating_fab.dart';

MaterialApp.router(
  routerConfig: router,
  builder: (context, child) {
    return DraggableSupportFabOverlay(
      routeListenable: router.routerDelegate,

      currentPath: () => router.state.uri.path, //It points to the application's current path (screen).

      // `/` only hides the root route — safe to include.
      hiddenRoutePaths: const {'/', '/login', '/help-center'},//It points to the screen should hide the fab in

      onFabTap: () => router.push('/help-center'),
      fabIcon: Icons.headset_mic_rounded, // optional custom icon
      bottomSafeInset: 88, // clear bottom nav if needed
      child: child ?? const SizedBox.shrink(),
    );
  },
);

DraggableSupportFabOverlay(
  child: child,
  onFabTap: () {
    // e.g. open your support / live-chat screen
  },
  currentPath: () => currentRouteName,
  hiddenRoutePaths: const {'/', '/onboarding', '/live-chat'},
  fabColor: Theme.of(context).colorScheme.primary,
  fabIcon: Icons.chat_bubble_outline_rounded,
  bottomSafeInset: 16,
)

Tips

Parameter Notes
routeListenable e.g. GoRouter.routerDelegate — rebuilds on navigation
hiddenRoutePaths / matches root only; other paths match exact + nested (/help → /help/x)
fabColor Defaults to ColorScheme.primary when omitted
fabIcon / fabIconColor / fabIconSize Customize the default Material icon
fab Full custom widget; keep fabSize in sync with it
currentPath Omit to always show the FAB (until session-dismissed)

Example

See the example/ directory for a runnable demo:

cd example
flutter run

License

MIT

Libraries

draggable_floating_fab