GestureDetector doesn't work when i use ListView.builder with Transform - flutter

Question

I'm trying to position the containers in the center of the screen using Transform and I want GestureDetector to work on each Container, but, in this case, when I click on one of these containers it doesn't work, it's like there's something on top of it and that doesn't allow onTap to work.
When my Matrix4 looks like this GestureDetector works:
Matrix4(
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1,
)..rotateZ(_rotate[index].value),
But when I add 100 to Matrix4 it doesn't work:
Matrix4(
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 100, 0, 1,
)..rotateZ(_rotate[index].value),
Full code:
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
class TransformPage extends StatefulWidget {
#override
_TransformState createState() => _TransformState();
}
class _TransformState extends State<TransformPage>
with TickerProviderStateMixin {
//Variables
AnimationController _animationController;
List<Color> _color = [Colors.red, Colors.blue, Colors.indigo, Colors.green];
List<Animation> _rotate = List<Animation>(4),
_sizeWidth = List<Animation>(4),
_sizeHeight = List<Animation>(4);
Animation _curve;
#override
void initState() {
super.initState();
_animationController =
AnimationController(vsync: this, duration: Duration(seconds: 2));
_curve = CurvedAnimation(parent: _animationController, curve: Curves.ease);
for (int i = 0; i < 4; i++) {
_sizeWidth[i] = Tween<double>(begin: 0, end: 120).animate(_curve);
_sizeHeight[i] = Tween<double>(begin: 0, end: 120).animate(_curve);
_rotate[i] = Tween<double>(begin: 0, end: 2.35).animate(_curve);
}
_animationController.addListener(() {
setState(() {});
});
_animationController.forward();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: CupertinoNavigationBar(
middle: Text("Testing"),
backgroundColor: Colors.grey.shade200,
),
body: ListView.builder(
itemCount: 4,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
print(index);
},
behavior: HitTestBehavior.translucent,
child: Stack(
alignment: Alignment.center,
children: [
Transform(
transform:
Matrix4(
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 100, 0, 1,
)..rotateZ(_rotate[index].value),
child: Container(
width: _sizeWidth[index].value,
height: _sizeHeight[index].value,
color: _color[index],
),
alignment: Alignment.center,
),
],
),
);
},
),
);
}
}
I already tried using Positioned, but the result is the same :(

Answer 1

the Transform widget, has a special way to deal with his child, It changes its content the way you want it to be, but its reference remains on the main widget, I had the same thing when I used Transform.scale.
If you want the ListView widget to move away from the top edge, use the Padding widget,
it is worked, I copied your code to my project and Show debug paint, The result was like this :
with this code :
Matrix4(
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 100, 0, 1,
)..rotateZ(_rotate[index].value),
the result is :
As for this code:
Matrix4(
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1,
)..rotateZ(_rotate[index].value),
the result is :
the result with Padding widget is:
Note: onTap It actually works in the middle square