DragTarget Widget

DragTarget Widget is a widget that receives data when a Draggable widget is dropped. When a draggable is dragged on top of a drag target, the drag target is asked whether it will accept the data the draggable is carrying. If the user does drop the draggable on top of the drag target, then the drag target is asked to accept the draggable’s data.

You may also check our Flutter app development page.

Properties:

builder(): builder() is called to build the contents of this DragTarget. The builder can build different widgets depending on what is being dragged into this drag target. builder() takes three parameters.
BuildContext: Context of a Widget.
candidateData: It contains the list of draggable data that will be accepted by DragTarget.
rejectedData: It contains the list of Draggable data that will not be accepted by DragTarget.
onWillAccept(): onWillAccept is called to determine whether this widget is interested in receiving a given piece of data being dragged over this drag target. or we can say that Takes a function which provides the data of Draggable to use as a parameter and returns bool based on whether Draggable will be accepted or not if onWillAccept returns true then onAccept is called.
onAccept(): Takes a function that provides the data of Draggable which was accepted by DragTarget.
onLeave: onLeave is called when Draggable leaves the DragTarget and not dropped into DragTarget.


class DragTargetWidget extends StatefulWidget {
  @override
  _DragTargetWidgetState createState() => _DragTargetWidgetState();
}

class _DragTargetWidgetState extends State<DragTargetWidget> {
  Color caughtColor = Colors.red;

  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: const EdgeInsets.all(8.0),
        child: Scaffold(
          appBar: AppBar(
            title: const Text('DragTarget Widgets Demo'),
            centerTitle: true,
            backgroundColor: Colors.red,
          ),
          body: Stack(
            children: <Widget>[
              DragBox(
                const Offset(0.0, 0.0),
                'Drag This',
                Colors.pink,
              ),
              DragBox(
                const Offset(250.0, 0.0),
                'Drag This',
                Colors.grey,
              ),
              Positioned(
                left: 100.0,
                bottom: 0.0,
                child: DragTarget(
                  onAccept: (Color color) {
                    caughtColor = color;
                  },
                  builder: (
                    BuildContext context,
                    List<dynamic> accepted,
                    List<dynamic> rejected,
                  ) {
                    return Container(
                      width: 150.0,
                      height: 150.0,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(28.0),
                        color: accepted.isEmpty
                            ? caughtColor
                            : Colors.grey.shade200,
                      ),
                      child: const Center(
                        child: Text("You can drag here!"),
                      ),
                    );
                  },
                ),
              )
            ],
          ),
        ));
  }
}

class DragBox extends StatefulWidget {
  final Offset initPos;
  final String label;
  final Color itemColor;

  DragBox(
    this.initPos,
    this.label,
    this.itemColor,
  );

  @override
  DragBoxState createState() => DragBoxState();
}

class DragBoxState extends State<DragBox> {
  Offset position = const Offset(0.0, 0.0);

  @override
  void initState() {
    super.initState();
    position = widget.initPos;
  }

  @override
  Widget build(BuildContext context) {
    return Positioned(
      left: position.dx,
      top: position.dy,
      child: Draggable(
        data: widget.itemColor,
        child: Container(
          width: 120.0,
          height: 120.0,
          color: widget.itemColor,
          child: Center(
            child: Text(
              widget.label,
              style: const TextStyle(
                color: Colors.white,
                fontSize: 20.0,
              ),
            ),
          ),
        ),
        onDraggableCanceled: (velocity, offset) {
          setState(() {
            position = offset;
          });
        },
        feedback: Container(
          width: 120.0,
          height: 120.0,
          color: widget.itemColor.withOpacity(0.5),
          child: Center(
            child: Text(
              widget.label,
              style: const TextStyle(
                color: Colors.white,
                decoration: TextDecoration.none,
                fontSize: 18.0,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

class DragTargetWidget extends StatefulWidget {

@override

_DragTargetWidgetState createState() => _DragTargetWidgetState();

}

class _DragTargetWidgetState extends State<DragTargetWidget> {

Color caughtColor = Colors.red;

@override

Widget build(BuildContext context) {

return Padding(

padding: const EdgeInsets.all(8.0),

child: Scaffold(

appBar: AppBar(

title: const Text('DragTarget Widgets Demo'),

centerTitle: true,

backgroundColor: Colors.red,

body: Stack(

children: <Widget>[

DragBox(

const Offset(0.0, 0.0),

'Drag This',

Colors.pink,

DragBox(

const Offset(250.0, 0.0),

'Drag This',

Colors.grey,

Positioned(

left: 100.0,

bottom: 0.0,

child: DragTarget(

onAccept: (Color color) {

caughtColor = color;

builder: (

BuildContext context,

List<dynamic> accepted,

List<dynamic> rejected,

) {

return Container(

width: 150.0,

height: 150.0,

decoration: BoxDecoration(

borderRadius: BorderRadius.circular(28.0),

color: accepted.isEmpty

? caughtColor

: Colors.grey.shade200,

child: const Center(

child: Text("You can drag here!"),

);

)

));

}

class DragBox extends StatefulWidget {

final Offset initPos;

final String label;

final Color itemColor;

DragBox(

this.initPos,

this.label,

this.itemColor,

);

@override

DragBoxState createState() => DragBoxState();

}

class DragBoxState extends State<DragBox> {

Offset position = const Offset(0.0, 0.0);

@override

void initState() {

super.initState();

position = widget.initPos;

}

@override

Widget build(BuildContext context) {

return Positioned(

left: position.dx,

top: position.dy,

child: Draggable(

data: widget.itemColor,

child: Container(

width: 120.0,

height: 120.0,

color: widget.itemColor,

child: Center(

child: Text(

widget.label,

style: const TextStyle(

color: Colors.white,

fontSize: 20.0,

onDraggableCanceled: (velocity, offset) {

setState(() {

position = offset;

});

feedback: Container(

width: 120.0,

height: 120.0,

color: widget.itemColor.withOpacity(0.5),

child: Center(

child: Text(

widget.label,

style: const TextStyle(

color: Colors.white,

decoration: TextDecoration.none,

fontSize: 18.0,

);

}

Output:

Conclusion:

I hope you get the rough idea to how to use DragTarget Widget in flutter. For reference you can also check here. You can also read other Mobikul blog here.

flutter

Mohit Kumar 27 April 2023

. . .

DragTarget Widget

Properties:

Conclusion:

Leave a Comment Cancel Reply

Message Sent!