Flutter - Draggable 小部件的反馈没有正确动画

Question

AnimatedIcon 小部件在按住/拖动它时会传送到屏幕的左上角（不是故意的）。它最初从屏幕的中心开始，并在释放时返回到相同的位置。任何帮助将不胜感激。

Note: As this is in GIF format, it does not appear smooth here.

这是我的代码：

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

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

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  // This widget is the root of your application.
  @override
  void initState(){
    super.initState();
    SystemChrome.setPreferredOrientations([
        DeviceOrientation.landscapeRight,
        DeviceOrientation.landscapeLeft,
    ]);
  }

  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          child: Element(name: 'Fire'),
        )
      )
    );
  }
}

class AnimatedIcon extends AnimatedWidget {

  static final sizeTween = Tween<double>(begin: 80.0, end: 200.0);
  static final marginTween = Tween<double>(begin: 0.0, end: 5.0);

  AnimatedIcon({Key key, Animation<double> animation})
      : super(key: key, listenable: animation);

  Widget build(BuildContext context) {
    final animation = listenable as Animation<double>;
    return Center(
      child: Container(
        margin: EdgeInsets.only(top: marginTween.evaluate(animation), left: marginTween.evaluate(animation)),
        height: sizeTween.evaluate(animation),
        width: sizeTween.evaluate(animation),

        color: Colors.blue,
      ),
    );
  }
}


class Element extends StatefulWidget {
  final String name;
  Element({Key key, @required this.name}) : super(key: key);

  ElementState createState() => ElementState();
}

class ElementState extends State<Element> with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation, animationSize;

  void initState() {
    super.initState();
    controller = AnimationController(duration: Duration(milliseconds: 3000), vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Draggable<String>(
      data: widget.name,

      child: AnimatedIcon(animation: controller),
      childWhenDragging: Container(),
      onDragStarted: () => {
        setState(() {
          controller.forward();
        })
      },
      feedback: AnimatedIcon(animation: controller),
      onDragEnd: (details) => {
        setState(() {
          controller.reverse();
        })
      },

    );
  }
}

Answer 1

移除 Center() 有助于传送

  Widget build(BuildContext context) {
    final animation = listenable as Animation<double>;
    return Container(
      margin: EdgeInsets.only(
          top: marginTween.evaluate(animation),
          left: marginTween.evaluate(animation)),
      height: sizeTween.evaluate(animation),
      width: sizeTween.evaluate(animation),
      color: Colors.blue,
    );
  }