Dragging a rotated container in flutter - flutter

Question

Normally, to drag a container or an image around the screen I would do this:
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'dart:math' as math;
void main() {
debugPaintSizeEnabled = true;
return runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.grey,
body: SafeArea(
child: TestComp(),
),
),
);
}
}
class TestComp extends StatefulWidget {
#override
_TestCompState createState() => _TestCompState();
}
class _TestCompState extends State<TestComp> {
double _y = 0;
double _x = 0;
#override
Widget build(BuildContext context) {
return Stack(
children: [
Positioned(
top: _y,
left: _x,
child: Transform.rotate(
angle: math.pi / 180 * 0,
child: Container(
height: 200,
width: 300,
color: Colors.black,
child: Stack(
children: <Widget>[
Positioned(
top: 0,
left: 0,
child: GestureDetector(
onPanUpdate: (details) {
var dx = details.delta.dx;
var dy = details.delta.dy;
setState(() {
_y += dy;
_x += dx;
});
},
child:
Image.network("https://via.placeholder.com/300x200"),
),
),
],
),
),
),
),
],
);
}
}
This works perfectly fine. However, when I rotate this container to say -136 degrees, it doesn't move correctly.
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'dart:math' as math;
void main() {
debugPaintSizeEnabled = true;
return runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.grey,
body: SafeArea(
child: TestComp(),
),
),
);
}
}
class TestComp extends StatefulWidget {
#override
_TestCompState createState() => _TestCompState();
}
class _TestCompState extends State<TestComp> {
double _y = 0;
double _x = 0;
#override
Widget build(BuildContext context) {
return Stack(
children: [
Positioned(
top: _y,
left: _x,
child: Transform.rotate(
angle: math.pi / 180 * -136,
child: Container(
height: 200,
width: 300,
color: Colors.black,
child: Stack(
children: <Widget>[
Positioned(
top: 0,
left: 0,
child: GestureDetector(
onPanUpdate: (details) {
var dx = details.delta.dx;
var dy = details.delta.dy;
setState(() {
_y += dy;
_x += dx;
});
},
child:
Image.network("https://via.placeholder.com/300x200"),
),
),
],
),
),
),
),
],
);
}
}
My requirement here is to have Transform.rotate on Stack>Positioned. The inner stack can have many more elements so I want the GestureDetector to be only inside image because the coordinates should only be updated when the image is moved. Please help me with this.

Answer 1

there was problem in GestureDetector it was getting x and y value rotated -136 degree
just place gesture detector above Transform Widget Than it will take correct x and
y values
your error is solved
void main() {
debugPaintSizeEnabled = true;
return runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.grey,
body: SafeArea(
child: TestComp(),
),
),
);
}
}
class TestComp extends StatefulWidget {
#override
_TestCompState createState() => _TestCompState();
}
class _TestCompState extends State<TestComp> {
double _y = 0;
double _x = 0;
#override
Widget build(BuildContext context) {
return Stack(
children: [
Positioned(
top: _y,
left: _x,
child: GestureDetector(
onPanUpdate: (details) {
var dx = details.delta.dx;
var dy = details.delta.dy;
setState(() {
_y += dy;
_x += dx;
});
},
child: Transform.rotate(
angle: math.pi / 180 * -136,
child: Container(
height: 200,
width: 300,
color: Colors.black,
child: Stack(
children: <Widget>[
Positioned(
top: 0,
left: 0,
child: Image.network("https://via.placeholder.com/300x200"),
),
],
),
),
),
),
),
],
);
}
}