Flutter - DragBox Feedback animate to original position

Question

I want to show the animation of feedback of draggable when it is not accepted by the DropTarget.Flutter doesn't show the feedback. Is there any way we can show that or control it. Like this example, I want to achieve this effect. I somehow achieve this effect but it is not proper accurate returning to the original offset. It is moving ahead to its original position.

Animation effect I want.

Here is my Code, I have one drag box when I lift it to a certain position and leave him from there and it should animate back to original position, but it is returning to some other Offset like this.

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(body: DragBox()),
    );
  }
}

class DragBox extends StatefulWidget {
  DragBox({
    Key key,
  }) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return new _MyDragBox();
  }
}

class _MyDragBox extends State<DragBox> with TickerProviderStateMixin {
  GlobalKey _globalKey = new GlobalKey();
  AnimationController _controller;
  Offset begin;
  Offset cancelledOffset;
  Offset _offsetOfWidget;
  @override
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback((s) {
      _afeteLayout();
    });
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 1000),
    );
  }

  void _afeteLayout() {
    final RenderBox box = _globalKey.currentContext.findRenderObject();
    Offset offset = -box.globalToLocal(Offset(0.0, 0.0));
    _offsetOfWidget = offset;
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Center(
          child: Draggable(
            key: _globalKey,
            onDraggableCanceled: (v, o) {
              setState(() {
                cancelledOffset = o;
              });
              _controller.forward();
            },
            feedback: Container(
              color: Colors.red,
              height: 50,
              width: 50,
            ),
            child: Container(
              color: Colors.red,
              height: 50,
              width: 50,
            ),
          ),
        ),
        _controller.isAnimating
            ? SlideTransition(
                position: Tween<Offset>(
                        begin: cancelledOffset * 0.01,
                        end: _offsetOfWidget * 0.01)
                    .animate(_controller)
                      ..addStatusListener((status) {
                        if (status == AnimationStatus.completed) {
                          _controller.stop();
                        } else {
                          _controller.reverse();
                        }
                      }),
                child: Container(
                  color: Colors.red,
                  height: 50,
                  width: 50,
                ),
              )
            : Container(
                child: Text('data'),
              )
      ],
    );
  }
}

Serious

This is not something that is done out of the box by Draggable. You have to make the animation yourself, using OverlayEntry and some more stuff – Douche

@RémiRousselet Thanks. I will try it if you have any example from that I will get some more idea? – Serious

@RémiRousselet #54194912 can you help me with this? – Serious

Were you able to achieve the desired animation effect? – Deathwatch

can you elaborate on how you achieved it? – Sheepish

@axelblaze If you managed to fix your own issue. Please post here as a response to your own question. Otherwise you are not helping anyone. – Strathspey

Hi, did you ever manage to achieve this effect with a Draggable widget? I'm desperate to figure this one out. – Freehand

Answer 1

A simple way to solve this problem is to create a widget that overrides Draggable and make it a child of an AnimatedPositioned. Here is the example:

import 'package:flutter/material.dart';

class XDraggable extends StatefulWidget {
  const XDraggable(
      {Key? key,
      required this.child,
      required this.original_x,
      required this.original_y,
      this.animation_speed = 200})
      : super(key: key);
  final Widget child;
  final double original_x;
  final double original_y;
  final double animation_speed;

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

class _XDraggableState extends State<XDraggable> {
  double x = 200;
  double y = 200;

  int animation_speed = 0;

  @override
  void initState() {
    x = widget.original_x;
    y = widget.original_y;

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedPositioned(
      left: x,
      top: y,
      duration: Duration(milliseconds: animation_speed),
      child: Draggable(
        onDragUpdate: (details) => {
          setState(() {
            animation_speed = 0;
            x = x + details.delta.dx;
            y = y + details.delta.dy;
          }),
        },
        onDragEnd: (details) {
          setState(() {
            animation_speed = 200;
            x = widget.original_x;
            y = widget.original_y;
          });
        },
        child: widget.child,
        feedback: SizedBox(),
      ),
    );
  }
}

Then, just use the widget as a Stack child:

...
child: Stack(
            fit: StackFit.expand,
            children: [
              XDraggable(
                original_x: 20,
                original_y: 20,
                child: Container(
                  height: 50.0,
                  width: 50.0,
                  color: Colors.green,
                ),
              )
            ],
          ),
...

Flummery

Answer 2

I found a solution that uses a combo of Transform.translate and AnimatedContainer

Here's the code:

import 'package:flutter/material.dart';

class TestScreen extends StatefulWidget {
  const TestScreen({super.key});

  @override
  State<TestScreen> createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  static const animationDuration = Duration(
    milliseconds: 350,
  );

  final key = GlobalKey();

  var positions = (Offset.zero, Offset.zero);

  void initPositions() {
    positions = (Offset.zero, Offset.zero);
  }

  static const child = ColoredBox(
    color: Colors.amber,
    child: SizedBox(
      width: 150,
      height: 150,
    ),
  );

  Offset? findPosition(
    GlobalKey key,
  ) {
    final box = key.currentContext?.findRenderObject() as RenderBox?;
    return box?.localToGlobal(
      Offset.zero,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Builder(
            builder: (context) {
              final (dragStartPos, dragEndPos) = positions;
              final offset1 = dragStartPos - dragEndPos, offset2 = -offset1;
              final noAnimation =
                  dragStartPos == dragEndPos && dragEndPos == Offset.zero;
              return Transform.translate(
                key: key,
                offset: offset2,
                child: AnimatedContainer(
                  duration: noAnimation ? Duration.zero : animationDuration,
                  transform: Matrix4.translationValues(
                    offset1.dx,
                    offset1.dy,
                    0,
                  ),
                  child: Draggable(
                    feedback: Transform.scale(
                      scale: 1.05,
                      child: child,
                    ),
                    maxSimultaneousDrags: noAnimation ? 1 : 0,
                    childWhenDragging: const Opacity(
                      opacity: 0,
                      child: child,
                    ),
                    onDragStarted: () {
                      final startingPosition = findPosition(key);
                      if (startingPosition != null) {
                        positions = (startingPosition, positions.$2);
                      }
                      print('drag started at: $startingPosition');
                    },
                    onDraggableCanceled: (velocity, offset) {
                      print('drag canceled at: $offset');
                      if (offset == positions.$1) {
                        initPositions();
                        return;
                      }
                      setState(() {
                        positions = (positions.$1, offset);
                      });
                      Future<void>.delayed(
                        animationDuration,
                        () {
                          if (mounted) {
                            setState(() {
                              initPositions();
                            });
                          }
                        },
                      );
                    },
                    child: child,
                  ),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

The position where the drag actually starts and the position where the drag is cancelled are stored inside positions. The difference between those positions is determined and stored in offset1. On the other hand, offset2 contains the same values as in offset1 but with signs inverted. These offsets are quite analogous to two equal and opposite forces trying to cancel each other out when they're used inside the Transform.translate and AnimatedContainer. The difference is that the effect of force exerted by Transform.translate is instantaneous, whereas its only gradual in the case of AnimatedContainer.

This solution uses the built-in Draggable widget so that dropping it in a DragTarget is possible with a few more modifications.

Bartlett

Answer 3

I think, this documentation about "Animate a widget using a physics simulation" is the closest example suited for what you are trying to achieve.

This recipe demonstrates how to move a widget from a dragged point back to the center using a spring simulation.

To appreciate it in action, take a look on the example:

import 'package:flutter/material.dart';
import 'package:flutter/physics.dart';

void main() {
  runApp(MaterialApp(home: PhysicsCardDragDemo()));
}

class PhysicsCardDragDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: DraggableCard(
        child: FlutterLogo(
          size: 128,
        ),
      ),
    );
  }
}

/// A draggable card that moves back to [Alignment.center] when it's
/// released.
class DraggableCard extends StatefulWidget {
  final Widget child;
  DraggableCard({required this.child});

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

class _DraggableCardState extends State<DraggableCard>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  /// The alignment of the card as it is dragged or being animated.
  ///
  /// While the card is being dragged, this value is set to the values computed
  /// in the GestureDetector onPanUpdate callback. If the animation is running,
  /// this value is set to the value of the [_animation].
  Alignment _dragAlignment = Alignment.center;

  late Animation<Alignment> _animation;

  /// Calculates and runs a [SpringSimulation].
  void _runAnimation(Offset pixelsPerSecond, Size size) {
    _animation = _controller.drive(
      AlignmentTween(
        begin: _dragAlignment,
        end: Alignment.center,
      ),
    );
    // Calculate the velocity relative to the unit interval, [0,1],
    // used by the animation controller.
    final unitsPerSecondX = pixelsPerSecond.dx / size.width;
    final unitsPerSecondY = pixelsPerSecond.dy / size.height;
    final unitsPerSecond = Offset(unitsPerSecondX, unitsPerSecondY);
    final unitVelocity = unitsPerSecond.distance;

    const spring = SpringDescription(
      mass: 30,
      stiffness: 1,
      damping: 1,
    );

    final simulation = SpringSimulation(spring, 0, 1, -unitVelocity);

    _controller.animateWith(simulation);
  }

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);

    _controller.addListener(() {
      setState(() {
        _dragAlignment = _animation.value;
      });
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return GestureDetector(
      onPanDown: (details) {
        _controller.stop();
      },
      onPanUpdate: (details) {
        setState(() {
          _dragAlignment += Alignment(
            details.delta.dx / (size.width / 2),
            details.delta.dy / (size.height / 2),
          );
        });
      },
      onPanEnd: (details) {
        _runAnimation(details.velocity.pixelsPerSecond, size);
      },
      child: Align(
        alignment: _dragAlignment,
        child: Card(
          child: widget.child,
        ),
      ),
    );
  }
}

Sample output:

Pythian

Hi, this is great but what if you actually need to use a Draggable widget because you have DragTarget that require the data of the Draggable? – Freehand