GNSS/MobilApp
1
0
Fork 0
Code Issues 11 Pull Requests Actions Packages Projects 1 Releases 1 Wiki Activity

Track rögzítés vizuális visszajelzésének módosítása.

Browse Source
This commit is contained in:
gitea_admin
2026-06-16 02:06:13 +02:00
parent beb07fe007
commit 537897005c
8 changed files with 695 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/widgets/tracking/elapsed_badge.dart
+50
View File
@@ -0,0 +1,50 @@
import 'package:flutter/material.dart';
class ElapsedBadge extends StatelessWidget {
final String text;
final Color color;
const ElapsedBadge({
required this.text,
required this.color,
});
@override
Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
return Container(
padding: const EdgeInsets.symmetric(
horizontal: 4,
vertical: 1.5,
),
decoration: BoxDecoration(
color: colorScheme.surface,
borderRadius: BorderRadius.circular(999),
border: Border.all(
color: color.withOpacity(0.85),
width: 0,
),
// boxShadow: [
// BoxShadow(
// color: Colors.black.withOpacity(0.10),
// blurRadius: 3,
// offset: const Offset(0, 1),
// ),
// ],
),
child: Text(
text,
style: Theme.of(context).textTheme.labelSmall?.copyWith(
color: color,
fontSize: 9,
fontWeight: FontWeight.w900,
height: 1.0,
fontFeatures: const [
FontFeature.tabularFigures(),
],
),
),
);
}
}
lib/widgets/tracking/track_info_card.dart
+43 -32
View File
@@ -21,20 +21,16 @@ class TrackInfoCard extends StatelessWidget {
return GestureDetector(
onTap: () => _openSheet(context),
child: Container(
constraints: const BoxConstraints(minWidth: 140),
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 7),
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.72),
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: isRec
? Colors.red.withOpacity(0.5)
: Colors.white.withOpacity(0.12),
),
),
child: isRec ? _RecordingContent(ctrl: ctrl) : _IdleContent(),
),
child: Card(
elevation: 4,
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
color:
Theme.of(context).colorScheme.surface.withValues(alpha: 0.92),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
child: isRec ? _RecordingContent(ctrl: ctrl) : _IdleContent(),
)),
);
});
}
@@ -87,22 +83,30 @@ class _RecordingContent extends StatelessWidget {
// Statisztika sor
Row(
mainAxisSize: MainAxisSize.min,
//mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
_MiniStat(
icon: Icons.timer_outlined,
value: ctrl.elapsedFormatted.value,
),
const SizedBox(width: 10),
icon: Icons.timer_outlined,
value: ctrl.elapsedFormatted.value,
label: 'Idő'),
const _Divider(),
_MiniStat(
icon: Icons.route,
value: _fmtDist(ctrl.sessionDistance.value),
),
const SizedBox(width: 10),
icon: Icons.route,
value: _fmtDist(ctrl.sessionDistance.value),
label: 'Távolság'),
const _Divider(),
_MiniStat(
icon: Icons.location_on_outlined,
value: '${ctrl.livePoints.length}',
icon: Icons.speed,
label: 'Sebesség',
value:
'${ctrl.currentSpeedKmh.value.toStringAsFixed(1)} km/h',
),
_Divider(),
_MiniStat(
icon: Icons.location_on_outlined,
value: '${ctrl.livePoints.length}',
label: 'Pontok'),
],
),
@@ -167,6 +171,12 @@ class _RecordingContent extends StatelessWidget {
: '${(m / 1000).toStringAsFixed(2)} km';
}
class _Divider extends StatelessWidget {
const _Divider();
@override
Widget build(BuildContext context) =>
Container(height: 36, width: 1, color: Colors.grey.shade300);
}
// ─── Idle állapot ─────────────────────────────────────────────────────────────
class _IdleContent extends StatelessWidget {
@@ -300,23 +310,24 @@ class _StatusDotState extends State<_StatusDot>
class _MiniStat extends StatelessWidget {
final IconData icon;
final String? label;
final String value;
const _MiniStat({required this.icon, required this.value});
const _MiniStat({required this.icon, required this.value, this.label});
@override
Widget build(BuildContext context) {
return Row(mainAxisSize: MainAxisSize.min, children: [
Icon(icon, size: 11, color: Colors.white54),
const SizedBox(width: 3),
return Column(mainAxisSize: MainAxisSize.min, children: [
Icon(icon, size: 16, color: Theme.of(context).colorScheme.primary),
const SizedBox(height: 2),
Text(
value,
style: const TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.w600,
fontSize: 15,
fontWeight: FontWeight.bold,
fontFeatures: [FontFeature.tabularFigures()],
),
),
label != null ? Text(label!) : SizedBox.shrink()
]);
}
}
lib/widgets/tracking/track_recording_action.dart
+52
View File
@@ -0,0 +1,52 @@
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:terepi_seged/pages/tracking/presentation/controllers/tracking_controller.dart';
import 'track_recording_action_visual.dart';
class TrackRecordingAction extends StatelessWidget {
final TrackingController controller;
final VoidCallback? onTap;
final VoidCallback? onLongPress;
const TrackRecordingAction({
super.key,
required this.controller,
this.onTap,
this.onLongPress,
});
@override
Widget build(BuildContext context) {
return Obx(() {
return TrackRecordingActionVisual(
isRecording: controller.isRecording.value,
isPaused: controller.isPaused.value,
elapsedText: _shortElapsedText(controller.elapsedFormatted.value),
onTap: onTap,
onLongPress: onLongPress,
);
});
}
String _shortElapsedText(String value) {
// A controller most HH:MM:SS formátumot ad, pl. 00:38:37.
final parts = value.split(':');
if (parts.length != 3) {
return value;
}
final h = int.tryParse(parts[0]) ?? 0;
final m = parts[1];
final s = parts[2];
if (h <= 0) {
return '$m:$s'; // 38:37
}
return '$h:$m'; // 1:04
}
}
lib/widgets/tracking/track_recording_action_visual.dart
+178
View File
@@ -0,0 +1,178 @@
import 'package:flutter/material.dart';
import 'elapsed_badge.dart';
class TrackRecordingActionVisual extends StatefulWidget {
final bool isRecording;
final bool isPaused;
final String elapsedText;
final VoidCallback? onTap;
final VoidCallback? onLongPress;
const TrackRecordingActionVisual({
required this.isRecording,
required this.isPaused,
required this.elapsedText,
this.onTap,
this.onLongPress,
});
@override
State<TrackRecordingActionVisual> createState() =>
TrackRecordingActionVisualState();
}
class TrackRecordingActionVisualState extends State<TrackRecordingActionVisual>
with SingleTickerProviderStateMixin {
late final AnimationController _animationController;
late final Animation<double> _scale;
late final Animation<double> _opacity;
bool get _shouldPulse {
return widget.isRecording && !widget.isPaused;
}
@override
void initState() {
super.initState();
_animationController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 3000),
);
_scale = Tween<double>(
begin: 0.80,
end: 1.20,
).animate(
CurvedAnimation(
parent: _animationController,
curve: Curves.easeInOut,
),
);
_opacity = Tween<double>(
begin: 0.72,
end: 1.0,
).animate(
CurvedAnimation(
parent: _animationController,
curve: Curves.easeInOut,
),
);
_updateAnimation();
}
@override
void didUpdateWidget(covariant TrackRecordingActionVisual oldWidget) {
super.didUpdateWidget(oldWidget);
_updateAnimation();
}
void _updateAnimation() {
if (_shouldPulse && !_animationController.isAnimating) {
_animationController.repeat(reverse: true);
return;
}
if (!_shouldPulse && _animationController.isAnimating) {
_animationController.stop();
_animationController.reset();
}
}
@override
void dispose() {
_animationController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
final Color iconColor;
final Color badgeColor;
if (!widget.isRecording) {
iconColor = colorScheme.onSurfaceVariant;
badgeColor = colorScheme.onSurfaceVariant;
} else if (widget.isPaused) {
iconColor = Colors.orange.shade800;
badgeColor = Colors.orange.shade800;
} else {
iconColor = Colors.red.shade700;
badgeColor = Colors.red.shade700;
}
return Tooltip(
message: _tooltipText,
child: InkResponse(
radius: 22,
onTap: widget.onTap,
onLongPress: widget.onLongPress,
child: SizedBox(
width: widget.isRecording ? 58 : 40,
height: 44,
child: Center(
child: Stack(
clipBehavior: Clip.none,
alignment: Alignment.center,
children: [
_buildIcon(iconColor),
if (widget.isRecording)
Positioned(
right: -20,
top: -4,
child: ElapsedBadge(
text: widget.elapsedText,
color: badgeColor,
),
),
],
),
),
),
),
);
}
Widget _buildIcon(Color iconColor) {
final icon = Icon(
Icons.route_outlined,
size: 25,
color: iconColor,
);
if (!_shouldPulse) {
return icon;
}
return AnimatedBuilder(
animation: _animationController,
builder: (context, child) {
return Opacity(
opacity: _opacity.value,
child: Transform.scale(
scale: _scale.value,
child: child,
),
);
},
child: icon,
);
}
String get _tooltipText {
if (!widget.isRecording) {
return 'Útvonal rögzítés';
}
if (widget.isPaused) {
return 'Útvonal rögzítés szünetel\n${widget.elapsedText}';
}
return 'Útvonal rögzítés folyamatban\n${widget.elapsedText}';
}
}