Draggable Widget and Attributes

The Draggable widget in Flutter empowers developers to build dynamic and interactive user interfaces by enabling draggable elements within their applications. This widget facilitates the creation of engaging user experiences where users can effortlessly move widgets around the screen. In this guide, we'll explore the Draggable widget and its key attributes, accompanied by a practical example.

The Draggable widget provides a way to make any widget draggable within the UI. It is particularly useful for scenarios where users need to rearrange elements, create drag-and-drop interfaces, or simply interact with draggable components.

Key Attributes of Draggable

child

The child attribute defines the widget that will be draggable. This is the visual component that users can move around the screen.

feedback

The feedback attribute allows you to customize the visual representation of the dragged widget. It's what the user sees while dragging.

onDragStarted, onDragUpdate, onDragEnd

These attributes provide callbacks to handle different stages of the drag operation. You can define actions to be taken when dragging starts, when the position is updated, and when the drag operation concludes.

dragAnchor

The dragAnchor attribute allows you to specify where the draggable widget should be anchored to during the drag operation.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Draggable Widget Example'),
        ),
        body: Center(
          child: MyDraggableWidget(),
        ),
      ),
    );
  }
}

class MyDraggableWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Draggable(
      feedback: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
        child: Center(
          child: Text(
            'Drag me!',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
        child: Center(
          child: Text(
            'Draggable Area',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
      onDragStarted: () {
        print('Drag started!');
      },
      onDragEnd: (details) {
        print('Drag ended!');
      },
    );
  }
}

In this example, the Draggable widget is used to make a blue square draggable. The feedback attribute defines the appearance of the widget while it's being dragged. The onDragStarted and onDragEnd callbacks provide hooks for executing code when the drag operation begins and ends.