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 horizontalSpace;
/// 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,
center
}
How to use
Stack(
children:[
// other widgets...
DraggableWidget(
bottomMargin: 80,
topMargin: 80,
intialVisibility: true,
horizontalSpace: 20,
shadowBorderRadius: 50,
child: Container(
height: 100,
width: 100,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.blue,
),
),
initialPosition: AnchoringPosition.bottomLeft,
dragController: dragController,
),
],
)
DragController Functionality
/// 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.