Flutter-可拖动小部件的反馈无法正确设置动画

问题描述

按住或拖动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();
        })
      },);
  }
}

解决方法

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