motorsignal
/
MotorSignal-App
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: unify routes and maps experience

This commit is contained in:
Developer 2026-09-05 03:44:51 -04:00
parent d9502487d1
commit ce6641102d
5 changed files with 1958 additions and 1128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

359
lib/features/map/map_screen.dart
View File

@ -4,6 +4,8 @@ import 'package:drift/drift.dart' as drift;
import 'package:geolocator/geolocator.dart'; import 'package:geolocator/geolocator.dart';
import 'package:intl/intl.dart'; import 'package:intl/intl.dart';
import '../../database/database.dart'; import '../../database/database.dart';
import '../../core/responsive/responsive_layout.dart';
import '../../core/theme/theme_extensions.dart';
import '../../services/location_service.dart'; import '../../services/location_service.dart';
import '../../services/map/map_provider_interface.dart'; import '../../services/map/map_provider_interface.dart';
import '../../services/map/map_providers.dart'; import '../../services/map/map_providers.dart';
@ -505,121 +507,326 @@ class _MapScreenState extends ConsumerState<MapScreen> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
if (_isLoadingHistory) return const Scaffold(body: Center(child: CircularProgressIndicator())); if (_isLoadingHistory) {
return const Scaffold(body: Center(child: CircularProgressIndicator()));
}
final activeProviderType = ref.watch(mapProviderTypeNotifierProvider); final activeProviderType = ref.watch(mapProviderTypeNotifierProvider);
final isFollowMode = ref.watch(mapFollowStateProvider); final isFollowMode = ref.watch(mapFollowStateProvider);
final isLandscape = MediaQuery.of(context).orientation == Orientation.landscape; final colors = context.motorColors;
final theme = Theme.of(context);
return ResponsiveLayout(
builder: (context, responsive) {
final isShortLandscape = responsive.isLandscape && responsive.height < 450;
if (widget.rideId != null) { if (widget.rideId != null) {
final polylines = _buildPolylines(); final polylines = _buildPolylines();
return Scaffold( return Scaffold(
appBar: AppBar( appBar: AppBar(
title: Text('Ride #${widget.rideId} Multi-Layer Map'), title: Text('Ride #${widget.rideId} Multi-Layer Map'),
actions: [IconButton( actions: [
IconButton(
tooltip: 'Switch Map Provider', tooltip: 'Switch Map Provider',
icon: Icon(activeProviderType == AppMapType.openStreetMap ? Icons.map : Icons.map_outlined), icon: Icon(
activeProviderType == AppMapType.openStreetMap
? Icons.map
: Icons.map_outlined,
),
onPressed: () { onPressed: () {
final nextType = activeProviderType == AppMapType.openStreetMap ? AppMapType.googleMaps : AppMapType.openStreetMap; final nextType =
ref.read(mapProviderTypeNotifierProvider.notifier).setMapProviderType(nextType); activeProviderType == AppMapType.openStreetMap
? AppMapType.googleMaps
: AppMapType.openStreetMap;
ref
.read(mapProviderTypeNotifierProvider.notifier)
.setMapProviderType(nextType);
}, },
)],
), ),
body: LayoutBuilder(builder: (context, constraints) => Stack(fit: StackFit.expand, children: [ ],
Positioned.fill(child: SizedBox( ),
width: constraints.maxWidth, height: constraints.maxHeight, body: Stack(
fit: StackFit.expand,
children: [
Positioned.fill(
child: UnifiedMapView( child: UnifiedMapView(
key: ValueKey('preview_map_${constraints.maxWidth.toInt()}x${constraints.maxHeight.toInt()}'), key: ValueKey('preview_map_${widget.rideId}'),
center: _initialCenter ?? _fallbackLocation, zoom: 15.0, center: _initialCenter ?? _fallbackLocation,
polylines: polylines, markers: _getFilteredMarkers(), zoom: 15.0,
polylines: polylines,
markers: _getFilteredMarkers(),
),
),
if (_routePoints.isNotEmpty) _buildMultiLayerFilterOverlay(colors),
if (_showSpeedHeatmap) _buildSpeedLegend(colors),
if (_routePoints.isEmpty)
Positioned(
top: 16,
left: 20,
right: 20,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 12,
),
decoration: BoxDecoration(
color: colors.surfaceContainer.withValues(alpha: 0.95),
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: colors.cyberCyan.withValues(alpha: 0.4),
),
),
child: Row(
children: [
Icon(
Icons.info_outline,
color: colors.cyberCyan,
size: 20,
),
const SizedBox(width: 10),
Expanded(
child: Text(
'No GPS breadcrumbs were recorded during this test session.',
style: TextStyle(
color: theme.colorScheme.onSurface.withValues(alpha: 0.7),
fontSize: 12,
fontFamily: 'Inter',
),
),
),
],
),
),
),
],
), ),
)),
if (_routePoints.isNotEmpty) _buildMultiLayerFilterOverlay(),
if (_showSpeedHeatmap) _buildSpeedLegend(),
if (_routePoints.isEmpty) Positioned(top: 16, left: 20, right: 20, child: Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
decoration: BoxDecoration(color: const Color(0xFF0D0D0D).withValues(alpha: 0.9), borderRadius: BorderRadius.circular(12), border: Border.all(color: const Color(0xFF00E5FF).withValues(alpha: 0.4))),
child: const Row(children: [Icon(Icons.info_outline, color: Color(0xFF00E5FF), size: 20), SizedBox(width: 10), Expanded(child: Text('No GPS breadcrumbs were recorded during this test session.', style: TextStyle(color: Colors.white70, fontSize: 12, fontFamily: 'Inter')))]),
)),
])),
); );
} }
final locationAsync = ref.watch(locationStreamProvider); final locationAsync = ref.watch(locationStreamProvider);
final liveAlertsAsync = ref.watch(activeAlertsStreamProvider); final liveAlertsAsync = ref.watch(activeAlertsStreamProvider);
final currentPos = locationAsync.when(data: (pos) => AppLatLng(pos.latitude, pos.longitude), error: (_, _) => _fallbackLocation, loading: () => _fallbackLocation); final currentPos = locationAsync.when(
final currentHeading = locationAsync.when(data: (pos) => pos.heading, error: (_, _) => 0.0, loading: () => 0.0); data: (pos) => AppLatLng(pos.latitude, pos.longitude),
final motorcycleMarker = AppMapMarker(id: 'motorcycle_live', position: currentPos, heading: currentHeading, iconWidget: const Icon(Icons.navigation, color: Colors.cyanAccent, size: 40)); error: (_, _) => _fallbackLocation,
loading: () => _fallbackLocation,
);
final currentHeading = locationAsync.when(
data: (pos) => pos.heading,
error: (_, _) => 0.0,
loading: () => 0.0,
);
final motorcycleMarker = AppMapMarker(
id: 'motorcycle_live',
position: currentPos,
heading: currentHeading,
iconWidget: Icon(
Icons.navigation,
color: colors.cyberCyan,
size: 40,
),
);
final List<AppMapMarker> mapMarkers = [motorcycleMarker]; final List<AppMapMarker> mapMarkers = [motorcycleMarker];
final liveAlerts = liveAlertsAsync.value ?? []; final liveAlerts = liveAlertsAsync.value ?? [];
for (var alert in liveAlerts) { for (var alert in liveAlerts) {
mapMarkers.add(AppMapMarker( mapMarkers.add(
id: 'alert_${alert.providerId}_${alert.id}', position: AppLatLng(alert.latitude, alert.longitude), heading: alert.heading ?? 0.0, label: alert.category.displayName, AppMapMarker(
iconWidget: Container(padding: const EdgeInsets.all(6), decoration: BoxDecoration(color: alert.category.color.withValues(alpha: 0.9), shape: BoxShape.circle, boxShadow: const [BoxShadow(color: Colors.black54, blurRadius: 4)]), child: Icon(alert.category.icon, color: Colors.black, size: 22)), id: 'alert_${alert.providerId}_${alert.id}',
onTap: () => _showRoadAlertDetails(alert), position: AppLatLng(alert.latitude, alert.longitude),
)); heading: alert.heading ?? 0.0,
} label: alert.category.displayName,
return Scaffold( iconWidget: Container(
extendBodyBehindAppBar: isLandscape, padding: const EdgeInsets.all(6),
appBar: AppBar( decoration: BoxDecoration(
title: const Text('Live Map'), backgroundColor: isLandscape ? Colors.black.withValues(alpha: 0.6) : null, elevation: isLandscape ? 0 : null, color: alert.category.color.withValues(alpha: 0.9),
actions: [PopupMenuButton<AppMapType>( shape: BoxShape.circle,
icon: const Icon(Icons.layers), boxShadow: const [
onSelected: (type) => ref.read(mapProviderTypeNotifierProvider.notifier).setMapProviderType(type), BoxShadow(color: Colors.black54, blurRadius: 4),
itemBuilder: (context) => const [
PopupMenuItem(value: AppMapType.openStreetMap, child: Text('OpenStreetMap / Tactical (Primary)')),
PopupMenuItem(value: AppMapType.googleMaps, child: Text('Google Maps')),
], ],
)],
), ),
body: LayoutBuilder(builder: (context, constraints) => Stack(fit: StackFit.expand, children: [ child: Icon(
Positioned.fill(child: SizedBox(width: constraints.maxWidth, height: constraints.maxHeight, child: UnifiedMapView( alert.category.icon,
key: ValueKey('live_map_${constraints.maxWidth.toInt()}x${constraints.maxHeight.toInt()}'), center: currentPos, zoom: 17.0, markers: mapMarkers, color: Colors.black,
))), size: 22,
if (!isFollowMode) Positioned(bottom: 24, right: 24, child: FloatingActionButton.extended( ),
backgroundColor: Colors.cyanAccent, foregroundColor: Colors.black, icon: const Icon(Icons.my_location), label: const Text('RECENTER', style: TextStyle(fontWeight: FontWeight.bold)), ),
onPressed: () => ref.read(mapFollowStateProvider.notifier).recenter(), onTap: () => _showRoadAlertDetails(alert),
)), ),
])),
); );
} }
Widget _buildMultiLayerFilterOverlay() { return Scaffold(
return Positioned(top: 10, left: 10, right: 10, child: Card( extendBodyBehindAppBar: isShortLandscape,
color: Colors.black.withValues(alpha: 0.8), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12), side: const BorderSide(color: Color(0xFF1F1F1F))), appBar: AppBar(
child: Padding(padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4), child: SingleChildScrollView(scrollDirection: Axis.horizontal, child: Row(children: [ title: const Text('Live Map'),
FilterChip(label: const Text('Route'), selected: _showRoute, onSelected: (v) => setState(() => _showRoute = v), selectedColor: const Color(0xFF00E5FF).withValues(alpha: 0.35)), backgroundColor: isShortLandscape
const SizedBox(width: 6), ? colors.surfaceContainer.withValues(alpha: 0.75)
FilterChip(label: const Text('Speed'), selected: _showSpeedHeatmap, onSelected: (v) => setState(() => _showSpeedHeatmap = v), selectedColor: const Color(0xFFE040FB).withValues(alpha: 0.35)), : null,
const SizedBox(width: 6), elevation: isShortLandscape ? 0 : null,
FilterChip(label: const Text('Accel'), selected: _showHardAccel, onSelected: (v) => setState(() => _showHardAccel = v), selectedColor: const Color(0xFF76FF03).withValues(alpha: 0.35)), actions: [
const SizedBox(width: 6), PopupMenuButton<AppMapType>(
FilterChip(label: const Text('Braking'), selected: _showHardBraking, onSelected: (v) => setState(() => _showHardBraking = v), selectedColor: const Color(0xFFFF5252).withValues(alpha: 0.35)), icon: const Icon(Icons.layers),
const SizedBox(width: 6), onSelected: (type) => ref
FilterChip(label: const Text('Cornering'), selected: _showCornering, onSelected: (v) => setState(() => _showCornering = v), selectedColor: const Color(0xFF00E5FF).withValues(alpha: 0.35)), .read(mapProviderTypeNotifierProvider.notifier)
]))), .setMapProviderType(type),
)); itemBuilder: (context) => const [
PopupMenuItem(
value: AppMapType.openStreetMap,
child: Text('OpenStreetMap / Tactical (Primary)'),
),
PopupMenuItem(
value: AppMapType.googleMaps,
child: Text('Google Maps'),
),
],
),
],
),
body: Stack(
fit: StackFit.expand,
children: [
Positioned.fill(
child: UnifiedMapView(
key: const ValueKey('live_map_view'),
center: currentPos,
zoom: 17.0,
markers: mapMarkers,
),
),
if (!isFollowMode)
Positioned(
bottom: 24,
right: 24,
child: FloatingActionButton.extended(
backgroundColor: colors.cyberCyan,
foregroundColor: Colors.black,
icon: const Icon(Icons.my_location),
label: const Text(
'RECENTER',
style: TextStyle(fontWeight: FontWeight.bold),
),
onPressed: () =>
ref.read(mapFollowStateProvider.notifier).recenter(),
),
),
],
),
);
},
);
} }
Widget _buildSpeedLegend() => Positioned(bottom: 20, left: 14, child: Container( Widget _buildMultiLayerFilterOverlay(MotorSignalThemeColors colors) {
return Positioned(
top: 10,
left: 10,
right: 10,
child: Card(
color: colors.surfaceContainer.withValues(alpha: 0.85),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
side: BorderSide(color: colors.outlineVariant),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
FilterChip(
label: const Text('Route'),
selected: _showRoute,
onSelected: (v) => setState(() => _showRoute = v),
selectedColor: colors.cyberCyan.withValues(alpha: 0.35),
),
const SizedBox(width: 6),
FilterChip(
label: const Text('Speed'),
selected: _showSpeedHeatmap,
onSelected: (v) => setState(() => _showSpeedHeatmap = v),
selectedColor: const Color(0xFFE040FB).withValues(alpha: 0.35),
),
const SizedBox(width: 6),
FilterChip(
label: const Text('Accel'),
selected: _showHardAccel,
onSelected: (v) => setState(() => _showHardAccel = v),
selectedColor: colors.launchGreen.withValues(alpha: 0.35),
),
const SizedBox(width: 6),
FilterChip(
label: const Text('Braking'),
selected: _showHardBraking,
onSelected: (v) => setState(() => _showHardBraking = v),
selectedColor: colors.raceRed.withValues(alpha: 0.35),
),
const SizedBox(width: 6),
FilterChip(
label: const Text('Cornering'),
selected: _showCornering,
onSelected: (v) => setState(() => _showCornering = v),
selectedColor: colors.cyberCyan.withValues(alpha: 0.35),
),
],
),
),
),
),
);
}
Widget _buildSpeedLegend(MotorSignalThemeColors colors) => Positioned(
bottom: 20,
left: 14,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6), padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
decoration: BoxDecoration(color: Colors.black.withValues(alpha: 0.85), borderRadius: BorderRadius.circular(8), border: Border.all(color: const Color(0xFF222222))), decoration: BoxDecoration(
child: Column(crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [ color: colors.surfaceContainer.withValues(alpha: 0.9),
const Text('SPEED RANGES (MPH)', style: TextStyle(fontFamily: 'JetBrains Mono', fontSize: 8.5, fontWeight: FontWeight.bold, color: Colors.white70)), borderRadius: BorderRadius.circular(8),
border: Border.all(color: colors.outlineVariant),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
'SPEED RANGES (MPH)',
style: TextStyle(
fontFamily: 'JetBrains Mono',
fontSize: 8.5,
fontWeight: FontWeight.bold,
color: colors.cyberCyan,
),
),
const SizedBox(height: 4), const SizedBox(height: 4),
_buildLegendItem('0–25', const Color(0xFF00E5FF)), _buildLegendItem('0–25', const Color(0xFF00E5FF)),
_buildLegendItem('25–50', const Color(0xFF2979FF)), _buildLegendItem('25–50', const Color(0xFF2979FF)),
_buildLegendItem('50–75', const Color(0xFFFFD600)), _buildLegendItem('50–75', const Color(0xFFFFD600)),
_buildLegendItem('75–100', const Color(0xFFFF6D00)), _buildLegendItem('75–100', const Color(0xFFFF6D00)),
_buildLegendItem('100+', const Color(0xFFE040FB)), _buildLegendItem('100+', const Color(0xFFE040FB)),
]), ],
)); ),
),
);
Widget _buildLegendItem(String label, Color color) => Padding( Widget _buildLegendItem(String label, Color color) => Padding(
padding: const EdgeInsets.symmetric(vertical: 1.5), padding: const EdgeInsets.symmetric(vertical: 1.5),
child: Row(mainAxisSize: MainAxisSize.min, children: [ child: Row(
Container(width: 10, height: 10, decoration: BoxDecoration(color: color, shape: BoxShape.circle)), mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 10,
height: 10,
decoration: BoxDecoration(color: color, shape: BoxShape.circle),
),
const SizedBox(width: 6), const SizedBox(width: 6),
Text(label, style: const TextStyle(fontFamily: 'JetBrains Mono', fontSize: 9, color: Colors.white)), Text(
]), label,
style: const TextStyle(
fontFamily: 'JetBrains Mono',
fontSize: 9,
fontWeight: FontWeight.w600,
),
),
],
),
); );
} }

