refactor: make compass button dynamic - only show when map is rotated
- Convert CompassMapPluginWidget from StatelessWidget to StatefulWidget - Add periodic rotation monitoring (every 100ms) to detect map rotation changes - Button only appears when rotation != 0 (map is rotated away from north) - Button automatically disappears when map is reset to north (rotation = 0) - Improves UX by reducing visual clutter when map is already north-aligned - Add tooltip 'Go to North' for better user guidance - Gracefully handle errors and only update state when widget is mounted
This commit is contained in:
parent
f39bdbfaef
commit
d04064d17a
1 changed files with 85 additions and 20 deletions
|
|
@ -1,28 +1,90 @@
|
||||||
|
import 'dart:async';
|
||||||
|
|
||||||
import 'package:comunes_flutter/comunes_flutter.dart';
|
import 'package:comunes_flutter/comunes_flutter.dart';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:flutter_map/flutter_map.dart';
|
import 'package:flutter_map/flutter_map.dart';
|
||||||
|
|
||||||
/// Compass button widget for resetting map rotation to north
|
/// Compass button widget for resetting map rotation to north
|
||||||
class CompassMapPluginWidget extends StatelessWidget {
|
/// Only visible when map is rotated (rotation != 0)
|
||||||
|
class CompassMapPluginWidget extends StatefulWidget {
|
||||||
|
@override
|
||||||
|
_CompassMapPluginWidgetState createState() => _CompassMapPluginWidgetState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _CompassMapPluginWidgetState extends State<CompassMapPluginWidget> {
|
||||||
|
late MapController _mapController;
|
||||||
|
bool _isRotated = false;
|
||||||
|
late Timer _rotationCheckTimer;
|
||||||
|
|
||||||
|
@override
|
||||||
|
void didChangeDependencies() {
|
||||||
|
super.didChangeDependencies();
|
||||||
|
try {
|
||||||
|
_mapController = MapController.of(context);
|
||||||
|
_initRotationMonitoring();
|
||||||
|
} catch (e) {
|
||||||
|
print('Error getting map controller: $e');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
void _initRotationMonitoring() {
|
||||||
|
// Check rotation periodically (every 100ms) to detect changes
|
||||||
|
_rotationCheckTimer = Timer.periodic(Duration(milliseconds: 100), (_) {
|
||||||
|
_checkRotation();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initial state check
|
||||||
|
_checkRotation();
|
||||||
|
}
|
||||||
|
|
||||||
|
void _checkRotation() {
|
||||||
|
try {
|
||||||
|
if (!mounted) return;
|
||||||
|
|
||||||
|
final rotation = _mapController.camera.rotation;
|
||||||
|
final isRotated = rotation.abs() > 0.0;
|
||||||
|
|
||||||
|
if (isRotated != _isRotated) {
|
||||||
|
setState(() {
|
||||||
|
_isRotated = isRotated;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
// Silently ignore errors (controller may not be ready)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
void _resetRotation() {
|
||||||
|
try {
|
||||||
|
final controller = MapController.of(context);
|
||||||
|
controller.rotate(0);
|
||||||
|
} catch (e) {
|
||||||
|
print('Error resetting rotation: $e');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return LayoutBuilder(
|
return LayoutBuilder(
|
||||||
builder: (context, constraints) =>
|
builder: (context, constraints) => Stack(
|
||||||
Stack(fit: StackFit.expand, children: <Widget>[
|
fit: StackFit.expand,
|
||||||
Positioned(
|
children: <Widget>[
|
||||||
top: 10.0,
|
if (_isRotated)
|
||||||
right: 10.0,
|
Positioned(
|
||||||
child: new CenteredRow(
|
top: 10.0,
|
||||||
children: <Widget>[
|
right: 10.0,
|
||||||
new Column(
|
child: CenteredRow(
|
||||||
children: <Widget>[
|
children: <Widget>[
|
||||||
_compassButton(context),
|
Column(
|
||||||
|
children: <Widget>[
|
||||||
|
_compassButton(context),
|
||||||
|
],
|
||||||
|
)
|
||||||
],
|
],
|
||||||
)
|
),
|
||||||
],
|
)
|
||||||
),
|
],
|
||||||
)
|
));
|
||||||
]));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
FloatingActionButton _compassButton(BuildContext context) {
|
FloatingActionButton _compassButton(BuildContext context) {
|
||||||
|
|
@ -30,12 +92,15 @@ class CompassMapPluginWidget extends StatelessWidget {
|
||||||
backgroundColor: Colors.black26,
|
backgroundColor: Colors.black26,
|
||||||
mini: true,
|
mini: true,
|
||||||
heroTag: 'compass_button',
|
heroTag: 'compass_button',
|
||||||
onPressed: () {
|
tooltip: 'Go to North',
|
||||||
final controller = MapController.of(context);
|
onPressed: _resetRotation,
|
||||||
// Reset rotation to 0 (north) while keeping center and zoom
|
|
||||||
controller.rotate(0);
|
|
||||||
},
|
|
||||||
child: Icon(Icons.explore),
|
child: Icon(Icons.explore),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
void dispose() {
|
||||||
|
_rotationCheckTimer.cancel();
|
||||||
|
super.dispose();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue