Hamza/maps-saas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add vehicle customization, Arabic search normalization, and smooth movement interpolation

Browse Source
This commit is contained in:
Hamza-Ayed
2026-09-19 12:34:25 +03:00
parent 43ad2e0ad4
commit 55830beee8
16 changed files with 2295 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/siro_maps/lib/views/map/widgets/active_nav_hud_widget.dart
+105 -67
View File
@@ -7,6 +7,8 @@ class ActiveNavHudWidget extends StatelessWidget {
final VoidCallback onStopNavigation;
final VoidCallback onToggleMute;
final VoidCallback onRecenter;
final Function(int stepIndex)? onOverviewStep;
final VoidCallback? onOpenVehicleCustomizer;
const ActiveNavHudWidget({
super.key,
@@ -14,6 +16,8 @@ class ActiveNavHudWidget extends StatelessWidget {
required this.onStopNavigation,
required this.onToggleMute,
required this.onRecenter,
this.onOverviewStep,
this.onOpenVehicleCustomizer,
});
IconData _getManeuverIcon(int sign) {
@@ -51,84 +55,108 @@ class ActiveNavHudWidget extends StatelessWidget {
children: [
// ── TOP INSTRUCTION CARD ──
if (state.currentInstruction.isNotEmpty)
Container(
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: AppColors.appleBlue,
borderRadius: BorderRadius.circular(22),
boxShadow: const [
BoxShadow(
color: Color(0x2E007AFF),
blurRadius: 20,
offset: Offset(0, 6),
),
],
),
child: Row(
children: [
// Dynamic Maneuver Direction Icon
Container(
width: 48,
height: 48,
decoration: BoxDecoration(
color: Colors.white.withValues(alpha: 0.2),
borderRadius: BorderRadius.circular(14),
InkWell(
onTap: () => onOverviewStep?.call(state.currentStepIndex),
borderRadius: BorderRadius.circular(22),
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: AppColors.appleBlue,
borderRadius: BorderRadius.circular(22),
boxShadow: const [
BoxShadow(
color: Color(0x2E007AFF),
blurRadius: 20,
offset: Offset(0, 6),
),
child: Center(
child: Icon(
_getManeuverIcon(state.currentManeuverModifier),
color: Colors.white,
size: 28,
],
),
child: Row(
children: [
// Dynamic Maneuver Direction Icon
Container(
width: 48,
height: 48,
decoration: BoxDecoration(
color: Colors.white.withValues(alpha: 0.2),
borderRadius: BorderRadius.circular(14),
),
child: Center(
child: Icon(
_getManeuverIcon(state.currentManeuverModifier),
color: Colors.white,
size: 28,
),
),
),
),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (state.distanceToNextStep > 0)
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (state.distanceToNextStep > 0)
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'بعد ${state.distanceToNextStep.round()} متر',
style: const TextStyle(
fontFamily: '.SF Pro Text',
fontSize: 12,
fontWeight: FontWeight.w600,
color: Colors.white70,
),
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 1),
decoration: BoxDecoration(
color: Colors.white.withValues(alpha: 0.2),
borderRadius: BorderRadius.circular(8),
),
child: const Text(
'معاينة 🔍',
style: TextStyle(
fontSize: 9,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
],
),
Text(
'بعد ${state.distanceToNextStep.round()} متر',
state.currentInstruction,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontFamily: '.SF Pro Text',
fontSize: 12,
fontWeight: FontWeight.w600,
color: Colors.white70,
fontSize: 15,
fontWeight: FontWeight.w700,
color: Colors.white,
height: 1.3,
),
),
Text(
state.currentInstruction,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontFamily: '.SF Pro Text',
fontSize: 15,
fontWeight: FontWeight.w700,
color: Colors.white,
height: 1.3,
),
),
if (state.nextInstruction.isNotEmpty)
Padding(
padding: const EdgeInsets.only(top: 4),
child: Text(
'ثم ${state.nextInstruction}',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontFamily: '.SF Pro Text',
fontSize: 11,
fontWeight: FontWeight.w500,
color: Colors.white60,
if (state.nextInstruction.isNotEmpty)
Padding(
padding: const EdgeInsets.only(top: 4),
child: Text(
'ثم ${state.nextInstruction}',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontFamily: '.SF Pro Text',
fontSize: 11,
fontWeight: FontWeight.w500,
color: Colors.white60,
),
),
),
),
],
],
),
),
),
],
],
),
),
),
@@ -252,6 +280,16 @@ class ActiveNavHudWidget extends StatelessWidget {
size: 24,
),
),
// Vehicle Customizer
if (onOpenVehicleCustomizer != null)
IconButton(
onPressed: onOpenVehicleCustomizer,
icon: const Icon(
Icons.directions_car_filled_rounded,
color: AppColors.appleBlue,
size: 22,
),
),
// Recenter Map
IconButton(
onPressed: onRecenter,
apps/siro_maps/lib/views/map/widgets/layer_selector_sheet.dart
+35 -1
View File
@@ -5,11 +5,13 @@ import '../../../../logic/cubits/navigation/navigation_state.dart';
class LayerSelectorSheet extends StatelessWidget {
final MapThemeType currentTheme;
final ValueChanged<MapThemeType> onThemeChanged;
final VoidCallback? onOpenVehicleCustomizer;
const LayerSelectorSheet({
super.key,
required this.currentTheme,
required this.onThemeChanged,
this.onOpenVehicleCustomizer,
});
@override
@@ -33,7 +35,7 @@ class LayerSelectorSheet extends StatelessWidget {
),
const SizedBox(height: 18),
const Text(
'طبقات الخريطة السيادية',
'طبقات ومظهر الخريطة السيادية',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w700,
@@ -64,6 +66,38 @@ class LayerSelectorSheet extends StatelessWidget {
),
],
),
if (onOpenVehicleCustomizer != null) ...[
const SizedBox(height: 20),
const Divider(height: 1, color: AppColors.borderSubtle),
const SizedBox(height: 16),
ListTile(
onTap: onOpenVehicleCustomizer,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
tileColor: AppColors.surfaceMuted,
leading: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
color: AppColors.appleBlue.withValues(alpha: 0.12),
borderRadius: BorderRadius.circular(12),
),
child: const Icon(Icons.directions_car_filled_rounded, color: AppColors.appleBlue, size: 22),
),
title: const Text(
'تخصيص أيقونة ولون المركبة',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w700,
color: AppColors.textPrimary,
),
),
subtitle: const Text(
'تغيير النمط، اللون، وتكبير الحجم على الخريطة',
style: TextStyle(fontSize: 11, color: AppColors.textSecondary),
),
trailing: const Icon(Icons.arrow_forward_ios_rounded, size: 14, color: AppColors.textMuted),
),
],
],
),
);
apps/siro_maps/lib/views/map/widgets/search_bar_widget.dart
+17 -1
View File
@@ -4,15 +4,21 @@ import '../../../../core/constants/app_colors.dart';
class SearchBarWidget extends StatelessWidget {
final TextEditingController controller;
final ValueChanged<String> onChanged;
final ValueChanged<String>? onSubmitted;
final VoidCallback onClear;
final VoidCallback onMenuTap;
final bool isSearching;
final FocusNode? focusNode;
const SearchBarWidget({
super.key,
required this.controller,
required this.onChanged,
this.onSubmitted,
required this.onClear,
required this.onMenuTap,
this.isSearching = false,
this.focusNode,
});
@override
@@ -34,12 +40,22 @@ class SearchBarWidget extends StatelessWidget {
child: Row(
children: [
const SizedBox(width: 14),
const Icon(Icons.search_rounded, color: AppColors.appleBlue, size: 22),
if (isSearching)
const SizedBox(
width: 20,
height: 20,
child: CircularProgressIndicator(strokeWidth: 2, color: AppColors.appleBlue),
)
else
const Icon(Icons.search_rounded, color: AppColors.appleBlue, size: 22),
const SizedBox(width: 10),
Expanded(
child: TextField(
controller: controller,
focusNode: focusNode,
onChanged: onChanged,
onSubmitted: onSubmitted,
textInputAction: TextInputAction.search,
textDirection: TextDirection.rtl,
style: const TextStyle(
fontSize: 14,
apps/siro_maps/lib/views/map/widgets/vehicle_customizer_sheet.dart
+330
View File
@@ -0,0 +1,330 @@
import 'package:flutter/material.dart';
import '../../../../core/constants/app_colors.dart';
import '../../../../core/services/vehicle_icon_generator.dart';
import '../../../../logic/cubits/navigation/navigation_cubit.dart';
import '../../../../logic/cubits/navigation/navigation_state.dart';
class VehicleCustomizerSheet extends StatelessWidget {
final NavigationCubit cubit;
final NavigationState state;
const VehicleCustomizerSheet({
super.key,
required this.cubit,
required this.state,
});
static const List<Map<String, dynamic>> _scales = [
{'scale': 1.4, 'label': 'عادي'},
{'scale': 1.8, 'label': 'كبير (موصى به)'},
{'scale': 2.2, 'label': 'فائق الوضوح'},
{'scale': 2.6, 'label': 'ضخم'},
];
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.fromLTRB(20, 16, 20, 36),
decoration: const BoxDecoration(
color: AppColors.pureWhite,
borderRadius: BorderRadius.vertical(top: Radius.circular(28)),
boxShadow: [
BoxShadow(
color: Color(0x22000000),
blurRadius: 24,
offset: Offset(0, -6),
),
],
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// Drag Handle
Center(
child: Container(
width: 40,
height: 4,
decoration: BoxDecoration(
color: AppColors.borderGlass,
borderRadius: BorderRadius.circular(2),
),
),
),
const SizedBox(height: 16),
// Sheet Header
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Row(
children: [
Icon(Icons.tune_rounded, color: AppColors.appleBlue, size: 22),
SizedBox(width: 8),
Text(
'تخصيص أيقونة المركبة والملاحة',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w700,
color: AppColors.textPrimary,
),
),
],
),
IconButton(
icon: const Icon(Icons.close_rounded, size: 20, color: AppColors.textMuted),
onPressed: () => Navigator.of(context).pop(),
),
],
),
const SizedBox(height: 16),
// ── 1. LIVE INTERACTIVE VEHICLE PREVIEW CARD ──
Container(
height: 130,
decoration: BoxDecoration(
gradient: const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xFF1E293B), Color(0xFF0F172A)],
),
borderRadius: BorderRadius.circular(20),
border: Border.all(color: Colors.white.withValues(alpha: 0.1)),
),
child: Stack(
alignment: Alignment.center,
children: [
// Simulated Asphalt Perspective Road lines
Positioned.fill(
child: CustomPaint(
painter: _RoadPreviewPainter(),
),
),
// Rendered Vehicle Icon
FutureBuilder(
future: VehicleIconGenerator.generateVehicleIconBytes(
styleId: state.selectedVehicleStyle,
primaryColor: Color(state.selectedVehicleColor),
size: 140,
),
builder: (context, snapshot) {
if (snapshot.hasData && snapshot.data != null) {
final scaleFactor = (state.vehicleScale / 1.8).clamp(0.7, 1.4);
return Transform.scale(
scale: scaleFactor,
child: Image.memory(
snapshot.data!,
width: 85,
height: 85,
filterQuality: FilterQuality.high,
),
);
}
return const SizedBox(
width: 40,
height: 40,
child: CircularProgressIndicator(strokeWidth: 2, color: Colors.white70),
);
},
),
// Bottom badge
Positioned(
bottom: 8,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 3),
decoration: BoxDecoration(
color: Colors.black.withValues(alpha: 0.5),
borderRadius: BorderRadius.circular(12),
),
child: Text(
'معاينة حية على الخريطة • زاوية 45°',
style: TextStyle(
fontSize: 10,
color: Colors.white.withValues(alpha: 0.8),
fontWeight: FontWeight.w500,
),
),
),
),
],
),
),
const SizedBox(height: 20),
// ── 2. VEHICLE MODEL STYLE SELECTOR ──
const Text(
'نمط المركبة',
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w700,
color: AppColors.textPrimary,
),
),
const SizedBox(height: 10),
Row(
children: VehicleIconGenerator.availableStyles.map((style) {
final isSelected = state.selectedVehicleStyle == style.id;
return Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 4),
child: InkWell(
onTap: () => cubit.setVehicleStyle(style.id),
borderRadius: BorderRadius.circular(14),
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
padding: const EdgeInsets.symmetric(vertical: 10),
decoration: BoxDecoration(
color: isSelected
? AppColors.appleBlue.withValues(alpha: 0.1)
: AppColors.surfaceMuted,
borderRadius: BorderRadius.circular(14),
border: Border.all(
color: isSelected ? AppColors.appleBlue : AppColors.borderSubtle,
width: isSelected ? 2 : 1,
),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
style.icon,
size: 24,
color: isSelected ? AppColors.appleBlue : AppColors.textSecondary,
),
const SizedBox(height: 4),
Text(
style.labelAr,
style: TextStyle(
fontSize: 10.5,
fontWeight: isSelected ? FontWeight.w700 : FontWeight.w500,
color: isSelected ? AppColors.appleBlue : AppColors.textPrimary,
),
),
],
),
),
),
),
);
}).toList(),
),
const SizedBox(height: 20),
// ── 3. VEHICLE COLOR SELECTOR ──
const Text(
'لون المركبة',
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w700,
color: AppColors.textPrimary,
),
),
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: VehicleIconGenerator.availableColors.map((colorOpt) {
final isSelected = state.selectedVehicleColor == colorOpt.colorValue;
return InkWell(
onTap: () => cubit.setVehicleColor(colorOpt.colorValue),
borderRadius: BorderRadius.circular(20),
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
width: 42,
height: 42,
decoration: BoxDecoration(
color: colorOpt.color,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: colorOpt.color.withValues(alpha: 0.35),
blurRadius: 8,
offset: const Offset(0, 3),
),
],
border: Border.all(
color: Colors.white,
width: isSelected ? 3.5 : 2,
),
),
child: isSelected
? const Center(
child: Icon(Icons.check_rounded, color: Colors.white, size: 22),
)
: null,
),
);
}).toList(),
),
const SizedBox(height: 20),
// ── 4. VEHICLE ICON SIZE SELECTOR ──
const Text(
'حجم أيقونة المركبة',
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w700,
color: AppColors.textPrimary,
),
),
const SizedBox(height: 10),
Wrap(
spacing: 8,
children: _scales.map((item) {
final scale = item['scale'] as double;
final label = item['label'] as String;
final isSelected = (state.vehicleScale - scale).abs() < 0.15;
return ChoiceChip(
label: Text(label),
selected: isSelected,
selectedColor: AppColors.appleBlue.withValues(alpha: 0.15),
backgroundColor: AppColors.surfaceMuted,
labelStyle: TextStyle(
fontSize: 11,
fontWeight: isSelected ? FontWeight.w700 : FontWeight.w500,
color: isSelected ? AppColors.appleBlue : AppColors.textPrimary,
),
side: BorderSide(
color: isSelected ? AppColors.appleBlue : AppColors.borderSubtle,
),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
onSelected: (_) => cubit.setVehicleScale(scale),
);
}).toList(),
),
],
),
);
}
}
class _RoadPreviewPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = Colors.white.withValues(alpha: 0.18)
..strokeWidth = 2.0;
// Center dashed divider
double startY = 10;
while (startY < size.height) {
canvas.drawLine(
Offset(size.width / 2, startY),
Offset(size.width / 2, startY + 12),
paint,
);
startY += 22;
}
// Lane side markers
final sidePaint = Paint()
..color = Colors.white.withValues(alpha: 0.08)
..strokeWidth = 1.5;
canvas.drawLine(Offset(size.width * 0.22, 0), Offset(size.width * 0.22, size.height), sidePaint);
canvas.drawLine(Offset(size.width * 0.78, 0), Offset(size.width * 0.78, size.height), sidePaint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}