Плавное перетаскивание в 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 шт):
Скорее, Вы имели в виду не шлейф, а то что виден начальный виджет во время перетаскивания.
По порядку:
color: Colors.green.withOpacity(0.0),
Движения не резкие. Они точно такие же, просто цвет абсолютно прозрачный.
Ну и чтобы не оставался виджет во время перетаскивания, добавьте:
childWhenDragging: Container(),
Результат по Вашему примеру:
