feat: add vehicle customization, Arabic search normalization, and smooth movement interpolation
This commit is contained in:
Hamza-Ayed
@@ -13,6 +13,7 @@ import 'widgets/active_nav_hud_widget.dart';
|
||||
import 'widgets/layer_selector_sheet.dart';
|
||||
import 'widgets/report_hazard_sheet.dart';
|
||||
import 'widgets/add_place_sheet.dart';
|
||||
import 'widgets/vehicle_customizer_sheet.dart';
|
||||
|
||||
class MapView extends StatefulWidget {
|
||||
const MapView({super.key});
|
||||
@@ -23,11 +24,16 @@ class MapView extends StatefulWidget {
|
||||
|
||||
class _MapViewState extends State<MapView> {
|
||||
final TextEditingController _searchController = TextEditingController();
|
||||
final FocusNode _searchFocusNode = FocusNode();
|
||||
bool _isSearchFocused = false;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
print("🚀 [MapView] initState: MapView mounted.");
|
||||
_searchFocusNode.addListener(() {
|
||||
if (mounted) setState(() => _isSearchFocused = _searchFocusNode.hasFocus);
|
||||
});
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
if (mounted) {
|
||||
print("📌 [MapView] PostFrameCallback: Triggering relockCameraToUser");
|
||||
@@ -40,6 +46,7 @@ class _MapViewState extends State<MapView> {
|
||||
@override
|
||||
void dispose() {
|
||||
_searchController.dispose();
|
||||
_searchFocusNode.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@@ -47,6 +54,18 @@ class _MapViewState extends State<MapView> {
|
||||
cubit.relockCameraToUser();
|
||||
}
|
||||
|
||||
void _showVehicleCustomizer(BuildContext context, NavigationCubit cubit, NavigationState state) {
|
||||
showModalBottomSheet(
|
||||
context: context,
|
||||
isScrollControlled: true,
|
||||
backgroundColor: Colors.transparent,
|
||||
builder: (_) => VehicleCustomizerSheet(
|
||||
cubit: cubit,
|
||||
state: cubit.state,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _showLayerSelector(BuildContext context, NavigationCubit cubit, MapThemeType current) {
|
||||
showModalBottomSheet(
|
||||
context: context,
|
||||
@@ -57,11 +76,15 @@ class _MapViewState extends State<MapView> {
|
||||
cubit.setMapTheme(theme);
|
||||
Navigator.of(context).pop();
|
||||
},
|
||||
onOpenVehicleCustomizer: () {
|
||||
Navigator.of(context).pop();
|
||||
_showVehicleCustomizer(context, cubit, cubit.state);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _showHazardSheet(BuildContext context, NavigationCubit cubit) {
|
||||
void _showHazardSheet(BuildContext context, NavigationCubit cubit, {LatLng? initialLocation}) {
|
||||
showModalBottomSheet(
|
||||
context: context,
|
||||
isScrollControlled: true,
|
||||
@@ -69,7 +92,12 @@ class _MapViewState extends State<MapView> {
|
||||
builder: (_) => ReportHazardSheet(
|
||||
onReport: (type, title, desc) async {
|
||||
final messenger = ScaffoldMessenger.of(context);
|
||||
final ok = await cubit.reportHazard(type: type, title: title, description: desc);
|
||||
final ok = await cubit.reportHazard(
|
||||
type: type,
|
||||
title: title,
|
||||
description: desc,
|
||||
position: initialLocation,
|
||||
);
|
||||
if (mounted && ok) {
|
||||
messenger.showSnackBar(
|
||||
const SnackBar(
|
||||
@@ -83,10 +111,14 @@ class _MapViewState extends State<MapView> {
|
||||
}
|
||||
},
|
||||
),
|
||||
);
|
||||
).whenComplete(() {
|
||||
if (cubit.state.isSelectingLocationOnMap) {
|
||||
cubit.cancelLocationPicking();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
void _showAddPlaceSheet(BuildContext context, NavigationCubit cubit) {
|
||||
void _showAddPlaceSheet(BuildContext context, NavigationCubit cubit, {LatLng? initialLocation}) {
|
||||
showModalBottomSheet(
|
||||
context: context,
|
||||
isScrollControlled: true,
|
||||
@@ -94,7 +126,11 @@ class _MapViewState extends State<MapView> {
|
||||
builder: (_) => AddPlaceSheet(
|
||||
onSubmit: (name, cat) async {
|
||||
final messenger = ScaffoldMessenger.of(context);
|
||||
final ok = await cubit.submitPlace(name, cat);
|
||||
final ok = await cubit.submitPlace(
|
||||
name,
|
||||
cat,
|
||||
position: initialLocation,
|
||||
);
|
||||
if (mounted) {
|
||||
messenger.showSnackBar(
|
||||
SnackBar(
|
||||
@@ -108,7 +144,11 @@ class _MapViewState extends State<MapView> {
|
||||
}
|
||||
},
|
||||
),
|
||||
);
|
||||
).whenComplete(() {
|
||||
if (cubit.state.isSelectingLocationOnMap) {
|
||||
cubit.cancelLocationPicking();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
@@ -129,8 +169,8 @@ class _MapViewState extends State<MapView> {
|
||||
);
|
||||
}
|
||||
|
||||
// Auto-center camera when location is updated and camera is locked (only when style is loaded)
|
||||
if (state.isCameraLocked && state.myLocation != null && cubit.mapController != null && cubit.isMapStyleLoaded) {
|
||||
// Auto-center camera only when idle and locked (NEVER during active navigation or route preview, as navigation cubit controls the 3D tilted camera)
|
||||
if (state.isCameraLocked && !state.isNavigating && state.status != NavigationStatus.routePreview && state.myLocation != null && cubit.mapController != null && cubit.isMapStyleLoaded) {
|
||||
cubit.mapController!.animateCamera(
|
||||
CameraUpdate.newLatLngZoom(state.myLocation!, 16.5),
|
||||
);
|
||||
@@ -227,7 +267,10 @@ class _MapViewState extends State<MapView> {
|
||||
),
|
||||
SearchBarWidget(
|
||||
controller: _searchController,
|
||||
focusNode: _searchFocusNode,
|
||||
isSearching: state.isSearching,
|
||||
onChanged: cubit.onSearchChanged,
|
||||
onSubmitted: (q) => cubit.searchImmediately(q),
|
||||
onClear: () {
|
||||
_searchController.clear();
|
||||
cubit.clearSearch();
|
||||
@@ -238,7 +281,7 @@ class _MapViewState extends State<MapView> {
|
||||
ExplorePanelWidget(
|
||||
onCategorySelected: (q) {
|
||||
_searchController.text = q;
|
||||
cubit.onSearchChanged(q);
|
||||
cubit.searchImmediately(q);
|
||||
},
|
||||
),
|
||||
],
|
||||
@@ -247,8 +290,11 @@ class _MapViewState extends State<MapView> {
|
||||
),
|
||||
),
|
||||
|
||||
// ── 3. SEARCH RESULTS DROPDOWN ──
|
||||
if (state.searchResults.isNotEmpty && !state.isNavigating)
|
||||
// ── 3. SEARCH RESULTS & RECENT HISTORY DROPDOWN ──
|
||||
if (!state.isNavigating &&
|
||||
(state.searchResults.isNotEmpty ||
|
||||
(_isSearchFocused && _searchController.text.trim().isEmpty && state.recentSearches.isNotEmpty) ||
|
||||
(_isSearchFocused && _searchController.text.trim().length >= 2 && !state.isSearching && state.searchResults.isEmpty)))
|
||||
Positioned(
|
||||
top: 130,
|
||||
left: 16,
|
||||
@@ -270,157 +316,252 @@ class _MapViewState extends State<MapView> {
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
const Text(
|
||||
'الوجهات المطابقة',
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
),
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.appleBlue.withValues(alpha: 0.1),
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
child: Text(
|
||||
'${state.searchResults.length} نتائج',
|
||||
style: const TextStyle(
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.appleBlue,
|
||||
if (state.searchResults.isNotEmpty) ...[
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
const Text(
|
||||
'الوجهات المطابقة',
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const Divider(height: 1, color: AppColors.borderSubtle),
|
||||
Flexible(
|
||||
child: ListView.separated(
|
||||
shrinkWrap: true,
|
||||
padding: const EdgeInsets.symmetric(vertical: 4),
|
||||
itemCount: state.searchResults.length,
|
||||
separatorBuilder: (_, __) =>
|
||||
const Divider(height: 1, color: AppColors.borderSubtle),
|
||||
itemBuilder: (context, index) {
|
||||
final place = state.searchResults[index];
|
||||
final iconData = _getCategoryIcon(place.category);
|
||||
final iconColor = _getCategoryColor(place.category);
|
||||
final categoryAr = _getCategoryArabicName(place.category);
|
||||
|
||||
double? distM;
|
||||
if (state.myLocation != null) {
|
||||
distM = cubit.locationService.calculateDistance(
|
||||
state.myLocation!,
|
||||
LatLng(place.latitude, place.longitude),
|
||||
);
|
||||
}
|
||||
final distStr = distM != null
|
||||
? (distM > 1000
|
||||
? '${(distM / 1000).toStringAsFixed(1)} كم'
|
||||
: '${distM.round()} م')
|
||||
: null;
|
||||
|
||||
return ListTile(
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 2),
|
||||
leading: Container(
|
||||
width: 38,
|
||||
height: 38,
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
|
||||
decoration: BoxDecoration(
|
||||
color: iconColor.withValues(alpha: 0.12),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
color: AppColors.appleBlue.withValues(alpha: 0.1),
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
child: Text(
|
||||
'${state.searchResults.length} نتائج',
|
||||
style: const TextStyle(
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.appleBlue,
|
||||
),
|
||||
),
|
||||
child: Icon(iconData, color: iconColor, size: 20),
|
||||
),
|
||||
title: Text(
|
||||
place.name,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
],
|
||||
),
|
||||
),
|
||||
const Divider(height: 1, color: AppColors.borderSubtle),
|
||||
Flexible(
|
||||
child: ListView.separated(
|
||||
shrinkWrap: true,
|
||||
padding: const EdgeInsets.symmetric(vertical: 4),
|
||||
itemCount: state.searchResults.length,
|
||||
separatorBuilder: (_, __) =>
|
||||
const Divider(height: 1, color: AppColors.borderSubtle),
|
||||
itemBuilder: (context, index) {
|
||||
final place = state.searchResults[index];
|
||||
final iconData = _getCategoryIcon(place.category);
|
||||
final iconColor = _getCategoryColor(place.category);
|
||||
final categoryAr = _getCategoryArabicName(place.category);
|
||||
|
||||
double? distM;
|
||||
if (state.myLocation != null) {
|
||||
distM = cubit.locationService.calculateDistance(
|
||||
state.myLocation!,
|
||||
LatLng(place.latitude, place.longitude),
|
||||
);
|
||||
}
|
||||
final distStr = distM != null
|
||||
? (distM > 1000
|
||||
? '${(distM / 1000).toStringAsFixed(1)} كم'
|
||||
: '${distM.round()} م')
|
||||
: null;
|
||||
|
||||
return ListTile(
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 2),
|
||||
leading: Container(
|
||||
width: 38,
|
||||
height: 38,
|
||||
decoration: BoxDecoration(
|
||||
color: iconColor.withValues(alpha: 0.12),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Icon(iconData, color: iconColor, size: 20),
|
||||
),
|
||||
title: Text(
|
||||
place.name,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
),
|
||||
subtitle: Row(
|
||||
children: [
|
||||
Text(
|
||||
categoryAr,
|
||||
style: TextStyle(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: iconColor,
|
||||
),
|
||||
),
|
||||
if (place.address != null && place.address!.isNotEmpty) ...[
|
||||
const Text(' • ', style: TextStyle(color: AppColors.textMuted)),
|
||||
Expanded(
|
||||
child: Text(
|
||||
place.address!,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
fontSize: 11,
|
||||
color: AppColors.textSecondary,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
trailing: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
if (distStr != null)
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.surfaceMuted,
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
),
|
||||
child: Text(
|
||||
distStr,
|
||||
style: const TextStyle(
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
),
|
||||
),
|
||||
if (place.elevationMeters > 0)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 2),
|
||||
child: Text(
|
||||
'${place.elevationMeters.toInt()} م',
|
||||
style: const TextStyle(
|
||||
fontSize: 9,
|
||||
color: AppColors.textMuted,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
onTap: () {
|
||||
cubit.saveRecentSearch(place.name);
|
||||
_searchController.clear();
|
||||
cubit.clearSearch();
|
||||
_searchFocusNode.unfocus();
|
||||
cubit.calculateRouteTo(
|
||||
LatLng(place.latitude, place.longitude),
|
||||
title: place.name,
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
] else if (_isSearchFocused && _searchController.text.trim().isEmpty && state.recentSearches.isNotEmpty) ...[
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
const Row(
|
||||
children: [
|
||||
Icon(Icons.history_rounded, size: 16, color: AppColors.appleBlue),
|
||||
SizedBox(width: 6),
|
||||
Text(
|
||||
'عمليات البحث الأخيرة',
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
GestureDetector(
|
||||
onTap: cubit.clearRecentSearches,
|
||||
child: const Text(
|
||||
'مسح السجل',
|
||||
style: TextStyle(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.coralDanger,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const Divider(height: 1, color: AppColors.borderSubtle),
|
||||
Flexible(
|
||||
child: ListView.separated(
|
||||
shrinkWrap: true,
|
||||
padding: const EdgeInsets.symmetric(vertical: 4),
|
||||
itemCount: state.recentSearches.length,
|
||||
separatorBuilder: (_, __) =>
|
||||
const Divider(height: 1, color: AppColors.borderSubtle),
|
||||
itemBuilder: (context, index) {
|
||||
final query = state.recentSearches[index];
|
||||
return ListTile(
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 0),
|
||||
leading: const Icon(Icons.access_time_rounded, size: 18, color: AppColors.textMuted),
|
||||
title: Text(
|
||||
query,
|
||||
style: const TextStyle(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
),
|
||||
trailing: const Icon(Icons.north_west_rounded, size: 14, color: AppColors.textMuted),
|
||||
onTap: () {
|
||||
_searchController.text = query;
|
||||
cubit.searchImmediately(query);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
] else if (_isSearchFocused && _searchController.text.trim().length >= 2 && !state.isSearching) ...[
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(20),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
const Icon(Icons.search_off_rounded, size: 36, color: AppColors.textMuted),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'لا توجد نتائج مطابقة لـ "${_searchController.text.trim()}"',
|
||||
style: const TextStyle(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
),
|
||||
subtitle: Row(
|
||||
children: [
|
||||
Text(
|
||||
categoryAr,
|
||||
style: TextStyle(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: iconColor,
|
||||
),
|
||||
),
|
||||
if (place.address != null && place.address!.isNotEmpty) ...[
|
||||
const Text(' • ', style: TextStyle(color: AppColors.textMuted)),
|
||||
Expanded(
|
||||
child: Text(
|
||||
place.address!,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
fontSize: 11,
|
||||
color: AppColors.textSecondary,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
const SizedBox(height: 4),
|
||||
const Text(
|
||||
'تأكد من كتابة الاسم بدقة أو جرب فئات مثل: مطعم، صيدلية، وقود',
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(
|
||||
fontSize: 11,
|
||||
color: AppColors.textMuted,
|
||||
),
|
||||
),
|
||||
trailing: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
if (distStr != null)
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.surfaceMuted,
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
),
|
||||
child: Text(
|
||||
distStr,
|
||||
style: const TextStyle(
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
),
|
||||
),
|
||||
if (place.elevationMeters > 0)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 2),
|
||||
child: Text(
|
||||
'${place.elevationMeters.toInt()} م',
|
||||
style: const TextStyle(
|
||||
fontSize: 9,
|
||||
color: AppColors.textMuted,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
onTap: () {
|
||||
_searchController.clear();
|
||||
cubit.clearSearch();
|
||||
FocusScope.of(context).unfocus();
|
||||
cubit.calculateRouteTo(
|
||||
LatLng(place.latitude, place.longitude),
|
||||
title: place.name,
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
@@ -450,31 +591,82 @@ class _MapViewState extends State<MapView> {
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Destination Header & Close Button
|
||||
// Dual Origin (A) & Destination (B) Header with close button
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Visual Pins (Green A -> Red B with connector)
|
||||
Column(
|
||||
children: [
|
||||
Container(
|
||||
width: 22,
|
||||
height: 22,
|
||||
decoration: const BoxDecoration(
|
||||
color: AppColors.tacticalEmerald,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: const Center(
|
||||
child: Text(
|
||||
'أ',
|
||||
style: TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Container(
|
||||
width: 2,
|
||||
height: 18,
|
||||
margin: const EdgeInsets.symmetric(vertical: 2),
|
||||
color: AppColors.borderSubtle,
|
||||
),
|
||||
Container(
|
||||
width: 22,
|
||||
height: 22,
|
||||
decoration: const BoxDecoration(
|
||||
color: AppColors.coralDanger,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: const Center(
|
||||
child: Text(
|
||||
'ب',
|
||||
style: TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
// Location Titles & Metrics
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
state.destinationTitle,
|
||||
state.originTitle.isNotEmpty ? state.originTitle : 'موقعي الحالي',
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
fontSize: 17,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColors.textPrimary,
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textSecondary,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
const SizedBox(height: 14),
|
||||
Text(
|
||||
'${state.routes.length > 1 ? "يتوفر مساران • " : ""}${state.currentRoute!.formattedDuration} (${state.currentRoute!.formattedDistance}) • وصول ${state.arrivalTime}',
|
||||
state.destinationTitle.isNotEmpty ? state.destinationTitle : 'الوجهة المحددة',
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.tacticalEmerald,
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w800,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
),
|
||||
],
|
||||
@@ -486,6 +678,37 @@ class _MapViewState extends State<MapView> {
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
// ETA, Distance & Timing Badge
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.tacticalEmerald.withValues(alpha: 0.1),
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(
|
||||
state.currentRoute!.formattedDuration,
|
||||
style: const TextStyle(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w800,
|
||||
color: AppColors.tacticalEmerald,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
'• ${state.currentRoute!.formattedDistance} • وصول ${state.arrivalTime}',
|
||||
style: const TextStyle(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
// Multi-Route Options Selector (Route 1 vs Route 2)
|
||||
if (state.routes.length > 1) ...[
|
||||
@@ -695,12 +918,203 @@ class _MapViewState extends State<MapView> {
|
||||
onStopNavigation: cubit.stopNavigation,
|
||||
onToggleMute: cubit.toggleMute,
|
||||
onRecenter: () => _recenterOnUser(cubit, state),
|
||||
onOverviewStep: (idx) => cubit.overviewStepBounding(idx),
|
||||
onOpenVehicleCustomizer: () => _showVehicleCustomizer(context, cubit, state),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// ── 5b. INTERACTIVE LOCATION PIN PICKER HUD (Add Place & Hazard) ──
|
||||
if (state.isSelectingLocationOnMap) ...[
|
||||
// Centered Floating Target Pin
|
||||
IgnorePointer(
|
||||
child: Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(bottom: 38),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Container(
|
||||
padding: const EdgeInsets.all(10),
|
||||
decoration: BoxDecoration(
|
||||
color: state.activePickerMode == 'place'
|
||||
? AppColors.appleBlue
|
||||
: AppColors.coralDanger,
|
||||
shape: BoxShape.circle,
|
||||
boxShadow: const [
|
||||
BoxShadow(
|
||||
color: Color(0x33000000),
|
||||
blurRadius: 16,
|
||||
offset: Offset(0, 6),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Icon(
|
||||
state.activePickerMode == 'place'
|
||||
? Icons.add_location_alt_rounded
|
||||
: Icons.warning_amber_rounded,
|
||||
size: 28,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
Container(
|
||||
width: 3,
|
||||
height: 14,
|
||||
color: state.activePickerMode == 'place'
|
||||
? AppColors.appleBlue
|
||||
: AppColors.coralDanger,
|
||||
),
|
||||
Container(
|
||||
width: 8,
|
||||
height: 8,
|
||||
decoration: const BoxDecoration(
|
||||
color: Colors.black54,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Bottom Confirmation Card
|
||||
Positioned(
|
||||
bottom: 24,
|
||||
left: 16,
|
||||
right: 16,
|
||||
child: SafeArea(
|
||||
top: false,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(18),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.pureWhite,
|
||||
borderRadius: BorderRadius.circular(24),
|
||||
boxShadow: const [
|
||||
BoxShadow(
|
||||
color: Color(0x29000000),
|
||||
blurRadius: 24,
|
||||
offset: Offset(0, 8),
|
||||
),
|
||||
],
|
||||
border: Border.all(color: AppColors.borderSubtle),
|
||||
),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Container(
|
||||
padding: const EdgeInsets.all(8),
|
||||
decoration: BoxDecoration(
|
||||
color: (state.activePickerMode == 'place'
|
||||
? AppColors.appleBlue
|
||||
: AppColors.coralDanger)
|
||||
.withValues(alpha: 0.12),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Icon(
|
||||
state.activePickerMode == 'place'
|
||||
? Icons.place_rounded
|
||||
: Icons.report_problem_rounded,
|
||||
size: 20,
|
||||
color: state.activePickerMode == 'place'
|
||||
? AppColors.appleBlue
|
||||
: AppColors.coralDanger,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
state.activePickerMode == 'place'
|
||||
? 'تحديد موقع المنشأة على الخريطة'
|
||||
: 'تحديد موقع البلاغ أو الخطر على الخريطة',
|
||||
style: const TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
'إحداثيات: ${state.pickedLocation?.latitude.toStringAsFixed(5) ?? '--'} ، ${state.pickedLocation?.longitude.toStringAsFixed(5) ?? '--'}',
|
||||
style: const TextStyle(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: AppColors.textSecondary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: SizedBox(
|
||||
height: 48,
|
||||
child: ElevatedButton(
|
||||
onPressed: () {
|
||||
final loc = state.pickedLocation;
|
||||
if (state.activePickerMode == 'place') {
|
||||
_showAddPlaceSheet(context, cubit, initialLocation: loc);
|
||||
} else {
|
||||
_showHazardSheet(context, cubit, initialLocation: loc);
|
||||
}
|
||||
},
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: state.activePickerMode == 'place'
|
||||
? AppColors.appleBlue
|
||||
: AppColors.coralDanger,
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
|
||||
elevation: 0,
|
||||
),
|
||||
child: const Text(
|
||||
'تأكيد الموقع ومتابعة التفاصيل',
|
||||
style: TextStyle(
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.w700,
|
||||
fontSize: 13,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
SizedBox(
|
||||
height: 48,
|
||||
child: TextButton(
|
||||
onPressed: cubit.cancelLocationPicking,
|
||||
style: TextButton.styleFrom(
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
|
||||
backgroundColor: AppColors.surfaceMuted,
|
||||
),
|
||||
child: const Text(
|
||||
'إلغاء',
|
||||
style: TextStyle(
|
||||
color: AppColors.textSecondary,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 13,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
|
||||
// ── 6. FLOATING ACTION BUTTONS (Right side, anchored to bottom) ──
|
||||
if (!state.isNavigating && state.status != NavigationStatus.routePreview)
|
||||
if (!state.isNavigating && state.status != NavigationStatus.routePreview && !state.isSelectingLocationOnMap)
|
||||
Positioned(
|
||||
right: 16,
|
||||
bottom: 28,
|
||||
@@ -722,7 +1136,7 @@ class _MapViewState extends State<MapView> {
|
||||
icon: Icons.add_location_alt_rounded,
|
||||
color: AppColors.appleBlue,
|
||||
tooltip: 'إضافة مكان',
|
||||
onTap: () => _showAddPlaceSheet(context, cubit),
|
||||
onTap: () => cubit.startLocationPicking('place'),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
// Report Hazard Button
|
||||
@@ -730,7 +1144,7 @@ class _MapViewState extends State<MapView> {
|
||||
icon: Icons.warning_amber_rounded,
|
||||
color: AppColors.sovereignGold,
|
||||
tooltip: 'إبلاغ عن حالة طريق',
|
||||
onTap: () => _showHazardSheet(context, cubit),
|
||||
onTap: () => cubit.startLocationPicking('hazard'),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
// Recenter GPS Button
|
||||
@@ -1028,9 +1442,18 @@ class _MapViewState extends State<MapView> {
|
||||
tiltGesturesEnabled: true,
|
||||
zoomControlsEnabled: false,
|
||||
compassEnabled: false,
|
||||
onCameraMove: (pos) {
|
||||
if (state.isSelectingLocationOnMap) {
|
||||
cubit.updatePickedLocation(pos.target);
|
||||
}
|
||||
},
|
||||
onTap: (latLng) {
|
||||
cubit.clearSearch();
|
||||
FocusScope.of(context).unfocus();
|
||||
if (state.isSelectingLocationOnMap) {
|
||||
cubit.updatePickedLocation(latLng);
|
||||
} else {
|
||||
cubit.clearSearch();
|
||||
FocusScope.of(context).unfocus();
|
||||
}
|
||||
},
|
||||
onLongPress: (latLng) {
|
||||
_showDestinationDialog(context, cubit, latLng);
|
||||
|
||||
Reference in New Issue
Block a user