When doing a 360 degree turn in my Flutter application, the dot disappears instead of appearing. I have a scene with placed dots, and I use a gyroscope to update the position of the dots. However, when I rotate the device 360 degrees, the dot disappears instead of remaining visible. How can I fix this problem?
import 'package:flutter/material.dart';
import 'package:sensors/sensors.dart';
import 'dart:async';
import 'dart:math';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '360',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: AnchorInSpace(),
);
}
}
class AnchorInSpace extends StatefulWidget {
@override
_AnchorInSpaceState createState() => _AnchorInSpaceState();
}
class _AnchorInSpaceState extends State<AnchorInSpace> {
double _x = 0.0, _y = 0.0;
bool _isInside = false;
Timer? _timer;
int? _scannedPoint;
Map<int, List<int>> pointsMap = {
1: [14, 2, 32, 13],
// Other points mappings...
50: [48, 51],
51: [50, 49],
};
Map<int, Offset> pointsPositions = {
// Positions of points...
};
Set<int> activePoints = {1}; // Starting point
Set<int> replacedPoints = {};
@override
void initState() {
super.initState();
gyroscopeEvents.listen((GyroscopeEvent event) {
setState(() {
_x += event.y * 5;
_y += event.x * 5;
_checkIfInsideCircle();
});
});
}
void _checkIfInsideCircle() {
final double redCircleRadius = 30;
final double whiteCircleRadius = 35;
final double whiteCircleCenterX = MediaQuery.of(context).size.width / 2;
final double whiteCircleCenterY = MediaQuery.of(context).size.height / 2;
_scannedPoint = null;
for (var point in activePoints) {
final double redCircleCenterX =
whiteCircleCenterX + pointsPositions[point]!.dx + _x;
final double redCircleCenterY =
whiteCircleCenterY + pointsPositions[point]!.dy + _y;
final double distance = sqrt((redCircleCenterX - whiteCircleCenterX) *
(redCircleCenterX - whiteCircleCenterX) +
(redCircleCenterY - whiteCircleCenterY) *
(redCircleCenterY - whiteCircleCenterY));
if (distance <= (whiteCircleRadius - redCircleRadius)) {
_scannedPoint = point;
if (!_isInside) {
_isInside = true;
_startCountdown();
}
return;
}
}
_isInside = false;
_timer?.cancel();
}
void _startCountdown() {
_timer?.cancel();
_timer = Timer(Duration(seconds: 1), () {
if (_scannedPoint != null) {
setState(() {
replacedPoints.add(_scannedPoint!);
_activateNeighbors(_scannedPoint!);
});
}
});
}
void _activateNeighbors(int point) {
if (pointsMap.containsKey(point)) {
pointsMap[point]?.forEach((neighbor) {
if (!replacedPoints.contains(neighbor) &&
!activePoints.contains(neighbor)) {
activePoints.add(neighbor);
}
});
}
}
@override
void dispose() {
_timer?.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
title: Text('360'),
foregroundColor: Colors.deepPurple,
centerTitle: true,
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.deepPurple),
onPressed: () {},
),
actions: [
IconButton(
icon: Icon(Icons.help_outline, color: Colors.deepPurple),
onPressed: () {},
),
],
),
body: LayoutBuilder(
builder: (context, constraints) {
return Stack(
children: [
Container(color: Colors.black),
// Points rendering...
// Progress indicator...
],
);
},
),
);
}
}
I tried limiting the scene to 360 degrees, however my points did not behave correctly