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);
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
);
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user