Flutter Draggable Widget Example

Flutter Draggable widget is a component of the Flutter framework. It’s how the app’s drag-and-drop features are implemented. A gesture recognizer is built into the Draggable widget, so that its location can be updated in response to drag gestures. It also has callbacks for reacting to drag events, like when the widget is being moved or dropped. For defining the drop zone for a draggable widget, the DragTarget widget is commonly used in tandem with the draggable.

Example of how to use the Flutter Draggable widget:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  <@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Draggable Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  <@override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isDragging = false;

  <@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Draggable Demo'),
      ),
      body: Center(
        child: Draggable(
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
            child: Center(
              child: Text(
                'Drag me!',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
          feedback: Container(
            width: 100,
            height: 100,
            color: Colors.blue.withOpacity(0.5),
            child: Center(
              child: Text(
                'Dragging...',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
          onDragStarted: () {
            setState(() {
              _isDragging = true;
            });
          },
          onDragEnd: (details) {
            setState(() {
              _isDragging = false;
            });
          },
        ),
      ),
    );
  }
}

this example, we are creating a Draggable widget with a child container that says “Drag me!”. When the user starts dragging the container, a feedback container with the text “Dragging…” appears. The onDragStarted and onDragEnd callbacks are used to update the _isDragging variable, which is used to change the appearance of the widget when it’s being dragged.

Flutter Draggable Widget supports animation during the drag operation. We can add animations to the Draggable widget by providing the child widget with a Transform widget.

example:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  <@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Draggable Animation Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  <@override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Offset _offset = Offset.zero;

  <@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Draggable Animation Demo'),
      ),
      body: Stack(
        children: <Widget>[
          Positioned(
            left: _offset.dx,
            top: _offset.dy,
            child: Draggable(
              child: Container(
                width: 100,
                height: 100,
                color: Colors.blue,
                child: Center(
                  child: Text(
                    'Drag me!',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
              feedback: Container(
                width: 100,
                height: 100,
                color: Colors.blue.withOpacity(0.5),
                child: Center(
                  child: Text(
                    'Dragging...',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
              onDragStarted: () {
                setState(() {});
              },
              onDragEnd: (details) {
                setState(() {});
              },
              onDragUpdate: (details) {
                setState(() {
                  _offset = Offset(
                    _offset.dx + details.delta.dx,
                    _offset.dy + details.delta.dy,
                  );
                });
              },
            ),
          ),
        ],
      ),
    );
  }
}

In this example, we are using the onDragUpdate callback to update the _offset variable with the delta of the drag event. We then use the _offset variable to position the Draggable widget using a Positioned widget. The child of the Flutter Draggable Widget is wrapped in a Transform widget, which is used to rotate the widget during the drag operation.

Conclusion

Flutter Draggable widget lets Flutter app users drag and drop widgets. It makes interactive, dynamic user interfaces easier.

Developers may quickly construct draggable widgets using Flutter Draggable by supplying a drag feedback widget, a child widget, and a drag state callback. This widget lets developers customize the drag feedback, drag target, and child widgets.

Flutter Draggable widget is a great tool for designing intuitive and engaging Flutter user interfaces. It lets developers build rich, interactive, and attractive user interfaces. read too How to Use Font Awesome in Flutter