A flutter package which will help you to create a draggable widget

September 13, 2020 packages, Packages, Widgets

A flutter package which will help you to create a draggable widget that can be dragged around the screen.

Demo

Features

Manually Control the position of the widget along with drags.
Automatically resizes itself when the widget changes
Highly customizable
Supports Flutter web as well

Properties

/// The widget that will be displayed as dragging widget
  final Widget child;

  /// The horizontal padding around the widget
  final double horizontalSapce;

  /// The vertical padding around the widget
  final double verticalSpace;

  /// Intial location of the widget, default to [AnchoringPosition.bottomRight]
  final AnchoringPosition initialPosition;

  /// Intially should the widget be visible or not, default to [true]
  final bool intialVisibility;

  /// The top bottom pargin to create the bottom boundary for the widget, for example if you have a [BottomNavigationBar],
  /// then you may need to set the bottom boundary so that the draggable button can't get on top of the [BottomNavigationBar]
  final double bottomMargin;

  /// The top bottom pargin to create the top boundary for the widget, for example if you have a [AppBar],
  /// then you may need to set the bottom boundary so that the draggable button can't get on top of the [AppBar]
  final double topMargin;

  /// Status bar's height, default to 24
  final double statusBarHeight;

  /// Shadow's border radius for the draggable widget, default to 10
  final double shadowBorderRadius;

  /// A drag controller to show/hide or move the widget around the screen
  final DragController dragController;

  /// [BoxShadow] when the widget is not being dragged, default to
  /// ```Dart
  ///const BoxShadow(
  ///     color: Colors.black38,
  ///    offset: Offset(0, 4),
  ///    blurRadius: 2,
  ///  ),
  /// ```

  final BoxShadow normalShadow;

  /// [BoxShadow] when the widget is being dragged
  ///```Dart
  ///const BoxShadow(
  ///     color: Colors.black38,
  ///    offset: Offset(0, 10),
  ///    blurRadius: 10,
  ///  ),
  /// ```
  final BoxShadow draggingShadow;

  /// How much should the [DraggableWidget] be scaled when it is being dragged, default to 1.1
  final double dragAnimationScale;

AnchoringPosition can be among these 4 types

enum AnchoringPosition {
  topLeft,
  topRight,
  bottomLeft,
  bottomRight,
}

How to use

Stack(
    children:[
        // other widgets...
         DraggableWidget(
            bottomMargin: 80,
            topMargin: 80,
            intialVisibility: true,
            horizontalSapce: 20,
            shadowBorderRadius: 50,
            child: Container(
              height: 100,
              width: 100,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.blue,
              ),
            ),
            initialPosition: AnchoringPosition.bottomLeft,
            dragController: dragController,
          )
    ]
)

DragController Fucntionality

/// Jump to any [AnchoringPosition] programatically
void jumpTo(AnchoringPosition anchoringPosition) 

/// Get the current screen [Offset] of the widget
Offset getCurrentPosition()

/// Makes the widget visible
void showWidget()

/// Hide the widget
void hideWidget()

run the example app in the exmaple folder to find out more about how to use it.