385
lib/features/routes/route_detail_screen.dart
View File

@ -1,6 +1,9 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart'; import 'package:go_router/go_router.dart';
import '../../core/responsive/responsive_layout.dart';
import '../../core/responsive/viewport_size.dart';
import '../../core/theme/theme_extensions.dart';
import '../../services/auth/auth_providers.dart'; import '../../services/auth/auth_providers.dart';
import '../../services/map/map_provider_interface.dart'; import '../../services/map/map_provider_interface.dart';
import '../../services/map/unified_map_view.dart'; import '../../services/map/unified_map_view.dart';
@ -21,13 +24,14 @@ class _RouteDetailScreenState extends ConsumerState<RouteDetailScreen> {
bool _isDeleting = false; bool _isDeleting = false;
Future<void> _confirmDelete(MotorSignalRoute route) async { Future<void> _confirmDelete(MotorSignalRoute route) async {
final colors = context.motorColors;
final confirm = await showDialog<bool>( final confirm = await showDialog<bool>(
context: context, context: context,
builder: (ctx) => AlertDialog( builder: (ctx) => AlertDialog(
backgroundColor: const Color(0xFF13151A), backgroundColor: colors.surfaceContainer,
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(16),
side: const BorderSide(color: Color(0xFF2A2E3D)), side: BorderSide(color: colors.outlineVariant),
), ),
title: const Text( title: const Text(
'Delete Route', 'Delete Route',
@ -47,7 +51,7 @@ class _RouteDetailScreenState extends ConsumerState<RouteDetailScreen> {
), ),
ElevatedButton( ElevatedButton(
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFFFF5252), backgroundColor: colors.raceRed,
foregroundColor: Colors.white, foregroundColor: Colors.white,
), ),
onPressed: () => Navigator.pop(ctx, true), onPressed: () => Navigator.pop(ctx, true),
@ -114,13 +118,14 @@ class _RouteDetailScreenState extends ConsumerState<RouteDetailScreen> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final colors = context.motorColors;
final routeAsync = ref.watch(routeByIdProvider(widget.routeId)); final routeAsync = ref.watch(routeByIdProvider(widget.routeId));
final currentUser = ref.watch(currentUserProvider); final currentUser = ref.watch(currentUserProvider);
return Scaffold( return Scaffold(
backgroundColor: const Color(0xFF0D0E11), backgroundColor: colors.surfaceContainer,
appBar: AppBar( appBar: AppBar(
backgroundColor: const Color(0xFF13151A), backgroundColor: colors.surfaceContainerHigh,
elevation: 0, elevation: 0,
leading: IconButton( leading: IconButton(
icon: const Icon(Icons.arrow_back, color: Colors.white), icon: const Icon(Icons.arrow_back, color: Colors.white),
@ -136,8 +141,8 @@ class _RouteDetailScreenState extends ConsumerState<RouteDetailScreen> {
), ),
), ),
body: routeAsync.when( body: routeAsync.when(
loading: () => const Center( loading: () => Center(
child: CircularProgressIndicator(color: Color(0xFF00E5FF)), child: CircularProgressIndicator(color: colors.cyberCyan),
), ),
error: (err, _) => Center( error: (err, _) => Center(
child: Padding( child: Padding(
@ -145,10 +150,10 @@ class _RouteDetailScreenState extends ConsumerState<RouteDetailScreen> {
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
const Icon( Icon(
Icons.error_outline, Icons.error_outline,
size: 48, size: 48,
color: Color(0xFFFF5252), color: colors.raceRed,
), ),
const SizedBox(height: 12), const SizedBox(height: 12),
Text( Text(
@ -187,10 +192,10 @@ class _RouteDetailScreenState extends ConsumerState<RouteDetailScreen> {
padding: const EdgeInsets.all(4), padding: const EdgeInsets.all(4),
decoration: BoxDecoration( decoration: BoxDecoration(
color: isFirst color: isFirst
? const Color(0xFF00E676) ? colors.launchGreen
: isLast : isLast
? const Color(0xFFFF5252) ? colors.raceRed
: const Color(0xFF00E5FF), : colors.cyberCyan,
shape: BoxShape.circle, shape: BoxShape.circle,
boxShadow: const [ boxShadow: const [
BoxShadow( BoxShadow(
@ -228,7 +233,7 @@ class _RouteDetailScreenState extends ConsumerState<RouteDetailScreen> {
points: route.previewPoints points: route.previewPoints
.map((p) => AppLatLng(p.latitude, p.longitude)) .map((p) => AppLatLng(p.latitude, p.longitude))
.toList(), .toList(),
color: const Color(0xFF00E5FF), color: colors.cyberCyan,
width: 3.5, width: 3.5,
), ),
] ]
@ -241,17 +246,77 @@ class _RouteDetailScreenState extends ConsumerState<RouteDetailScreen> {
) )
: const AppLatLng(37.7749, -122.4194); : const AppLatLng(37.7749, -122.4194);
return SingleChildScrollView( return ResponsiveLayout(
builder: (context, snapshot) {
final isExpandedLayout =
snapshot.sizeClass == WindowSizeClass.expanded ||
(snapshot.isLandscape && snapshot.width >= 720);
if (isExpandedLayout) {
return _buildExpandedLayout(
context,
colors,
route,
isOwner,
mapCenter,
markers,
polylines,
);
}
return _buildCompactLayout(
context,
colors,
snapshot,
route,
isOwner,
mapCenter,
markers,
polylines,
);
},
);
},
),
);
}
Widget _buildExpandedLayout(
BuildContext context,
MotorSignalThemeColors colors,
MotorSignalRoute route,
bool isOwner,
AppLatLng mapCenter,
List<AppMapMarker> markers,
List<AppPolyline> polylines,
) {
return Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// Left Column: Map Preview + Metrics
Expanded(
flex: 5,
child: Container(
decoration: BoxDecoration(
border: Border(
right: BorderSide(color: colors.outlineVariant),
),
),
child: SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
// Map Preview // Map Preview Box
SizedBox( ClipRRect(
height: 240, borderRadius: BorderRadius.circular(12),
child: SizedBox(
height: 280,
width: double.infinity, width: double.infinity,
child: Stack( child: Stack(
children: [ children: [
UnifiedMapView( UnifiedMapView(
key: ValueKey('route_detail_map_exp_${route.id}'),
center: mapCenter, center: mapCenter,
zoom: 12.0, zoom: 12.0,
markers: markers, markers: markers,
@ -260,27 +325,87 @@ class _RouteDetailScreenState extends ConsumerState<RouteDetailScreen> {
Positioned( Positioned(
top: 8, top: 8,
left: 8, left: 8,
child: Container( child: _buildVisibilityBadge(colors, route),
padding: const EdgeInsets.symmetric(
horizontal: 10,
vertical: 4,
), ),
decoration: BoxDecoration( ],
color: const Color(
0xFF13151A,
).withValues(alpha: 0.9),
borderRadius: BorderRadius.circular(6),
border: Border.all(color: const Color(0xFF2A2E3D)),
),
child: Text(
route.visibility.label,
style: const TextStyle(
color: Color(0xFF00E5FF),
fontSize: 11,
fontWeight: FontWeight.bold,
), ),
), ),
), ),
const SizedBox(height: 16),
_buildDistanceAndStopsCard(colors, route),
const SizedBox(height: 12),
_buildDisclaimerText(),
],
),
),
),
),
// Right Column: Details, Actions, Stops list
Expanded(
flex: 6,
child: SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildTitleAndDescription(colors, route),
const SizedBox(height: 16),
if (isOwner) ...[
_buildOwnerActions(colors, route),
const SizedBox(height: 16),
],
if (route.attachedGroupRideId != null) ...[
_buildAttachedGroupRideButton(colors, route),
const SizedBox(height: 16),
],
_buildStopsHeader(),
const SizedBox(height: 10),
_buildStopsList(colors, route),
const SizedBox(height: 24),
if (route.stops.isNotEmpty) _buildNavigateStartButton(colors, route),
const SizedBox(height: 32),
],
),
),
),
],
);
}
Widget _buildCompactLayout(
BuildContext context,
MotorSignalThemeColors colors,
ResponsiveSnapshot snapshot,
MotorSignalRoute route,
bool isOwner,
AppLatLng mapCenter,
List<AppMapMarker> markers,
List<AppPolyline> polylines,
) {
final double mapHeight = snapshot.height < 450 ? 140 : 220;
return SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Map Preview
SizedBox(
height: mapHeight,
width: double.infinity,
child: Stack(
children: [
UnifiedMapView(
key: ValueKey('route_detail_map_compact_${route.id}'),
center: mapCenter,
zoom: 12.0,
markers: markers,
polylines: polylines,
),
Positioned(
top: 8,
left: 8,
child: _buildVisibilityBadge(colors, route),
), ),
], ],
), ),
@ -290,6 +415,60 @@ class _RouteDetailScreenState extends ConsumerState<RouteDetailScreen> {
Padding( Padding(
padding: const EdgeInsets.all(16), padding: const EdgeInsets.all(16),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildTitleAndDescription(colors, route),
const SizedBox(height: 12),
_buildDistanceAndStopsCard(colors, route),
const SizedBox(height: 8),
_buildDisclaimerText(),
const SizedBox(height: 16),
if (isOwner) ...[
_buildOwnerActions(colors, route),
const SizedBox(height: 16),
],
if (route.attachedGroupRideId != null) ...[
_buildAttachedGroupRideButton(colors, route),
const SizedBox(height: 16),
],
_buildStopsHeader(),
const SizedBox(height: 10),
_buildStopsList(colors, route),
const SizedBox(height: 24),
if (route.stops.isNotEmpty) _buildNavigateStartButton(colors, route),
const SizedBox(height: 32),
],
),
),
],
),
);
}
Widget _buildVisibilityBadge(MotorSignalThemeColors colors, MotorSignalRoute route) {
return Container(
padding: const EdgeInsets.symmetric(
horizontal: 10,
vertical: 4,
),
decoration: BoxDecoration(
color: colors.surfaceContainer.withValues(alpha: 0.9),
borderRadius: BorderRadius.circular(6),
border: Border.all(color: colors.outlineVariant),
),
child: Text(
route.visibility.label,
style: TextStyle(
color: colors.cyberCyan,
fontSize: 11,
fontWeight: FontWeight.bold,
),
),
);
}
Widget _buildTitleAndDescription(MotorSignalThemeColors colors, MotorSignalRoute route) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Text( Text(
@ -310,15 +489,17 @@ class _RouteDetailScreenState extends ConsumerState<RouteDetailScreen> {
), ),
), ),
], ],
const SizedBox(height: 12), ],
);
}
// Distance and Stops Badges Widget _buildDistanceAndStopsCard(MotorSignalThemeColors colors, MotorSignalRoute route) {
Container( return Container(
padding: const EdgeInsets.all(12), padding: const EdgeInsets.all(12),
decoration: BoxDecoration( decoration: BoxDecoration(
color: const Color(0xFF13151A), color: colors.surfaceContainerHigh,
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(10),
border: Border.all(color: const Color(0xFF2A2E3D)), border: Border.all(color: colors.outlineVariant),
), ),
child: Row( child: Row(
children: [ children: [
@ -338,8 +519,8 @@ class _RouteDetailScreenState extends ConsumerState<RouteDetailScreen> {
const SizedBox(height: 2), const SizedBox(height: 2),
Text( Text(
'${route.formattedDistanceMiles} (${route.formattedDistanceKm})', '${route.formattedDistanceMiles} (${route.formattedDistanceKm})',
style: const TextStyle( style: TextStyle(
color: Color(0xFF00E5FF), color: colors.cyberCyan,
fontSize: 15, fontSize: 15,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
@ -350,7 +531,7 @@ class _RouteDetailScreenState extends ConsumerState<RouteDetailScreen> {
Container( Container(
width: 1, width: 1,
height: 32, height: 32,
color: const Color(0xFF2A2E3D), color: colors.outlineVariant,
), ),
const SizedBox(width: 16), const SizedBox(width: 16),
Expanded( Expanded(
@ -380,19 +561,18 @@ class _RouteDetailScreenState extends ConsumerState<RouteDetailScreen> {
), ),
], ],
), ),
), );
const SizedBox(height: 8), }
// Honest Disclaimer Widget _buildDisclaimerText() {
const Text( return const Text(
'MotorSignal provides straight-line route planning and handoff. Turn-by-turn navigation opens in Google Maps or Waze.', 'MotorSignal provides straight-line route planning and handoff. Turn-by-turn navigation opens in Google Maps or Waze.',
style: TextStyle(color: Colors.white38, fontSize: 11), style: TextStyle(color: Colors.white38, fontSize: 11),
), );
const SizedBox(height: 16), }
// Owner Actions: Edit & Delete Widget _buildOwnerActions(MotorSignalThemeColors colors, MotorSignalRoute route) {
if (isOwner) ...[ return Row(
Row(
children: [ children: [
Expanded( Expanded(
child: OutlinedButton.icon( child: OutlinedButton.icon(
@ -402,18 +582,18 @@ class _RouteDetailScreenState extends ConsumerState<RouteDetailScreen> {
'/routes/planner?routeId=${route.id}', '/routes/planner?routeId=${route.id}',
); );
}, },
icon: const Icon( icon: Icon(
Icons.edit, Icons.edit,
size: 16, size: 16,
color: Color(0xFF00E5FF), color: colors.cyberCyan,
), ),
label: const Text( label: Text(
'EDIT ROUTE', 'EDIT ROUTE',
style: TextStyle(color: Color(0xFF00E5FF)), style: TextStyle(color: colors.cyberCyan),
), ),
style: OutlinedButton.styleFrom( style: OutlinedButton.styleFrom(
side: const BorderSide( side: BorderSide(
color: Color(0xFF00E5FF), color: colors.cyberCyan,
), ),
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
vertical: 10, vertical: 10,
@ -424,21 +604,19 @@ class _RouteDetailScreenState extends ConsumerState<RouteDetailScreen> {
const SizedBox(width: 12), const SizedBox(width: 12),
OutlinedButton.icon( OutlinedButton.icon(
key: const ValueKey('route_detail_delete_button'), key: const ValueKey('route_detail_delete_button'),
onPressed: _isDeleting onPressed: _isDeleting ? null : () => _confirmDelete(route),
? null icon: Icon(
: () => _confirmDelete(route),
icon: const Icon(
Icons.delete_outline, Icons.delete_outline,
size: 16, size: 16,
color: Color(0xFFFF5252), color: colors.raceRed,
), ),
label: const Text( label: Text(
'DELETE', 'DELETE',
style: TextStyle(color: Color(0xFFFF5252)), style: TextStyle(color: colors.raceRed),
), ),
style: OutlinedButton.styleFrom( style: OutlinedButton.styleFrom(
side: const BorderSide( side: BorderSide(
color: Color(0xFFFF5252), color: colors.raceRed,
), ),
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
vertical: 10, vertical: 10,
@ -447,13 +625,11 @@ class _RouteDetailScreenState extends ConsumerState<RouteDetailScreen> {
), ),
), ),
], ],
), );
const SizedBox(height: 16), }
],
// Attached Group Ride button if any Widget _buildAttachedGroupRideButton(MotorSignalThemeColors colors, MotorSignalRoute route) {
if (route.attachedGroupRideId != null) ...[ return OutlinedButton.icon(
OutlinedButton.icon(
key: const ValueKey( key: const ValueKey(
'route_detail_view_attached_group_ride_button', 'route_detail_view_attached_group_ride_button',
), ),
@ -462,25 +638,24 @@ class _RouteDetailScreenState extends ConsumerState<RouteDetailScreen> {
'/group-rides/${route.attachedGroupRideId}', '/group-rides/${route.attachedGroupRideId}',
); );
}, },
icon: const Icon( icon: Icon(
Icons.group, Icons.group,
size: 18, size: 18,
color: Color(0xFF00E5FF), color: colors.cyberCyan,
), ),
label: const Text( label: Text(
'VIEW ATTACHED GROUP RIDE', 'VIEW ATTACHED GROUP RIDE',
style: TextStyle(color: Color(0xFF00E5FF)), style: TextStyle(color: colors.cyberCyan),
), ),
style: OutlinedButton.styleFrom( style: OutlinedButton.styleFrom(
side: const BorderSide(color: Color(0xFF2A2E3D)), side: BorderSide(color: colors.outlineVariant),
minimumSize: const Size(double.infinity, 44), minimumSize: const Size(double.infinity, 44),
), ),
), );
const SizedBox(height: 16), }
],
// Stops List Header Widget _buildStopsHeader() {
const Text( return const Text(
'STOPS & WAYPOINTS', 'STOPS & WAYPOINTS',
style: TextStyle( style: TextStyle(
color: Colors.white, color: Colors.white,
@ -488,11 +663,11 @@ class _RouteDetailScreenState extends ConsumerState<RouteDetailScreen> {
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
letterSpacing: 1.1, letterSpacing: 1.1,
), ),
), );
const SizedBox(height: 10), }
// Stops List Widget _buildStopsList(MotorSignalThemeColors colors, MotorSignalRoute route) {
ListView.builder( return ListView.builder(
shrinkWrap: true, shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(), physics: const NeverScrollableScrollPhysics(),
itemCount: route.stops.length, itemCount: route.stops.length,
@ -507,10 +682,10 @@ class _RouteDetailScreenState extends ConsumerState<RouteDetailScreen> {
margin: const EdgeInsets.only(bottom: 8), margin: const EdgeInsets.only(bottom: 8),
padding: const EdgeInsets.all(12), padding: const EdgeInsets.all(12),
decoration: BoxDecoration( decoration: BoxDecoration(
color: const Color(0xFF13151A), color: colors.surfaceContainerHigh,
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(10),
border: Border.all( border: Border.all(
color: const Color(0xFF2A2E3D), color: colors.outlineVariant,
), ),
), ),
child: Row( child: Row(
@ -520,10 +695,10 @@ class _RouteDetailScreenState extends ConsumerState<RouteDetailScreen> {
height: 28, height: 28,
decoration: BoxDecoration( decoration: BoxDecoration(
color: isFirst color: isFirst
? const Color(0xFF00E676) ? colors.launchGreen
: isLast : isLast
? const Color(0xFFFF5252) ? colors.raceRed
: const Color(0xFF00E5FF), : colors.cyberCyan,
shape: BoxShape.circle, shape: BoxShape.circle,
), ),
alignment: Alignment.center, alignment: Alignment.center,
@ -539,15 +714,14 @@ class _RouteDetailScreenState extends ConsumerState<RouteDetailScreen> {
const SizedBox(width: 12), const SizedBox(width: 12),
Expanded( Expanded(
child: Column( child: Column(
crossAxisAlignment: crossAxisAlignment: CrossAxisAlignment.start,
CrossAxisAlignment.start,
children: [ children: [
Row( Row(
children: [ children: [
Icon( Icon(
_getIconForStopType(stop.stopType), _getIconForStopType(stop.stopType),
size: 14, size: 14,
color: const Color(0xFF00E5FF), color: colors.cyberCyan,
), ),
const SizedBox(width: 4), const SizedBox(width: 4),
Flexible( Flexible(
@ -596,7 +770,7 @@ class _RouteDetailScreenState extends ConsumerState<RouteDetailScreen> {
icon: const Icon(Icons.navigation, size: 14), icon: const Icon(Icons.navigation, size: 14),
label: const Text('NAV'), label: const Text('NAV'),
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFF00E5FF), backgroundColor: colors.cyberCyan,
foregroundColor: Colors.black, foregroundColor: Colors.black,
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: 10, horizontal: 10,
@ -612,12 +786,11 @@ class _RouteDetailScreenState extends ConsumerState<RouteDetailScreen> {
), ),
); );
}, },
), );
const SizedBox(height: 24), }
// Primary action: Navigate to First Stop Widget _buildNavigateStartButton(MotorSignalThemeColors colors, MotorSignalRoute route) {
if (route.stops.isNotEmpty) return ElevatedButton.icon(
ElevatedButton.icon(
key: const ValueKey( key: const ValueKey(
'route_detail_navigate_start_button', 'route_detail_navigate_start_button',
), ),
@ -639,23 +812,13 @@ class _RouteDetailScreenState extends ConsumerState<RouteDetailScreen> {
), ),
), ),
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFF00E5FF), backgroundColor: colors.cyberCyan,
foregroundColor: Colors.black, foregroundColor: Colors.black,
minimumSize: const Size(double.infinity, 50), minimumSize: const Size(double.infinity, 50),
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(10),
), ),
), ),
),
const SizedBox(height: 32),
],
),
),
],
),
);
},
),
); );
} }
} }

