Виджет Draggable

Виджет Draggable показывает child и при перетаскивании рисует feedback под пальцем. Полезную нагрузку передают в data, её примет DragTarget. Пока идёт drag, на месте может стоять childWhenDragging. Старт и конец ловят onDragStarted и onDragEnd.

Синтаксис

Draggable<String>(
	data: 'abcde',
	feedback: feedbackWidget,
	child: child,
)

Параметры

Параметр	Описание
`child`	Виджет в покое, до начала перетаскивания.
`feedback`	Виджет под указателем во время drag.
`data`	Данные, которые получит `DragTarget` при успешном бросе.
`childWhenDragging`	Замена child, пока feedback уехал с места.
`onDragStarted`	Вызывается в момент начала перетаскивания.
`onDragEnd`	Вызывается, когда палец отпустили, передаёт итог drag.

Пример

Давайте перетащим метку в зону приёма:

import 'package:flutter/material.dart';

class DragDemo extends StatefulWidget
{
	const DragDemo({super.key});

	@override
	State<DragDemo> createState() => _DragDemoState();
}

class _DragDemoState extends State<DragDemo>
{
	var accepted = 'abcde';

	@override
	Widget build(BuildContext context)
	{
		return Row(
			mainAxisAlignment: MainAxisAlignment.spaceEvenly,
			children: [
				Draggable<String>(
					data: '12345',
					feedback: const Material(
						child: Padding(
							padding: EdgeInsets.all(8),
							child: Text('12345'),
						),
					),
					child: const Text('abcde'),
				),
				DragTarget<String>(
					onAcceptWithDetails: (details) {
						setState(() {
							accepted = details.data;
						});
					},
					builder: (context, candidate, rejected) {
						return Container(
							width: 120,
							height: 80,
							color: candidate.isNotEmpty
								? Colors.green.shade100
								: Colors.grey.shade200,
							alignment: Alignment.center,
							child: Text(accepted),
						);
					},
				),
			],
		);
	}
}

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: DragDemo(),
				),
			),
		),
	);
}

На экране слева текст 'abcde', справа серая зона; после перетаскивания в зону там появится '12345'.

Пример

Давайте оставим полупрозрачную заглушку на месте drag:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: Draggable<String>(
						data: 'abcde',
						childWhenDragging: Opacity(
							opacity: 0.3,
							child: Container(
								padding: const EdgeInsets.all(16),
								color: Colors.orange,
								child: const Text('12345'),
							),
						),
						feedback: Material(
							child: Container(
								padding: const EdgeInsets.all(16),
								color: Colors.orange,
								child: const Text('abcde'),
							),
						),
						child: Container(
							padding: const EdgeInsets.all(16),
							color: Colors.orange,
							child: const Text('abcde'),
						),
					),
				),
			),
		),
	);
}

На экране оранжевая плашка; при перетаскивании на месте остаётся бледная копия, под пальцем едет яркая.

Смотрите также

виджет DragTarget,
куда бросают данные из Draggable
виджет LongPressDraggable,
который начинает drag после долгого нажатия
виджет GestureDetector,
который двигает виджет без drag and drop
виджет Dismissible,
который убирает пункт смахиванием