Placing images partially off screen and rotate it
Solution 1:
I have a solution. although it is not the best solution but it is workable: If you like it or use it kindly upvote :)
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Colors.white,
appBar: new AppBar(
title: new Text('Hello'),
),
body: ListView(
scrollDirection: Axis.horizontal,
reverse: true,
physics: NeverScrollableScrollPhysics(),
children: [
Container(
width: MediaQuery.of(context).size.width * 2,
height: 500,
color: Colors.grey,
margin: const EdgeInsets.all(10.0),
child: LayoutBuilder(
builder: (context, constraints) {
Offset centerOfGestureDetector =
Offset(constraints.maxWidth / 2, constraints.maxHeight / 2);
return GestureDetector(
behavior: HitTestBehavior.translucent,
onPanStart: (details) {
final touchPositionFromCenter =
details.localPosition - centerOfGestureDetector;
upsetAngle = oldAngle - touchPositionFromCenter.direction;
},
onPanEnd: (details) {
setState(
() {
oldAngle = finalAngle;
},
);
},
onPanUpdate: (details) {
final touchPositionFromCenter =
details.localPosition - centerOfGestureDetector;
setState(
() {
finalAngle =
touchPositionFromCenter.direction + upsetAngle;
},
);
},
child: Transform.rotate(
angle: finalAngle,
child: Image.network(
'https://static.toiimg.com/thumb/msid-31346158,width-748,height-499,resizemode=4,imgsize-114461/.jpg',
scale: 1.0),
),
);
},
),
),
],
),
);
}