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

CodePudding user response：

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

}