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.
Download Flutter draggable widget package source code on GitHub
https://github.com/adar2378/draggable_widget
Check out Flutter draggable widget package implementation details on PUB
https://pub.dev/packages/draggable_widget
Provides the list of the opensource Flutter apps collection with GitHub repository.