Moving a rotated image using GestureDetector in flutter - flutter

Question

I have a following code:
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(
debugShowCheckedModeBanner: false,
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 * 90,
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"),
),
),
],
),
),
),
),
],
);
}
}
Basically, the functionality is make the image draggable. But when I rotate it and try to move the image, the coordinates get messed up. It doesn't move in right direction. It works perfectly when the angle is 0. Any help would be appreciated.

Answer 1

Flutter coordinate structure works slightly differently. I could not find a clear url for this, but in your case the values change as follows. You can try the code sample. To change the angle, you can assign another angle in the "map" into "selectedAngle".
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(
debugShowCheckedModeBanner: false,
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;
Map<int, double> map = {
0: 0.0, // Same 360 angle
90: math.pi / 180 * 90,
180: math.pi / 180 * 180,
270: math.pi / 180 * 270,
};
int selectedAngle = 270;
#override
Widget build(BuildContext context) {
return Stack(
children: [
Positioned(
top: _y,
left: _x,
child: Transform.rotate(
angle: map[selectedAngle],
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;
var result = calculate(dx, dy);
setState(() {
_y += result['y'];
_x += result['x'];
});
},
child: Image.network("https://via.placeholder.com/300x200"),
),
),
],
),
),
),
),
],
);
}
Map<String, double> calculate(double x, double y) {
switch(selectedAngle) {
case(0):
return {'x': x, 'y': y};
break;
case(90):
return {'x': -y, 'y': x};
break;
case(180):
return {'x': -x, 'y': -y};
break;
case(270):
return {'x': y, 'y': -x};
break;
default:
return {'x': x, 'y': y};
break;
}
}
}

Answer 2

You can copy paste run full code below
You can move down Transform.rotate to wrap Image.network
see working demo below
code snippet
Transform.rotate(
angle: math.pi / 180 * 90,
child: Image.network(
"https://via.placeholder.com/300x200")),
),
working demo
full code
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(
debugShowCheckedModeBanner: false,
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: 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: Transform.rotate(
angle: math.pi / 180 * 90,
child: Image.network(
"https://via.placeholder.com/300x200")),
),
),
],
),
),
),
],
);
}
}