How to use GestureDetector to rotate images in Flutter smoothly?

Question

I have an image with a size of 359kb (name of the image: compass.jpg).

Download at: https://ufile.io/b2rmfx1o

I use code at https://dartpad.dartlang.org/c4546f1af1e9474f8e159db1b4658801

for rotating the image (compass.jpg)

But every time I rotate the image (North -> East), the image will reset the first position (North)

And when I rotate, the Image rotate is not smooth.

How to fix it?

This is my code:

body: Center(
    child: Column(
      children: <Widget>[
        Center(
          child: Container(
            width: MediaQuery.of(context).size.width,
            height: 350,
            margin: EdgeInsets.all(30.0),
            child: LayoutBuilder(
              builder: (context, constraints) {
                return GestureDetector(
                  behavior: HitTestBehavior.translucent,
                  onPanUpdate: (details) {
                    Offset centerOfGestureDetector = Offset(
                        constraints.maxWidth / 2,
                        constraints.maxHeight / 2);
                    final touchPositionFromCenter =
                        details.localPosition - centerOfGestureDetector;
                    print(touchPositionFromCenter.direction * 180 / pi);
                    setState(
                      () {
                        finalAngle = touchPositionFromCenter.direction;
                      },
                    );
                  },
                  child: Transform.rotate(
                    angle: finalAngle,
                    child: Container(
                      width: 300,
                      height: 300,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        image: DecorationImage(
                          image: AssetImage(
                              "images/compass.jpg"),
                          fit: BoxFit.scaleDown,
                        ),
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
        )
      ],
    ),
  ),

Answer 1

I fixed it. With my solution, I handled to onPanStart(), onPanEnd() with onPanUpdate().

This is my code:

import 'dart:math';

import 'package:flutter/material.dart';

 void main() {
   runApp(DemoApp());
 }

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: RotateText(),
    );
  }
}

class RotateText extends StatefulWidget {
  RotateText({Key key}) : super(key: key); // changed

  @override
  _RotateTextState createState() => _RotateTextState();
}

class _RotateTextState extends State<RotateText> {
  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(
      appBar: AppBar(
        title: Text('Single finger Rotate text'), // changed
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Container(
              color: Colors.red,
              padding: EdgeInsets.all(10),
              margin: EdgeInsets.only(top: 50),
              child: Transform.rotate(
                angle: finalAngle,
                child: Container(
                  height: 100.0,
                  width: 100.0,
                  child: Image.network(
                    'https://picsum.photos/250?image=9',
                  ),
                ),
              ),
            ),
            Row(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text("180"),
                Container(
                  width: 250,
                  height: 250,
                  color: Colors.grey,
                  margin: EdgeInsets.all(30.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: Icon(
                            Icons.arrow_forward,
                            color: Colors.white,
                            size: 200,
                          ),
                        ),
                      );
                    },
                  ),
                ),
                Text("0")
              ],
            )
          ],
        ),
      ),
    );
  }
}