Rotate an object and update a value in flutter with GestureDetector
376
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;
});
},
Comments
-
Farkhod over 1 year
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, ), ), ); }, ), ) ], ), ), ); } }