Placing images partially off screen and rotate it - flutter

Question

I'm currently playing around with Flutter and came across an issue where I need your help. I already googled a lot, but missing terms or there is none...
I have a wheel that can be rotated around the center of the wheel (actually of the Container) using a GestureDetector. This is fine so far and works great.
However, I'd like to place the wheel on the left, so that half of it is off screen.
What I have ---------------+--- What I want to achieve
The wheel should still be spinnable around its center, so that the covered colors will be revealed again.
Your help is highly appreciated!
The code I use so far is basically taken from here: How to use GestureDetector to rotate images in Flutter smoothly?
import 'package:flutter/material.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Wheel',
theme: ThemeData(
primarySwatch: Colors.yellow,
),
home: const Wheel(),
);
}
}
class Wheel extends StatefulWidget {
const Wheel({Key? key}) : super(key: key);
#override
_WheelState createState() => _WheelState();
}
class _WheelState extends State<Wheel> {
double finalAngle = 0.0;
double oldAngle = 0.0;
double upsetAngle = 0.0;
#override
Widget build(BuildContext context) {
return _defaultApp(context);
}
_defaultApp(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 340,
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.asset('assets/images/wheel.png',
scale: 1.0),
),
);
},
),
),
],
)
],
),
),
);
}
}

Answer 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),
),
);
},
),
),
],
),
);
}