484
lib/features/routes/route_planner_screen.dart
View File

@ -2,6 +2,9 @@ import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:geolocator/geolocator.dart'; import 'package:geolocator/geolocator.dart';
import 'package:go_router/go_router.dart'; import 'package:go_router/go_router.dart';
import '../../core/responsive/responsive_layout.dart';
import '../../core/responsive/viewport_size.dart';
import '../../core/theme/theme_extensions.dart';
import '../../services/auth/auth_providers.dart'; import '../../services/auth/auth_providers.dart';
import '../../services/map/map_provider_interface.dart'; import '../../services/map/map_provider_interface.dart';
import '../../services/map/unified_map_view.dart'; import '../../services/map/unified_map_view.dart';
@ -93,7 +96,7 @@ class _RoutePlannerScreenState extends ConsumerState<RoutePlannerScreen> {
ScaffoldMessenger.of(context).showSnackBar( ScaffoldMessenger.of(context).showSnackBar(
SnackBar( SnackBar(
content: Text('Could not get GPS location: $e'), content: Text('Could not get GPS location: $e'),
backgroundColor: Colors.redAccent, backgroundColor: context.motorColors.raceRed,
), ),
); );
} }
@ -105,14 +108,15 @@ class _RoutePlannerScreenState extends ConsumerState<RoutePlannerScreen> {
double? initialLng, double? initialLng,
String? defaultName, String? defaultName,
}) { }) {
final colors = context.motorColors;
final state = ref.read(routePlannerNotifierProvider); final state = ref.read(routePlannerNotifierProvider);
const maxAllowed = RouteService.maxTechnicalStops; const maxAllowed = RouteService.maxTechnicalStops;
if (existingStop == null && state.stops.length >= maxAllowed) { if (existingStop == null && state.stops.length >= maxAllowed) {
ScaffoldMessenger.of(context).showSnackBar( ScaffoldMessenger.of(context).showSnackBar(
const SnackBar( SnackBar(
content: Text('Maximum of $maxAllowed stops reached.'), content: const Text('Maximum of 25 stops reached.'),
backgroundColor: Color(0xFF1B1E26), backgroundColor: colors.surfaceContainerHighest,
), ),
); );
return; return;
@ -141,10 +145,10 @@ class _RoutePlannerScreenState extends ConsumerState<RoutePlannerScreen> {
builder: (dialogCtx) => StatefulBuilder( builder: (dialogCtx) => StatefulBuilder(
builder: (context, setDialogState) { builder: (context, setDialogState) {
return AlertDialog( return AlertDialog(
backgroundColor: const Color(0xFF13151A), backgroundColor: colors.surfaceContainer,
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(16),
side: const BorderSide(color: Color(0xFF2A2E3D)), side: BorderSide(color: colors.outlineVariant),
), ),
title: Text( title: Text(
existingStop != null ? 'Edit Stop' : 'Add Route Stop', existingStop != null ? 'Edit Stop' : 'Add Route Stop',
@ -161,16 +165,16 @@ class _RoutePlannerScreenState extends ConsumerState<RoutePlannerScreen> {
TextField( TextField(
controller: nameCtrl, controller: nameCtrl,
style: const TextStyle(color: Colors.white), style: const TextStyle(color: Colors.white),
decoration: const InputDecoration( decoration: InputDecoration(
labelText: 'Stop Name *', labelText: 'Stop Name *',
labelStyle: TextStyle(color: Colors.white60), labelStyle: const TextStyle(color: Colors.white60),
hintText: 'e.g. Skyline Summit, Fuel Stop', hintText: 'e.g. Skyline Summit, Fuel Stop',
hintStyle: TextStyle(color: Colors.white24), hintStyle: const TextStyle(color: Colors.white24),
enabledBorder: UnderlineInputBorder( enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xFF2A2E3D)), borderSide: BorderSide(color: colors.outlineVariant),
), ),
focusedBorder: UnderlineInputBorder( focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xFF00E5FF)), borderSide: BorderSide(color: colors.cyberCyan),
), ),
), ),
), ),
@ -178,13 +182,13 @@ class _RoutePlannerScreenState extends ConsumerState<RoutePlannerScreen> {
DropdownButtonFormField<RouteStopType>( DropdownButtonFormField<RouteStopType>(
initialValue: selectedType, initialValue: selectedType,
isExpanded: true, isExpanded: true,
dropdownColor: const Color(0xFF1B1E26), dropdownColor: colors.surfaceContainerHigh,
style: const TextStyle(color: Colors.white), style: const TextStyle(color: Colors.white),
decoration: const InputDecoration( decoration: InputDecoration(
labelText: 'Stop Type', labelText: 'Stop Type',
labelStyle: TextStyle(color: Colors.white60), labelStyle: const TextStyle(color: Colors.white60),
enabledBorder: UnderlineInputBorder( enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xFF2A2E3D)), borderSide: BorderSide(color: colors.outlineVariant),
), ),
), ),
items: RouteStopType.values.map((type) { items: RouteStopType.values.map((type) {
@ -194,7 +198,7 @@ class _RoutePlannerScreenState extends ConsumerState<RoutePlannerScreen> {
children: [ children: [
Icon( Icon(
_getIconForStopType(type), _getIconForStopType(type),
color: const Color(0xFF00E5FF), color: colors.cyberCyan,
size: 18, size: 18,
), ),
const SizedBox(width: 8), const SizedBox(width: 8),
@ -283,7 +287,7 @@ class _RoutePlannerScreenState extends ConsumerState<RoutePlannerScreen> {
), ),
ElevatedButton( ElevatedButton(
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFF00E5FF), backgroundColor: colors.cyberCyan,
foregroundColor: Colors.black, foregroundColor: Colors.black,
), ),
onPressed: () { onPressed: () {
@ -405,7 +409,7 @@ class _RoutePlannerScreenState extends ConsumerState<RoutePlannerScreen> {
ScaffoldMessenger.of(context).showSnackBar( ScaffoldMessenger.of(context).showSnackBar(
SnackBar( SnackBar(
content: Text('Route "${savedRoute.title}" saved successfully!'), content: Text('Route "${savedRoute.title}" saved successfully!'),
backgroundColor: const Color(0xFF00E676), backgroundColor: context.motorColors.launchGreen,
), ),
); );
context.pop(savedRoute); context.pop(savedRoute);
@ -448,11 +452,13 @@ class _RoutePlannerScreenState extends ConsumerState<RoutePlannerScreen> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final colors = context.motorColors;
if (!_initialized) { if (!_initialized) {
return const Scaffold( return Scaffold(
backgroundColor: Color(0xFF0D0E11), backgroundColor: colors.surfaceContainer,
body: Center( body: Center(
child: CircularProgressIndicator(color: Color(0xFF00E5FF)), child: CircularProgressIndicator(color: colors.cyberCyan),
), ),
); );
} }
@ -480,10 +486,10 @@ class _RoutePlannerScreenState extends ConsumerState<RoutePlannerScreen> {
padding: const EdgeInsets.all(4), padding: const EdgeInsets.all(4),
decoration: BoxDecoration( decoration: BoxDecoration(
color: isFirst color: isFirst
? const Color(0xFF00E676) ? colors.launchGreen
: isLast : isLast
? const Color(0xFFFF5252) ? colors.raceRed
: const Color(0xFF00E5FF), : colors.cyberCyan,
shape: BoxShape.circle, shape: BoxShape.circle,
boxShadow: const [ boxShadow: const [
BoxShadow(color: Colors.black54, blurRadius: 4, spreadRadius: 1), BoxShadow(color: Colors.black54, blurRadius: 4, spreadRadius: 1),
@ -517,16 +523,16 @@ class _RoutePlannerScreenState extends ConsumerState<RoutePlannerScreen> {
points: state.previewPoints points: state.previewPoints
.map((p) => AppLatLng(p.latitude, p.longitude)) .map((p) => AppLatLng(p.latitude, p.longitude))
.toList(), .toList(),
color: const Color(0xFF00E5FF), color: colors.cyberCyan,
width: 3.5, width: 3.5,
), ),
] ]
: <AppPolyline>[]; : <AppPolyline>[];
return Scaffold( return Scaffold(
backgroundColor: const Color(0xFF0D0E11), backgroundColor: colors.surfaceContainer,
appBar: AppBar( appBar: AppBar(
backgroundColor: const Color(0xFF13151A), backgroundColor: colors.surfaceContainerHigh,
elevation: 0, elevation: 0,
leading: IconButton( leading: IconButton(
icon: const Icon(Icons.arrow_back, color: Colors.white), icon: const Icon(Icons.arrow_back, color: Colors.white),
@ -542,15 +548,15 @@ class _RoutePlannerScreenState extends ConsumerState<RoutePlannerScreen> {
), ),
actions: [ actions: [
if (_isSaving) if (_isSaving)
const Center( Center(
child: Padding( child: Padding(
padding: EdgeInsets.symmetric(horizontal: 16.0), padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: SizedBox( child: SizedBox(
width: 20, width: 20,
height: 20, height: 20,
child: CircularProgressIndicator( child: CircularProgressIndicator(
strokeWidth: 2, strokeWidth: 2,
color: Color(0xFF00E5FF), color: colors.cyberCyan,
), ),
), ),
), ),
@ -559,22 +565,143 @@ class _RoutePlannerScreenState extends ConsumerState<RoutePlannerScreen> {
TextButton.icon( TextButton.icon(
key: const ValueKey('route_planner_save_button'), key: const ValueKey('route_planner_save_button'),
onPressed: _saveRoute, onPressed: _saveRoute,
icon: const Icon(Icons.save, color: Color(0xFF00E5FF), size: 18), icon: Icon(Icons.save, color: colors.cyberCyan, size: 18),
label: const Text( label: Text(
'SAVE', 'SAVE',
style: TextStyle( style: TextStyle(
color: Color(0xFF00E5FF), color: colors.cyberCyan,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
), ),
), ),
], ],
), ),
body: LayoutBuilder( body: ResponsiveLayout(
builder: (context, constraints) { builder: (context, snapshot) {
final isNarrow = constraints.maxWidth < 360; final isNarrow = snapshot.width < 360;
final isCompactHeight = constraints.maxHeight < 500; final isExpandedLayout =
final isVeryCompactHeight = constraints.maxHeight < 360; snapshot.sizeClass == WindowSizeClass.expanded ||
(snapshot.isLandscape && snapshot.width >= 720);
if (isExpandedLayout) {
return _buildExpandedLayout(
context,
colors,
state,
maxAllowed,
isAtLimit,
mapCenter,
markers,
polylines,
isNarrow,
);
}
return _buildCompactLayout(
context,
colors,
snapshot,
state,
maxAllowed,
isAtLimit,
mapCenter,
markers,
polylines,
isNarrow,
);
},
),
);
}
Widget _buildExpandedLayout(
BuildContext context,
MotorSignalThemeColors colors,
RoutePlannerState state,
int maxAllowed,
bool isAtLimit,
AppLatLng mapCenter,
List<AppMapMarker> markers,
List<AppPolyline> polylines,
bool isNarrow,
) {
return Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// Left Column: Map preview + HUD
Expanded(
flex: 5,
child: Container(
decoration: BoxDecoration(
border: Border(
right: BorderSide(color: colors.outlineVariant),
),
),
child: Stack(
children: [
UnifiedMapView(
key: const ValueKey('route_planner_map_expanded'),
center: mapCenter,
zoom: 12.0,
markers: markers,
polylines: polylines,
),
Positioned(
top: 12,
left: 12,
right: 12,
child: _buildHudOverlay(colors, state, maxAllowed, isAtLimit, false),
),
Positioned(
bottom: 8,
left: 12,
right: 12,
child: _buildDisclaimerText(),
),
],
),
),
),
// Right Column: Form inputs + Stop list
Expanded(
flex: 6,
child: Column(
children: [
if (_errorMessage != null) _buildErrorBanner(colors),
Padding(
padding: const EdgeInsets.all(16),
child: _buildRouteInfoInputs(colors, false),
),
Divider(color: colors.outlineVariant, height: 1),
Padding(
padding: const EdgeInsets.all(12),
child: _buildStopControls(colors, state, isNarrow, false),
),
Expanded(
child: _buildStopsList(colors, state, false, false),
),
],
),
),
],
);
}
Widget _buildCompactLayout(
BuildContext context,
MotorSignalThemeColors colors,
ResponsiveSnapshot snapshot,
RoutePlannerState state,
int maxAllowed,
bool isAtLimit,
AppLatLng mapCenter,
List<AppMapMarker> markers,
List<AppPolyline> polylines,
bool isNarrow,
) {
final isCompactHeight = snapshot.height < 500;
final isVeryCompactHeight = snapshot.height < 360;
// Dynamically compute map preview height based on available vertical space: // Dynamically compute map preview height based on available vertical space:
// Generous space (>= 620dp): 220dp // Generous space (>= 620dp): 220dp
@ -584,16 +711,16 @@ class _RoutePlannerScreenState extends ConsumerState<RoutePlannerScreen> {
// Extreme constraint (< 280dp): 0dp (collapses so inputs stay visible and editable) // Extreme constraint (< 280dp): 0dp (collapses so inputs stay visible and editable)
final double mapHeight; final double mapHeight;
final bool showDisclaimer; final bool showDisclaimer;
if (constraints.maxHeight >= 620) { if (snapshot.height >= 620) {
mapHeight = 220.0; mapHeight = 220.0;
showDisclaimer = true; showDisclaimer = true;
} else if (constraints.maxHeight >= 500) { } else if (snapshot.height >= 500) {
mapHeight = 160.0; mapHeight = 160.0;
showDisclaimer = true; showDisclaimer = true;
} else if (constraints.maxHeight >= 380) { } else if (snapshot.height >= 380) {
mapHeight = 110.0; mapHeight = 110.0;
showDisclaimer = false; showDisclaimer = false;
} else if (constraints.maxHeight >= 280) { } else if (snapshot.height >= 280) {
mapHeight = 70.0; mapHeight = 70.0;
showDisclaimer = false; showDisclaimer = false;
} else { } else {
@ -603,28 +730,101 @@ class _RoutePlannerScreenState extends ConsumerState<RoutePlannerScreen> {
return Column( return Column(
children: [ children: [
// Error banner if any if (_errorMessage != null) _buildErrorBanner(colors),
if (_errorMessage != null)
Container( // Map Preview Section
if (mapHeight > 0)
SizedBox(
height: mapHeight,
width: double.infinity, width: double.infinity,
color: const Color(0xFFFF5252).withValues(alpha: 0.15), child: Stack(
children: [
UnifiedMapView(
key: const ValueKey('route_planner_map_compact'),
center: mapCenter,
zoom: 12.0,
markers: markers,
polylines: polylines,
),
Positioned(
top: isCompactHeight ? 4 : 8,
left: 8,
right: 8,
child: _buildHudOverlay(
colors,
state,
maxAllowed,
isAtLimit,
isCompactHeight,
),
),
if (showDisclaimer)
Positioned(
bottom: 4,
left: 8,
right: 8,
child: _buildDisclaimerText(),
),
],
),
),
// Route Info Inputs
Padding(
padding: EdgeInsets.fromLTRB(
16,
isCompactHeight ? 4 : 12,
16,
isCompactHeight ? 2 : 4,
),
child: _buildRouteInfoInputs(colors, isCompactHeight),
),
Divider(color: colors.outlineVariant, height: 1),
// Stop List Controls
Padding(
padding: EdgeInsets.symmetric(
horizontal: 16,
vertical: isCompactHeight ? 4 : 8,
),
child: _buildStopControls(colors, state, isNarrow, isCompactHeight),
),
// Reorderable Stop List
Expanded(
child: _buildStopsList(
colors,
state,
isCompactHeight,
isVeryCompactHeight,
),
),
],
);
}
Widget _buildErrorBanner(MotorSignalThemeColors colors) {
return Container(
width: double.infinity,
color: colors.raceRed.withValues(alpha: 0.15),
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: 16, horizontal: 16,
vertical: 8, vertical: 8,
), ),
child: Row( child: Row(
children: [ children: [
const Icon( Icon(
Icons.error_outline, Icons.error_outline,
color: Color(0xFFFF5252), color: colors.raceRed,
size: 18, size: 18,
), ),
const SizedBox(width: 8), const SizedBox(width: 8),
Expanded( Expanded(
child: Text( child: Text(
_errorMessage!, _errorMessage!,
style: const TextStyle( style: TextStyle(
color: Color(0xFFFF5252), color: colors.raceRed,
fontSize: 12, fontSize: 12,
), ),
), ),
@ -641,36 +841,25 @@ class _RoutePlannerScreenState extends ConsumerState<RoutePlannerScreen> {
), ),
], ],
), ),
), );
}
// Map Preview Section Widget _buildHudOverlay(
if (mapHeight > 0) MotorSignalThemeColors colors,
SizedBox( RoutePlannerState state,
height: mapHeight, int maxAllowed,
width: double.infinity, bool isAtLimit,
child: Stack( bool isCompactHeight,
children: [ ) {
UnifiedMapView( return Container(
center: mapCenter,
zoom: 12.0,
markers: markers,
polylines: polylines,
),
// Distance & Stops HUD overlay
Positioned(
top: isCompactHeight ? 4 : 8,
left: 8,
right: 8,
child: Container(
padding: EdgeInsets.symmetric( padding: EdgeInsets.symmetric(
horizontal: 8, horizontal: 8,
vertical: isCompactHeight ? 4 : 6, vertical: isCompactHeight ? 4 : 6,
), ),
decoration: BoxDecoration( decoration: BoxDecoration(
color: color: colors.surfaceContainer.withValues(alpha: 0.9),
const Color(0xFF13151A).withValues(alpha: 0.9),
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
border: Border.all(color: const Color(0xFF2A2E3D)), border: Border.all(color: colors.outlineVariant),
), ),
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
@ -681,7 +870,7 @@ class _RoutePlannerScreenState extends ConsumerState<RoutePlannerScreen> {
? 'Straight-line: ${state.formattedDistanceMiles} (${state.formattedDistanceKm})' ? 'Straight-line: ${state.formattedDistanceMiles} (${state.formattedDistanceKm})'
: 'Add 2+ stops for distance', : 'Add 2+ stops for distance',
style: TextStyle( style: TextStyle(
color: const Color(0xFF00E5FF), color: colors.cyberCyan,
fontSize: isCompactHeight ? 11 : 12, fontSize: isCompactHeight ? 11 : 12,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
@ -696,20 +885,14 @@ class _RoutePlannerScreenState extends ConsumerState<RoutePlannerScreen> {
), ),
decoration: BoxDecoration( decoration: BoxDecoration(
color: isAtLimit color: isAtLimit
? const Color( ? colors.warningAmber.withValues(alpha: 0.2)
0xFFFFB300, : colors.cyberCyan.withValues(alpha: 0.15),
).withValues(alpha: 0.2)
: const Color(
0xFF00E5FF,
).withValues(alpha: 0.15),
borderRadius: BorderRadius.circular(4), borderRadius: BorderRadius.circular(4),
), ),
child: Text( child: Text(
'${state.stops.length}/$maxAllowed STOPS', '${state.stops.length}/$maxAllowed STOPS',
style: TextStyle( style: TextStyle(
color: isAtLimit color: isAtLimit ? colors.warningAmber : colors.cyberCyan,
? const Color(0xFFFFB300)
: const Color(0xFF00E5FF),
fontSize: 10, fontSize: 10,
fontWeight: FontWeight.w900, fontWeight: FontWeight.w900,
), ),
@ -717,15 +900,11 @@ class _RoutePlannerScreenState extends ConsumerState<RoutePlannerScreen> {
), ),
], ],
), ),
), );
), }
// Straight-line disclaimer note
if (showDisclaimer) Widget _buildDisclaimerText() {
Positioned( return Text(
bottom: 4,
left: 8,
right: 8,
child: Text(
'Straight-line preview. Navigation handoff launches in Google Maps / Waze.', 'Straight-line preview. Navigation handoff launches in Google Maps / Waze.',
textAlign: TextAlign.center, textAlign: TextAlign.center,
style: TextStyle( style: TextStyle(
@ -735,21 +914,11 @@ class _RoutePlannerScreenState extends ConsumerState<RoutePlannerScreen> {
Shadow(color: Colors.black, blurRadius: 4), Shadow(color: Colors.black, blurRadius: 4),
], ],
), ),
), );
), }
],
),
),
// Route Info Inputs (collapsible / compact) Widget _buildRouteInfoInputs(MotorSignalThemeColors colors, bool isCompactHeight) {
Padding( return Column(
padding: EdgeInsets.fromLTRB(
16,
isCompactHeight ? 4 : 12,
16,
isCompactHeight ? 2 : 4,
),
child: Column(
children: [ children: [
TextField( TextField(
controller: _titleController, controller: _titleController,
@ -780,7 +949,7 @@ class _RoutePlannerScreenState extends ConsumerState<RoutePlannerScreen> {
PopupMenuButton<RouteVisibility>( PopupMenuButton<RouteVisibility>(
initialValue: _visibility, initialValue: _visibility,
onSelected: (v) => setState(() => _visibility = v), onSelected: (v) => setState(() => _visibility = v),
color: const Color(0xFF1B1E26), color: colors.surfaceContainerHigh,
child: Padding( child: Padding(
padding: EdgeInsets.symmetric( padding: EdgeInsets.symmetric(
vertical: isCompactHeight ? 2 : 4, vertical: isCompactHeight ? 2 : 4,
@ -796,22 +965,21 @@ class _RoutePlannerScreenState extends ConsumerState<RoutePlannerScreen> {
const SizedBox(width: 4), const SizedBox(width: 4),
Text( Text(
_visibility.label, _visibility.label,
style: const TextStyle( style: TextStyle(
color: Color(0xFF00E5FF), color: colors.cyberCyan,
fontSize: 12, fontSize: 12,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
), ),
const Icon( Icon(
Icons.arrow_drop_down, Icons.arrow_drop_down,
size: 16, size: 16,
color: Color(0xFF00E5FF), color: colors.cyberCyan,
), ),
], ],
), ),
), ),
itemBuilder: (context) => itemBuilder: (context) => RouteVisibility.values.map((v) {
RouteVisibility.values.map((v) {
return PopupMenuItem( return PopupMenuItem(
value: v, value: v,
child: Text( child: Text(
@ -827,18 +995,16 @@ class _RoutePlannerScreenState extends ConsumerState<RoutePlannerScreen> {
], ],
), ),
], ],
), );
), }
const Divider(color: Color(0xFF2A2E3D), height: 1), Widget _buildStopControls(
MotorSignalThemeColors colors,
// Stop List Controls (Add Stop / Add GPS / Reverse) RoutePlannerState state,
Padding( bool isNarrow,
padding: EdgeInsets.symmetric( bool isCompactHeight,
horizontal: 16, ) {
vertical: isCompactHeight ? 4 : 8, return Wrap(
),
child: Wrap(
spacing: 8, spacing: 8,
runSpacing: 8, runSpacing: 8,
alignment: WrapAlignment.spaceBetween, alignment: WrapAlignment.spaceBetween,
@ -853,7 +1019,7 @@ class _RoutePlannerScreenState extends ConsumerState<RoutePlannerScreen> {
icon: const Icon(Icons.add_location_alt, size: 16), icon: const Icon(Icons.add_location_alt, size: 16),
label: Text(isNarrow ? 'ADD' : 'ADD STOP'), label: Text(isNarrow ? 'ADD' : 'ADD STOP'),
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFF00E5FF), backgroundColor: colors.cyberCyan,
foregroundColor: Colors.black, foregroundColor: Colors.black,
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: 10, horizontal: 10,
@ -867,21 +1033,19 @@ class _RoutePlannerScreenState extends ConsumerState<RoutePlannerScreen> {
), ),
const SizedBox(width: 8), const SizedBox(width: 8),
OutlinedButton.icon( OutlinedButton.icon(
key: const ValueKey( key: const ValueKey('route_planner_current_gps_button'),
'route_planner_current_gps_button',
),
onPressed: _addCurrentLocationStop, onPressed: _addCurrentLocationStop,
icon: const Icon( icon: Icon(
Icons.my_location, Icons.my_location,
size: 16, size: 16,
color: Color(0xFF00E5FF), color: colors.cyberCyan,
), ),
label: Text( label: Text(
isNarrow ? 'GPS' : 'CURRENT GPS', isNarrow ? 'GPS' : 'CURRENT GPS',
style: const TextStyle(color: Color(0xFF00E5FF)), style: TextStyle(color: colors.cyberCyan),
), ),
style: OutlinedButton.styleFrom( style: OutlinedButton.styleFrom(
side: const BorderSide(color: Color(0xFF2A2E3D)), side: BorderSide(color: colors.outlineVariant),
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: 10, horizontal: 10,
vertical: 8, vertical: 8,
@ -916,13 +1080,17 @@ class _RoutePlannerScreenState extends ConsumerState<RoutePlannerScreen> {
), ),
), ),
], ],
), );
), }
// Reorderable Stop List Widget _buildStopsList(
Expanded( MotorSignalThemeColors colors,
child: state.stops.isEmpty RoutePlannerState state,
? Center( bool isCompactHeight,
bool isVeryCompactHeight,
) {
if (state.stops.isEmpty) {
return Center(
child: SingleChildScrollView( child: SingleChildScrollView(
physics: const ClampingScrollPhysics(), physics: const ClampingScrollPhysics(),
child: Padding( child: Padding(
@ -957,8 +1125,10 @@ class _RoutePlannerScreenState extends ConsumerState<RoutePlannerScreen> {
), ),
), ),
), ),
) );
: ReorderableListView.builder( }
return ReorderableListView.builder(
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: 16, horizontal: 16,
vertical: 4, vertical: 4,
@ -974,19 +1144,16 @@ class _RoutePlannerScreenState extends ConsumerState<RoutePlannerScreen> {
final stop = state.stops[index]; final stop = state.stops[index];
final isFirst = index == 0; final isFirst = index == 0;
final isLast = final isLast =
index == state.stops.length - 1 && index == state.stops.length - 1 && state.stops.length > 1;
state.stops.length > 1;
return Container( return Container(
key: ValueKey(stop.id), key: ValueKey(stop.id),
margin: const EdgeInsets.only(bottom: 8), margin: const EdgeInsets.only(bottom: 8),
padding: const EdgeInsets.all(10), padding: const EdgeInsets.all(10),
decoration: BoxDecoration( decoration: BoxDecoration(
color: const Color(0xFF13151A), color: colors.surfaceContainerHigh,
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(10),
border: Border.all( border: Border.all(color: colors.outlineVariant),
color: const Color(0xFF2A2E3D),
),
), ),
child: Row( child: Row(
children: [ children: [
@ -996,10 +1163,10 @@ class _RoutePlannerScreenState extends ConsumerState<RoutePlannerScreen> {
height: 26, height: 26,
decoration: BoxDecoration( decoration: BoxDecoration(
color: isFirst color: isFirst
? const Color(0xFF00E676) ? colors.launchGreen
: isLast : isLast
? const Color(0xFFFF5252) ? colors.raceRed
: const Color(0xFF00E5FF), : colors.cyberCyan,
shape: BoxShape.circle, shape: BoxShape.circle,
), ),
alignment: Alignment.center, alignment: Alignment.center,
@ -1017,15 +1184,14 @@ class _RoutePlannerScreenState extends ConsumerState<RoutePlannerScreen> {
// Stop Details // Stop Details
Expanded( Expanded(
child: Column( child: Column(
crossAxisAlignment: crossAxisAlignment: CrossAxisAlignment.start,
CrossAxisAlignment.start,
children: [ children: [
Row( Row(
children: [ children: [
Icon( Icon(
_getIconForStopType(stop.stopType), _getIconForStopType(stop.stopType),
size: 14, size: 14,
color: const Color(0xFF00E5FF), color: colors.cyberCyan,
), ),
const SizedBox(width: 4), const SizedBox(width: 4),
Flexible( Flexible(
@ -1067,9 +1233,9 @@ class _RoutePlannerScreenState extends ConsumerState<RoutePlannerScreen> {
// Actions: Handoff navigation, Edit, Delete // Actions: Handoff navigation, Edit, Delete
IconButton( IconButton(
icon: const Icon( icon: Icon(
Icons.navigation, Icons.navigation,
color: Color(0xFF00E5FF), color: colors.cyberCyan,
size: 18, size: 18,
), ),
tooltip: 'Open in Maps', tooltip: 'Open in Maps',
@ -1102,9 +1268,9 @@ class _RoutePlannerScreenState extends ConsumerState<RoutePlannerScreen> {
), ),
), ),
IconButton( IconButton(
icon: const Icon( icon: Icon(
Icons.delete_outline, Icons.delete_outline,
color: Color(0xFFFF5252), color: colors.raceRed,
size: 18, size: 18,
), ),
tooltip: 'Remove stop', tooltip: 'Remove stop',
@ -1130,12 +1296,6 @@ class _RoutePlannerScreenState extends ConsumerState<RoutePlannerScreen> {
), ),
); );
}, },
),
),
],
);
},
),
); );
} }
} }

16
lib/services/routes/navigation_handoff.dart
View File

@ -1,5 +1,6 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart'; import 'package:url_launcher/url_launcher.dart';
import '../../core/theme/theme_extensions.dart';
import 'route_models.dart'; import 'route_models.dart';
/// Target navigation application for handoff. /// Target navigation application for handoff.
@ -67,9 +68,10 @@ class NavigationHandoffService {
required double longitude, required double longitude,
required String displayName, required String displayName,
}) { }) {
final colors = context.motorColors;
showModalBottomSheet( showModalBottomSheet(
context: context, context: context,
backgroundColor: const Color(0xFF1B1E26), backgroundColor: colors.surfaceContainer,
shape: const RoundedRectangleBorder( shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(16)), borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
), ),
@ -83,9 +85,9 @@ class NavigationHandoffService {
children: [ children: [
Row( Row(
children: [ children: [
const Icon( Icon(
Icons.navigation, Icons.navigation,
color: Color(0xFF00E5FF), color: colors.cyberCyan,
size: 22, size: 22,
), ),
const SizedBox(width: 12), const SizedBox(width: 12),
@ -93,13 +95,13 @@ class NavigationHandoffService {
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
const Text( Text(
'NAVIGATION HANDOFF', 'NAVIGATION HANDOFF',
style: TextStyle( style: TextStyle(
fontSize: 11, fontSize: 11,
letterSpacing: 1.2, letterSpacing: 1.2,
fontWeight: FontWeight.w700, fontWeight: FontWeight.w700,
color: Color(0xFF00E5FF), color: colors.cyberCyan,
), ),
), ),
const SizedBox(height: 2), const SizedBox(height: 2),
@ -169,9 +171,9 @@ class NavigationHandoffService {
color: Colors.white10, color: Colors.white10,
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
), ),
child: const Icon( child: Icon(
Icons.directions_car, Icons.directions_car,
color: Color(0xFF00E5FF), color: colors.cyberCyan,
), ),
), ),
title: const Text( title: const Text(

298
test/canonical_routes_maps_responsive_test.dart Normal file
View File

@ -0,0 +1,298 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:motorcycle_dash/core/theme/theme_extensions.dart';
import 'package:motorcycle_dash/features/map/map_screen.dart';
import 'package:motorcycle_dash/features/routes/route_detail_screen.dart';
import 'package:motorcycle_dash/features/routes/route_planner_screen.dart';
import 'package:motorcycle_dash/services/auth/auth_providers.dart';
import 'package:motorcycle_dash/services/auth/auth_user.dart';
import 'package:motorcycle_dash/services/entitlements/entitlement_providers.dart';
import 'package:motorcycle_dash/services/map/unified_map_view.dart';
import 'package:motorcycle_dash/services/routes/navigation_handoff.dart';
import 'package:motorcycle_dash/services/routes/route_models.dart';
import 'package:motorcycle_dash/services/routes/route_providers.dart';
const List<Size> testViewports = [
Size(320, 640),
Size(360, 800),
Size(390, 844),
Size(412, 915),
Size(640, 320),
Size(800, 360),
Size(844, 390),
Size(768, 1024),
Size(1024, 768),
];
MotorSignalRoute createSampleRoute({
String id = 'sample-route-1',
String title = 'Skyline Ridge Cruise',
String description = 'Scenic ridge route with twisties',
String ownerUid = 'alice',
RouteVisibility visibility = RouteVisibility.public,
String? attachedGroupRideId,
}) {
return MotorSignalRoute(
id: id,
title: title,
description: description,
ownerUid: ownerUid,
createdAt: DateTime(2026, 1, 1),
updatedAt: DateTime(2026, 1, 2),
visibility: visibility,
attachedGroupRideId: attachedGroupRideId,
stops: const [
RouteStop(
id: 'stop-1',
orderIndex: 0,
latitude: 37.3861,
longitude: -122.2641,
displayName: 'Alice\'s Restaurant',
stopType: RouteStopType.start,
notes: 'Meet at 9:00 AM',
),
RouteStop(
id: 'stop-2',
orderIndex: 1,
latitude: 37.3200,
longitude: -122.2100,
displayName: 'Skyline Vista Point',
stopType: RouteStopType.scenic,
notes: 'Quick photo stop',
),
RouteStop(
id: 'stop-3',
orderIndex: 2,
latitude: 37.2500,
longitude: -122.1800,
displayName: 'Summit Overlook',
stopType: RouteStopType.destination,
notes: 'Final regroup',
),
],
);
}
void main() {
group('UI-2E MapScreen Responsive Matrix', () {
for (final size in testViewports) {
testWidgets('MapScreen live mode renders cleanly at ${size.width}x${size.height}', (tester) async {
await tester.binding.setSurfaceSize(size);
await tester.pumpWidget(
ProviderScope(
overrides: [
currentUserProvider.overrideWith((ref) => const AuthUser(uid: 'alice', isAnonymous: false)),
isProSubscriberProvider.overrideWith((ref) => false),
],
child: MaterialApp(
theme: ThemeData.dark().copyWith(
extensions: [MotorSignalThemeColors.dark],
),
home: const MapScreen(),
),
),
);
await tester.pumpAndSettle();
expect(find.text('Live Map'), findsOneWidget);
expect(find.byType(UnifiedMapView), findsOneWidget);
expect(tester.takeException(), isNull);
});
}
});
group('UI-2E RoutePlannerScreen Responsive Matrix', () {
for (final size in testViewports) {
testWidgets('RoutePlannerScreen renders without overflow at ${size.width}x${size.height}', (tester) async {
await tester.binding.setSurfaceSize(size);
await tester.pumpWidget(
ProviderScope(
overrides: [
currentUserProvider.overrideWith((ref) => const AuthUser(uid: 'alice', isAnonymous: false)),
isProSubscriberProvider.overrideWith((ref) => false),
],
child: MaterialApp(
theme: ThemeData.dark().copyWith(
extensions: [MotorSignalThemeColors.dark],
),
home: const RoutePlannerScreen(),
),
),
);
await tester.pumpAndSettle();
expect(find.text('ROUTE PLANNER'), findsOneWidget);
expect(find.byKey(const ValueKey('route_planner_save_button')), findsOneWidget);
expect(find.byKey(const ValueKey('route_planner_add_stop_button')), findsOneWidget);
expect(find.byKey(const ValueKey('route_planner_current_gps_button')), findsOneWidget);
expect(tester.takeException(), isNull);
});
}
testWidgets('RoutePlannerScreen handles adding stops and reversing', (tester) async {
await tester.binding.setSurfaceSize(const Size(412, 915));
await tester.pumpWidget(
ProviderScope(
overrides: [
currentUserProvider.overrideWith((ref) => const AuthUser(uid: 'alice', isAnonymous: false)),
isProSubscriberProvider.overrideWith((ref) => false),
],
child: MaterialApp(
theme: ThemeData.dark().copyWith(
extensions: [MotorSignalThemeColors.dark],
),
home: const RoutePlannerScreen(),
),
),
);
await tester.pumpAndSettle();
// Add stop 1
await tester.tap(find.byKey(const ValueKey('route_planner_add_stop_button')));
await tester.pumpAndSettle();
var fields = find.descendant(of: find.byType(AlertDialog), matching: find.byType(TextField));
await tester.enterText(fields.at(0), 'Start Point');
await tester.enterText(fields.at(1), '37.3861');
await tester.enterText(fields.at(2), '-122.2641');
await tester.tap(find.text('ADD'));
await tester.pumpAndSettle();
// Add stop 2
await tester.tap(find.byKey(const ValueKey('route_planner_add_stop_button')));
await tester.pumpAndSettle();
fields = find.descendant(of: find.byType(AlertDialog), matching: find.byType(TextField));
await tester.enterText(fields.at(0), 'End Point');
await tester.enterText(fields.at(1), '37.2500');
await tester.enterText(fields.at(2), '-122.1800');
await tester.tap(find.text('ADD'));
await tester.pumpAndSettle();
expect(find.text('Start Point'), findsOneWidget);
expect(find.text('End Point'), findsOneWidget);
expect(find.text('2/25 STOPS'), findsOneWidget);
expect(find.byKey(const ValueKey('route_planner_reverse_button')), findsOneWidget);
// Reverse stops
await tester.tap(find.byKey(const ValueKey('route_planner_reverse_button')));
await tester.pumpAndSettle();
expect(find.text('Start Point'), findsOneWidget);
expect(find.text('End Point'), findsOneWidget);
expect(tester.takeException(), isNull);
});
testWidgets('RoutePlannerScreen wide layout renders split-pane', (tester) async {
await tester.binding.setSurfaceSize(const Size(1024, 768));
await tester.pumpWidget(
ProviderScope(
overrides: [
currentUserProvider.overrideWith((ref) => const AuthUser(uid: 'alice', isAnonymous: false)),
isProSubscriberProvider.overrideWith((ref) => false),
],
child: MaterialApp(
theme: ThemeData.dark().copyWith(
extensions: [MotorSignalThemeColors.dark],
),
home: const RoutePlannerScreen(),
),
),
);
await tester.pumpAndSettle();
expect(find.byKey(const ValueKey('route_planner_map_expanded')), findsOneWidget);
expect(find.byKey(const ValueKey('route_planner_save_button')), findsOneWidget);
expect(find.text('ROUTE PLANNER'), findsOneWidget);
expect(tester.takeException(), isNull);
});
});
group('UI-2E RouteDetailScreen Responsive Matrix', () {
for (final size in testViewports) {
testWidgets('RouteDetailScreen renders without overflow at ${size.width}x${size.height}', (tester) async {
await tester.binding.setSurfaceSize(size);
final sampleRoute = createSampleRoute(attachedGroupRideId: 'group-ride-123');
await tester.pumpWidget(
ProviderScope(
overrides: [
currentUserProvider.overrideWith((ref) => const AuthUser(uid: 'alice', isAnonymous: false)),
routeByIdProvider('sample-route-1').overrideWith((ref) => Stream.value(sampleRoute)),
isProSubscriberProvider.overrideWith((ref) => false),
],
child: MaterialApp(
theme: ThemeData.dark().copyWith(
extensions: [MotorSignalThemeColors.dark],
),
home: const RouteDetailScreen(routeId: 'sample-route-1'),
),
),
);
await tester.pumpAndSettle();
expect(find.text('ROUTE DETAILS'), findsOneWidget);
expect(find.text('Skyline Ridge Cruise'), findsOneWidget);
expect(find.text('Scenic ridge route with twisties'), findsOneWidget);
expect(find.text('STRAIGHT-LINE DISTANCE'), findsOneWidget);
expect(find.text('WAYPOINTS'), findsOneWidget);
expect(find.text('3 STOPS'), findsOneWidget);
expect(find.byKey(const ValueKey('route_detail_edit_button')), findsOneWidget);
expect(find.byKey(const ValueKey('route_detail_delete_button')), findsOneWidget);
expect(find.byKey(const ValueKey('route_detail_view_attached_group_ride_button')), findsOneWidget);
expect(find.byKey(const ValueKey('route_detail_navigate_start_button')), findsOneWidget);
expect(tester.takeException(), isNull);
});
}
});
group('UI-2E NavigationHandoffService Modal', () {
testWidgets('Navigation handoff bottom sheet displays options with theme tokens', (tester) async {
await tester.binding.setSurfaceSize(const Size(390, 844));
await tester.pumpWidget(
MaterialApp(
theme: ThemeData.dark().copyWith(
extensions: [MotorSignalThemeColors.dark],
),
home: Scaffold(
body: Builder(
builder: (context) => ElevatedButton(
onPressed: () {
NavigationHandoffService.showHandoffSheet(
context: context,
latitude: 37.3861,
longitude: -122.2641,
displayName: 'Alice\'s Restaurant',
);
},
child: const Text('OPEN HANDOFF'),
),
),
),
),
);
await tester.pumpAndSettle();
// Open sheet
await tester.tap(find.text('OPEN HANDOFF'));
await tester.pumpAndSettle();
expect(find.text('NAVIGATION HANDOFF'), findsOneWidget);
expect(find.text('Alice\'s Restaurant'), findsOneWidget);
expect(find.byKey(const ValueKey('handoff_google_maps_tile')), findsOneWidget);
expect(find.byKey(const ValueKey('handoff_waze_tile')), findsOneWidget);
expect(find.byKey(const ValueKey('handoff_system_map_tile')), findsOneWidget);
expect(tester.takeException(), isNull);
});
});
}