Части головоломки защелкиваются в любом месте при падении ⇐ Android

[Anonymous]

Итак, у меня возникла проблема с созданием головоломки (которая, как я думал, будет довольно простой).
Учитывая сетку 4x3 и части, уже разделенные на 12 разных изображений, я не могу свободно перемещать части (я отказался от идеи проверки по месту).
Каждый раз, когда я отпускаю перетаскиваемое изображение, оно перемещается в случайное место, а не в то место, где я его оставляю.
Вот полная версия код:
import 'package:flutter/material.dart';
import 'dart:math';

void main() {
runApp(PuzzleGridApp());
}

class PuzzleGridApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('ROMPECABEZAS! '),
),
body: PuzzleGrid(),
),
);
}
}

class PuzzleGrid extends StatefulWidget {
@override
_PuzzleGridState createState() => _PuzzleGridState();
}

class _PuzzleGridState extends State
{
List positions = List.generate(12, (index) => const Offset(0, 0));

final List puzzlePieces = [
Image.asset('images/puzzle1_0.png', width: 100, height: 100),
Image.asset('images/puzzle1_1.png', width: 100, height: 100),
Image.asset('images/puzzle1_2.png', width: 100, height: 100),
Image.asset('images/puzzle1_3.png', width: 100, height: 100),
Image.asset('images/puzzle1_4.png', width: 100, height: 100),
Image.asset('images/puzzle1_5.png', width: 100, height: 100),
Image.asset('images/puzzle1_6.png', width: 100, height: 100),
Image.asset('images/puzzle1_7.png', width: 100, height: 100),
Image.asset('images/puzzle1_8.png', width: 100, height: 100),
Image.asset('images/puzzle1_9.png', width: 100, height: 100),
Image.asset('images/puzzle1_10.png', width: 100, height: 100),
Image.asset('images/puzzle1_11.png', width: 100, height: 100),
];

@override
void initState() {
super.initState();
setInitialPositions();
}

void setInitialPositions() {
Random random = Random();
for (int i = 0; i < positions.length; i++) {
double x = random.nextDouble() * 350; // Random x position
double y = random.nextDouble() * 250; // Random y position
positions = Offset(x + 425, y);
}
}

Offset position = const Offset(100, 100);
double prevScale = 1;
double scale = 1;

void updateScale(double zoom) => setState(() => scale = prevScale * zoom);
void commitScale() => setState(() => prevScale = scale);
void updatePosition(Offset newPosition) => setState(() => position = newPosition);

@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: MediaQuery.of(context).size.width * 0.95,
height: MediaQuery.of(context).size.height * 0.85,
color: Colors.black54,
child: GestureDetector(
onScaleUpdate: (details) => updateScale(details.scale),
onScaleEnd: (_) => commitScale(),
child: Stack(
children: [
// Draw the grid as a background
CustomPaint(
size: const Size(400, 300),
painter: GridPainter(),
),
// Create draggable pieces
...List.generate(12, (index) {
return Positioned(
left: positions[index].dx,
top: positions[index].dy,
child: Draggable(
maxSimultaneousDrags: 1,
data: index,
feedback: puzzlePieces[index],
childWhenDragging: Container(
color: Colors.amber,
),
onDragEnd: (details) => updatePosition(details.offset),
child: Transform.scale(
scale: scale,
child: puzzlePieces[index],
),
),
);
}),
],
),
),
),
);
}
}

// CustomPainter class to draw the grid
class GridPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = Colors.black
..style = PaintingStyle.stroke
..strokeWidth = 2;

double cellWidth = size.width / 4;
double cellHeight = size.height / 3;

// Draw vertical lines
for (int i = 0; i
Я уже пробовал без какой -либо проверки, чтобы хотя бы сделать это вручную. Не повезло. Я добавлю кнопку сброса позже.


Подробнее здесь: https://stackoverflow.com/questions/788 ... en-dropped