Dragging a rotated container in 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"),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ],
        );
      }
    }