Rotate an object and update a value in flutter with GestureDetector

Question

I have the following lines of code, which was mainly taken from the answer for Rotate text or image using button gesture in flutter question.

Here I have rotating tyre, and I am able to rotate it but I could not update the value of number based on rotation direction.

I want to update value, let's say increment by 1 on full rotation once into right direction and decrement by 1 on full rotation once into left direction.

I have tried many ways, yet still couldn't achieve the result.

Appreciate any help

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

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 offsetAngle = 0.0;
  double number = 0;

  @override
  Widget build(BuildContext context) {
    return _defaultApp(context);
  }

  _defaultApp(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text('$number'),
            Container(
              width: 250,
              height: 250,
              margin: EdgeInsets.all(30.0),
              child: LayoutBuilder(
                builder: (context, constraints) {
                  return GestureDetector(
                    dragStartBehavior: DragStartBehavior.start,
                    behavior: HitTestBehavior.translucent,
                    onPanStart: (details) {
                      Offset centerOfGestureDetector = Offset(
                          constraints.maxWidth / 2, constraints.maxHeight / 2);
                      final touchPositionFromCenter =
                          details.localPosition - centerOfGestureDetector;
                      offsetAngle =
                          touchPositionFromCenter.direction - finalAngle;
                    },
                    onPanUpdate: (details) {
                      Offset centerOfGestureDetector = Offset(
                          constraints.maxWidth / 2, constraints.maxHeight / 2);
                      final touchPositionFromCenter =
                          details.localPosition - centerOfGestureDetector;
                      setState(() {
                        finalAngle =
                            touchPositionFromCenter.direction - offsetAngle;
                      });
                    },
                    child: Transform.rotate(
                      angle: finalAngle,
                      child: Image.asset(
                        'assets/images/marked_tyre_base.png',
                        fit: BoxFit.cover,
                      ),
                    ),
                  );
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}

Sam Chan · Accepted Answer · 2021-03-30T09:30:33.643

You need math library

import 'dart:math';

add one parameter

  double oldFinalAngle = 0;

and update onPanUpdate

  onPanUpdate: (details) {
                  Offset centerOfGestureDetector = Offset(
                      constraints.maxWidth / 2, constraints.maxHeight / 2);
                  final touchPositionFromCenter =
                      details.localPosition - centerOfGestureDetector;
                  setState(() {
                    finalAngle =
                        touchPositionFromCenter.direction - offsetAngle;
                    finalAngle = finalAngle % (2 * pi);

                    if ((oldFinalAngle > ((3 / 2) * pi)) &&
                        (finalAngle < (pi / 2))) {
                      number++;
                    } else if ((finalAngle > ((3 / 2) * pi)) &&
                        (oldFinalAngle < (pi / 2))) {
                      number--;
                    }
                    oldFinalAngle = finalAngle;
                  });
                },

Rotate an object and update a value in flutter with GestureDetector

1 Answers1