How to show Icon when I started dragging a Widget in Flutter - flutter

Question

I want to know how can I show at the bottom of the screen a delete icon when I start dragging a Container in LongPressDraggable widget
Widget build(BuildContext context) {
return GestureDetector(
onTap: () => _onTap(context),
child: LongPressDraggable(
data: index,
maxSimultaneousDrags: 1,
onDragUpdate: (details) => print('update'),
onDragStarted: () => _buildDragTarget(),
onDragEnd: (_) => print('end'),
feedback: Material(
child: Container(
height: Sizes.height / 4.5,
width: Sizes.height / 4.5,
child: _DraggableContent(
index: index,
place: place,
),
),
),
childWhenDragging: Container(color: Colors.transparent),
child: _DraggableContent(
index: index,
place: place,
),
));
}
Widget _buildDragTarget() {
return DragTarget<int>(
builder: (BuildContext context, List<int> data, List<dynamic> rejects) {
return Icon(Icons.delete);
},
onAcceptWithDetails: (DragTargetDetails<int> dragTargetDetails) {
print('onAcceptWithDetails');
print('Data: ${dragTargetDetails.data}');
print('Offset: ${dragTargetDetails.offset}');
},
);
}
At the moment, when I start dragging the item, anything happens and I don't know how to continue

Answer 1

As far as I understood you need to show the delete icon on bottom when you are dragging an object.
You can wrap the delete icon with Visibility widget and set the visible parameter true or false based on the drag activity.
It will go something like this:
Widget _buildDragTarget() {
return DragTarget<int>(
builder: (BuildContext context, List<int> data, List<dynamic> rejects) {
return Visibility(
visible: isDragEnable,
child: Icon(Icons.delete));
},
onAcceptWithDetails: (DragTargetDetails<int> dragTargetDetails) {
print('onAcceptWithDetails');
print('Data: ${dragTargetDetails.data}');
print('Offset: ${dragTargetDetails.offset}');
},
);
}

Answer 2

You have an example with Dragable widget here : https://blog.logrocket.com/drag-and-drop-ui-elements-in-flutter-with-draggable-and-dragtarget/
On the DROPPING AN ITEM part https://blog.logrocket.com/drag-and-drop-ui-elements-in-flutter-with-draggable-and-dragtarget/#:~:text=the%20tomato%20image.-,Dropping%20an%20item,-At%20this%20point
You need to use the onAccept event on your DragTarget widget :
onAccept: (data) {
setState(() {
showSnackBarGlobal(context, 'Dropped successfully!');
_isDropped = true;
});
},
And on Drag starting, you can show up your delete icon by using this event (https://blog.logrocket.com/drag-and-drop-ui-elements-in-flutter-with-draggable-and-dragtarget/#:~:text=Listening%20to%20drag%20events) :
onDragStarted: () {
showSnackBarGlobal(context, 'Drag started');
},
I hope it will help you

Answer 3

I found the solution. It works creating a BlocProvider and working with the state.
class _Trash extends StatefulWidget {
const _Trash({
Key key,
}) : super(key: key);
#override
__TrashState createState() => __TrashState();
}
class __TrashState extends State<_Trash> with SingleTickerProviderStateMixin {
Animation animation;
AnimationController controller;
_listenerManager(bool isDragging) {
if (isDragging) {
setState(() => animation =
CurvedAnimation(parent: controller, curve: Curves.elasticOut));
controller.forward();
} else {
setState(() => animation = CurvedAnimation(
parent:
CurvedAnimation(parent: controller, curve: Interval(0.75, 1.0)),
curve: Curves.ease));
controller.reverse();
}
}
_deleteWidget(data) {
BlocProvider.of<BoardBloc>(context).add(BoardEvent.delete(data));
}
#override
void initState() {
controller =
AnimationController(vsync: this, duration: Duration(milliseconds: 500));
animation = CurvedAnimation(parent: controller, curve: Curves.elasticOut);
super.initState();
}
#override
Widget build(BuildContext context) {
return Positioned(
bottom: 0,
left: Sizes.width / 2 - Sizes.height / 15 / 2,
child: ScaleTransition(
scale: animation,
child: BlocListener<BoardBloc, BoardState>(
listenWhen: (previous, current) =>
previous.isDragging != current.isDragging,
listener: (context, state) => _listenerManager(state.isDragging),
child: Container(
height: Sizes.height / 15,
width: Sizes.height / 15,
color: Colors.amber,
child: DragTarget<int>(
builder: (BuildContext context, List<int> data,
List<dynamic> rejects) {
return Icon(Icons.delete);
},
onAcceptWithDetails:
(DragTargetDetails<int> dragTargetDetails) {
_deleteWidget(dragTargetDetails.data);
print('onAcceptWithDetails');
print('Data: ${dragTargetDetails.data}');
print('Offset: ${dragTargetDetails.offset}');
},
),
),
)));
}
}
class _PlaceTile extends StatelessWidget {
final int index;
final Place place;
const _PlaceTile({#required this.place, #required this.index});
_onTap(BuildContext context) => Navigator.of(context).push(PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) =>
PlaceViewer(index: index, animation: animation, place: place)));
_startDragging(context) {
BlocProvider.of<BoardBloc>(context).add(BoardEvent.startedDragging());
}
_stopDragging(context) {
BlocProvider.of<BoardBloc>(context).add(BoardEvent.stopDragging());
}
_dragging(context) {
BlocProvider.of<BoardBloc>(context).add(BoardEvent.dragging());
}
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () => _onTap(context),
child: LongPressDraggable(
data: index,
maxSimultaneousDrags: 1,
onDragUpdate: (details) => _dragging(context),
onDragStarted: () => _startDragging(context),
onDragEnd: (_) => _stopDragging(context),
feedback: Material(
child: Container(
height: Sizes.height / 4.5,
width: Sizes.height / 4.5,
child: _DraggableContent(
index: index,
place: place,
),
),
),
childWhenDragging: Container(color: Colors.transparent),
child: _DraggableContent(
index: index,
place: place,
),
));
}
}