Flutter - DragBox Feedback animate to original position

问题

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'),
              )
      ],
    );
  }
}

来源：https://stackoverflow.com/questions/54144121/flutter-dragbox-feedback-animate-to-original-position

标签

dart

drag-and-drop

Flutter