mek_floating_drag 0.1.3+1

Enable a widget to be dragged allowing it to be removed if dropped in an area or hidden if time passes or is pressed out.

Enable a widget to be dragged allowing it to be removed if dropped in an area or hidden if time passes or is pressed out.

TRY WEB APP EXAMPLE

Features

• ✅ You can drag it anywhere you want
• ✅ The button is attracted to the edges of the container, it bounces!
• ✅ The button, if released outside the natural edges, is attracted inside
• ✅ The Button hides when some time passes
• ✅ The button hides if you don't play with him, if you hit someone else
• ✅ You can delete the button by dragging it over an area (Bin)
• ✅ When the button is released inside the bin it shrinks and aligns with the center of the bin
• ❌ When the button approaches the bin it is attracted to it

Getting started

Remember to wrap everything in a ´FloatingZone´

Usage

Define your draggable widget.

final draggable = FloatingDraggable(
  controller: _dartController,
  naturalEdgesResolver: (containerSize, childSize) {
    return const EdgeInsets.symmetric(horizontal: double.nan, vertical: 64.0);
  },
  elasticEdgesResolver: (containerSize, childSize) {
    return const EdgeInsets.symmetric(horizontal: 16.0, vertical: double.nan);
  },
  retractEdgesResolver: (containerSize, childSize) {
    return EdgeInsets.symmetric(horizontal: -(0.60 * childSize.width), vertical: double.nan);
  },
  child: FloatingActionButton(
    onPressed: () {},
    child: const Icon(Icons.message),
  ),
);

You can define a target for dragging, this target will delete the draggable widget when dropped into it

const dragTarget = FloatingCircularDragBin();

Wrap it all up in a Floating Zone. It is necessary for proper functioning. You can also use FloatingZone.inOverlay.

final result = FloatingZone.inStack(
  entries: [
    const Positioned(
      bottom: 16.0,
      right: 0.0,
      left: 0.0,
      child: dragTargetBin,
    ),
    Positioned(
      bottom: 16.0,
      right: 16.0,
      child: draggable,
    ),
  ],
  child: RestrictedFloatingZone(
    child: scaffold,
  ),
);

If you use RestrictedFloatingZone you will be able to hide the draggable widget when the user presses in RestrictedFloatingZone

Additional information

TODO: Add additional information

Developer information

• Release: flutter pub publish
• Generate barrel file: dart pub global run index_generator