Flutter - Feedback of Draggable widget does not animate properly

问题

The AnimatedIcon widget, when holding/dragging it, teleports to the top-left hand of the screen(not intentional). It initially starts at the centre of the screen and returns to same position when it is released. Any help would be greatly appreciated.

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

Here's my code:

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

    );
  }
}

回答1:

Removing Center() helped with teleporting

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

来源：https://stackoverflow.com/questions/63466781/flutter-feedback-of-draggable-widget-does-not-animate-properly

标签

Flutter

animation

draggable

flutter-animation