After Rotate Widget, GestureDetector not working on Stack

Question

The widget cannot be touched or changed the position of the widget on the purple mark when I change the rotation of the widget. and will be touched successfully when the rotation returns to 0 degrees or before change rotation.

working fine when not rotating

this is my code

import 'package:flutter/material.dart';
import 'dart:math' as math;

class View_Test_Design extends StatefulWidget {
  @override
  _View_Test_DesignState createState() => _View_Test_DesignState();
}

class _View_Test_DesignState extends State<View_Test_Design> {
  double x = 100;
  double y = 100;

  double w = 200;
  double h = 50;

  double r=0; // Not Working fine when change to another number 

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Rotate|Pos|Drag"),
      ),
      body: Stack(
        children: <Widget>[
          Positioned(
              left: x,
              top: y,
              child: GestureDetector(
                  onPanUpdate: (details) {
                    setState(() {
                      x = x + details.delta.dx;
                      y = y + details.delta.dy;
                    });
                  },
                  child: Transform.rotate(
                      angle: math.pi * r / 180,
                      child:
                          Container(width: w, height: h, color: Colors.red))))
        ],
      ),
    );
  }
} 

any solution why this is not working?

Solution

This is because the Transform widget translates a widget outside the bounds of a parent widget. So you need to make the parent widget bigger.

@override
Widget build(BuildContext context) {
 return Scaffold(
  appBar: AppBar(
    title: Text("Rotate|Pos|Drag"),
  ),
  body: Stack(
    overflow: Overflow.visible,
    children: <Widget>[
      Positioned(
          left: x,
          top: y,
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: GestureDetector(
              onPanUpdate: (details) {
                setState(() {
                  x = x + details.delta.dx;
                  y = y + details.delta.dy;
                });
              },
              child: Transform.rotate(
                  angle: math.pi * r / 180,
                  child:
                      Container(width: w, height: h, color: Colors.red))))
     ],
   ),
 );
}

Answer is from here https://github.com/flutter/flutter/issues/27587

Comments

[Viren V Varasadiya]

did you found any solution ?

[mamena tech]

@VirenVVarasadiya yes, just add the width and height of widget positioned, and make it more bigger then its child

[mamena tech]

yes it's working but the size of container change too, too bigger