Draggable Widget – Flutter Widget Guide By Flutter Agency

· 5 min read
Draggable Widget - Flutter Widget Guide By Flutter Agency
Draggable Widget - Flutter Widget Guide By Flutter Agency

What is the Draggable Widget in Flutter?

Draggable Widget allows a widget to be dragged, a DragTarget provides a destination for the draggable. A widget that can be dragged from to a DragTarget. When a draggable widget recognizes the start of a drag gesture, it displays a feedback widget that tracks the user’s finger across the screen. If the user lifts their finger while on top of a DragTarget, that target is given the opportunity to accept the data carried by the draggable.

It will give an ability to drag the child widget and you can control what you need to do when dragging the widget. It has a property to hold the data they represent.

The Default Constructor of it will have a code snippet like below :

Draggable<T>({
    Key key,
    @required Widget child,
    @required Widget feedback,
    T data,
    Axis axis,
    Widget childWhenDragging,
    Offset feedbackOffset: Offset.zero,
    DragAnchor dragAnchor: DragAnchor.child,
    Axis affinity,
    int maxSimultaneousDrags,
    VoidCallback onDragStarted,
    DraggableCanceledCallback onDraggableCanceled,
    DragEndCallback onDragEnd,
    VoidCallback onDragCompleted,
    bool ignoringFeedbackSemantics: true,
    });

In the Above constructor, all fields marked with @required must not be empty. The following code, snippet shows how to use Draggable.

Draggable( 
child:// To do, 
feedback: // To do,
)

Properties :

  • child: child Widget which can be dragged or to is displayed when draggable is stationary.
  • feedback: Widget to be displayed when drag is underway.
  • childWhenDragging: Widget to be displayed in the original place of Draggable when drag is underway.
  • data: It contains the information dropped by Draggable at DragTarget, it is useful when we are using multiple Draggable and DragTarget.

Draggable Properties :

  • onDragStarted(): onDragStarted() is called when the Draggable widget starts to drag.
  • onDragCompleted(): onDragCompleted() is called when Draggable is dropped on DropTarget and DropTarget has accepted the Draggable.
  • onDragEnd(): onDragEnd() is called when Draggable is dropped on DropTarget. This contains the velocity and Offset of Draggable when it was dropped.
  • onDraggableCancelled(): onDraggableCancelled is called when Draggable is dropped but not accepted by DragTarget.

How to use Draggable Widget in Flutter?

The following code snippet tells us how to implement a Draggable Widget in Flutter.

Draggable(
            child: Container(
              width: 100,
              height: 100,
              color: Colors.orangeAccent,
              child: Center(
                child: Text(
                  "Drag Me",
                  style: Theme.of(context).textTheme.caption.copyWith(
                        fontSize: 18,
                        color: Colors.white,
                        fontWeight: FontWeight.w600,
                      ),
                ),
              ),
            ),
            feedback: Container(
              child: Center(
                child: Text(
                  "Drag To",
                  style: Theme.of(context).textTheme.caption.copyWith(
                        fontSize: 18,
                        color: Colors.white,
                        fontWeight: FontWeight.w600,
                      ),
                ),
              ),
              color: Colors.green,
              width: width,
              height: height,
            ),
            onDraggableCanceled: (Velocity velocity, Offset offset) {
              setState(() => position = offset);
            },
          ),
import 'package:flutter/material.dart';

class DraggableWidget extends StatefulWidget {
  @override
  _DraggableWidgetState createState() => _DraggableWidgetState();
}

class _DraggableWidgetState extends State<DraggableWidget> {
  double width = 100.0, height = 100.0;
  Offset position;

  @override
  void initState() {
    super.initState();
    position = Offset(0.0, height - 20);
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Positioned(
          left: position.dx,
          top: position.dy - height + 20,
          child: Draggable(
            child: Container(
              width: 100,
              height: 100,
              color: Colors.orangeAccent,
              child: Center(
                child: Text(
                  "Drag Me",
                  style: Theme.of(context).textTheme.caption.copyWith(
                        fontSize: 18,
                        color: Colors.white,
                        fontWeight: FontWeight.w600,
                      ),
                ),
              ),
            ),
            feedback: Container(
              child: Center(
                child: Text(
                  "Drag To",
                  style: Theme.of(context).textTheme.caption.copyWith(
                        fontSize: 18,
                        color: Colors.white,
                        fontWeight: FontWeight.w600,
                      ),
                ),
              ),
              color: Colors.green,
              width: width,
              height: height,
            ),
            onDragStarted: () {
              print("onDragStarted");
            },
            onDragCompleted: () {
              print("onDragCompleted");
            },
            onDraggableCanceled: (Velocity velocity, Offset offset) {
              setState(() => position = offset);
            },
          ),
        ),
      ],
    );
  }
}

We will get output like below :

Draggable Widget - Flutter Widget Guide By Flutter Agency

Draggable in Flutter

Conclusion:

In this article, we have been through What is Draggable Widget in Flutter along with how to implement it in a Flutter.

Thanks for reading.
In the next article, we get into DragTarget Widget. We are super excited to get into it like you.

Do let us know your suggestion/Feedback.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply