Плавное перетаскивание в Draggable

Как плавно перетаскивать виджет, что бы не был виден "шлейф" квадрата? Объясню просто. За отображение виджета во время перетаскивания отвечает свойство feedback. Если там сделать цвет не видимым, то в начале проводится палец по экрану, когда палец остановился, появляется квадрат. Если цвет не убирать, то во время проведения пальца по экрану, перемещается и квадрат, но "шлейф" квадрата, он сделан другим цветом, будет видин. Вот часть этого кода.

feedback: Container(
 width: _width,
 height: _height,
 //ДВИЖЕНИЯ ПЛАВНЫЙ, НО ВИДЕН ШЛЕЙФ КВАДРАТА
 color: Colors.green,
 //ЕСЛИ РАСКОМЕНТИРОВАТЬ, ДВИЖЕНИЯ БУДУТ РЕЗКИМИ
 //color: Colors.green.withOpacity(0.0),
),

Как решить такой вопрос? Далее, полный код.

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return MaterialApp(
   debugShowCheckedModeBanner: false,
   title: 'Name App',
   theme: ThemeData(
    primarySwatch: Colors.blue,
   ),
   home: Scaffold(
    appBar: AppBar(
     title: Text('Name Page'),
    ),
    body: MyHomePage(),
   ),
  );
 }
}

class MyHomePage extends StatefulWidget {
 @override
 _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

 double _width;
 double _height;
 Offset _position;
 String _str;
 Color _color;

 @override
 void initState() {
  super.initState();
  _width = 100.0;
  _height = 100.0;
  _position = Offset(0.0, _height - 20);
  _str = 'A';
  _color = Colors.orangeAccent;
 }

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

 }

 void _f1() {
  setState(() {

  });
 }

 @override
 Widget build(BuildContext context) {
  return Stack(
   children: <Widget>[
    Positioned(
     left: _position.dx,
     top: _position.dy - _height + 20,
     child: Draggable(
      //отображение виджета изначально
      child: Container(
       width: _width,
       height: _height,
       color: _color,
       alignment: Alignment.center,
       child: Text(
        _str,
        style: TextStyle(
         fontSize: 18,
         color: Colors.white,
         fontWeight: FontWeight.w600,
        ),
       ),
      ),
      //отображение виджета во время перетаскивания
      feedback: Container(
       width: _width,
       height: _height,
       //ДВИЖЕНИЯ ПЛАВНЫЙ, НО ВИДЕН ШЛЕЙФ КВАДРАТА
       color: Colors.green,
       //ЕСЛИ РАСКОМЕНТИРОВАТЬ, ДВИЖЕНИЯ БУДУТ РЕЗКИМИ
       //color: Colors.green.withOpacity(0.0),
      ),
      //вызывается, когда виджет перетаскивается на DropTarget
      //DropTarget ПРИНЯЛ виджет
      onDragCompleted: () {
       setState(() {

       });
      },
      //вызывается, когда виджет перетаскивается на DropTarget
      //DropTarget НЕ ПРИНЯЛ виджет
      //виджет отбрасывается
      onDraggableCanceled: (Velocity velocity, Offset offset) {
       setState(() {
        _position = offset;
       });
      },
      //вызывается, когда виджет начинают перетаскивать
      onDragStarted: () {
       setState(() {

       });
      },
      //вызывается, когда виджет перетаскивается на DropTarget
      //содержит скорость и смещение
      onDragEnd: (DraggableDetails details) {
       setState(() {

       });
      },
     ),
    ),
   ],
  );
 }

}

Ответы (1 шт):

Автор решения: VAndrJ

Скорее, Вы имели в виду не шлейф, а то что виден начальный виджет во время перетаскивания.

По порядку:

color: Colors.green.withOpacity(0.0),

Движения не резкие. Они точно такие же, просто цвет абсолютно прозрачный.

Ну и чтобы не оставался виджет во время перетаскивания, добавьте:

childWhenDragging: Container(),

Результат по Вашему примеру:

введите сюда описание изображения

→ Ссылка