Abdusalom999/Fondex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

BASE: Finish Cab Type Section UI.

Browse Source
This commit is contained in:
Abdusalom G'ayratov
2025-11-28 18:41:40 +05:00
parent 50aae9ce1a
commit b2cb9b5dc5
3 changed files with 298 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
lib/screen_ui/cab_service_screens/cab_booking_screen.dart
View File

@@ -14,6 +14,7 @@ import 'package:customer/utils/network_image_widget.dart';
import 'package:customer/utils/utils.dart'; import 'package:customer/utils/utils.dart';
import 'package:dotted_border/dotted_border.dart'; import 'package:dotted_border/dotted_border.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/flutter_svg.dart'; import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart'; import 'package:google_maps_flutter/google_maps_flutter.dart';
@@ -469,9 +470,9 @@ class CabBookingScreen extends StatelessWidget {
) { ) {
return Positioned.fill( return Positioned.fill(
child: DraggableScrollableSheet( child: DraggableScrollableSheet(
initialChildSize: 0.40, initialChildSize: 0.37,
minChildSize: 0.40, minChildSize: 0.37,
maxChildSize: 0.8, maxChildSize: 0.37,
expand: false, expand: false,
builder: (context, scrollController) { builder: (context, scrollController) {
return Container( return Container(
@@ -483,29 +484,30 @@ class CabBookingScreen extends StatelessWidget {
), ),
), ),
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric( padding: EdgeInsets.symmetric(vertical: 10.r),
horizontal: 15.0,
vertical: 10,
),
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
Container( Container(
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(10),
color: AppThemeData.grey400, color: AppThemeData.grey400,
), ),
height: 4, height: 4.h,
width: 33, width: 33.w,
), ),
Align( ],
alignment: Alignment.topLeft, ),
child: Padding( SizedBox(height: 15.h),
padding: const EdgeInsets.symmetric(vertical: 10), Padding(
padding: EdgeInsetsGeometry.symmetric(horizontal: 16.r),
child: Text( child: Text(
"Select Your Vehicle Type".tr, "Select Your Vehicle Type".tr,
style: AppThemeData.boldTextStyle( style: AppThemeData.boldTextStyle(
fontSize: 18, fontSize: 18.sp,
color: color:
isDark isDark
? AppThemeData.greyDark900 ? AppThemeData.greyDark900
@@ -514,14 +516,13 @@ class CabBookingScreen extends StatelessWidget {
textAlign: TextAlign.start, textAlign: TextAlign.start,
), ),
), ),
), SizedBox(height: 10.h),
Expanded( Expanded(
child: ListView.builder( child: ListView.builder(
itemCount: controller.vehicleTypes.length, itemCount: controller.vehicleTypes.length,
shrinkWrap: true, physics: AlwaysScrollableScrollPhysics(),
padding: EdgeInsets.only(bottom: 20),
controller: scrollController, controller: scrollController,
scrollDirection: Axis.vertical, scrollDirection: Axis.horizontal,
itemBuilder: (context, index) { itemBuilder: (context, index) {
VehicleType vehicleType = VehicleType vehicleType =
controller.vehicleTypes[index]; controller.vehicleTypes[index];
@@ -531,53 +532,90 @@ class CabBookingScreen extends StatelessWidget {
controller.selectedVehicleType.value = controller.selectedVehicleType.value =
controller.vehicleTypes[index]; controller.vehicleTypes[index];
}, },
child: Padding(
padding: const EdgeInsets.only(bottom: 10),
child: Container( child: Container(
width: 130.w,
margin:
index == 0
? EdgeInsets.only(left: 16.r, right: 10.r)
: index ==
controller.vehicleTypes.length - 1
? EdgeInsets.only(right: 10.r)
: EdgeInsets.only(right: 10.r),
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15), borderRadius: BorderRadius.circular(16.r),
border: Border.all(
color:
isDark
? controller
.selectedVehicleType
.value
.id ==
vehicleType.id
? Colors.white
: AppThemeData.grey500
: controller
.selectedVehicleType
.value
.id ==
vehicleType.id
? AppThemeData.grey300
: Colors.transparent,
width: 1,
),
color: color:
controller.selectedVehicleType.value.id == controller.selectedVehicleType.value.id ==
vehicleType.id vehicleType.id
? AppThemeData.grey50 ? AppThemeData.mainColor
: isDark : AppThemeData.grey300,
? AppThemeData.grey300
: Colors.white,
), ),
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric( padding: EdgeInsets.fromLTRB(8.r, 8.r, 0, 0),
vertical: 10, child: Column(
horizontal: 10, crossAxisAlignment: CrossAxisAlignment.start,
),
child: Row(
children: [ children: [
ClipRRect( Text(
//borderRadius: BorderRadius.circular(10), // "${vehicleType.name} | ${controller.distance.toStringAsFixed(2)}${'km'.tr}",
"${vehicleType.name}",
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontFamily: "Inter",
fontSize: 15.sp,
overflow: TextOverflow.ellipsis,
color:
controller
.selectedVehicleType
.value
.id ==
vehicleType.id
? AppThemeData.grey50
: AppThemeData.darkGrey,
fontWeight: FontWeight.bold,
),
),
Text(
Constant.amountShow(
amount:
controller
.getAmount(vehicleType)
.toString(),
),
style: TextStyle(
fontSize: 13.sp,
fontWeight: FontWeight.w500,
color:
controller
.selectedVehicleType
.value
.id ==
vehicleType.id
? AppThemeData.grey50
: AppThemeData.darkGrey
.withValues(alpha: 0.7),
),
),
Text(
"(${controller.duration.value})",
style: TextStyle(
fontWeight: FontWeight.w400,
color:
controller
.selectedVehicleType
.value
.id ==
vehicleType.id
? AppThemeData.grey50
: AppThemeData.darkGrey
.withValues(alpha: 0.7),
),
),
Expanded(
child: CachedNetworkImage( child: CachedNetworkImage(
imageUrl: imageUrl:
vehicleType.vehicleIcon vehicleType.vehicleIcon.toString(),
.toString(),
height: 60,
width: 60,
imageBuilder: imageBuilder:
(context, imageProvider) => (context, imageProvider) =>
Container( Container(
@@ -604,12 +642,9 @@ class CabBookingScreen extends StatelessWidget {
), ),
), ),
errorWidget: errorWidget:
(context, url, error) => (context, url, error) => ClipRRect(
ClipRRect(
borderRadius: borderRadius:
BorderRadius.circular( BorderRadius.circular(20),
20,
),
child: Image.network( child: Image.network(
Constant.placeHolderImage, Constant.placeHolderImage,
fit: BoxFit.cover, fit: BoxFit.cover,
@@ -618,62 +653,16 @@ class CabBookingScreen extends StatelessWidget {
fit: BoxFit.cover, fit: BoxFit.cover,
), ),
), ),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 10,
),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
"${vehicleType.name} | ${controller.distance.toStringAsFixed(2)}${'km'.tr}",
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
letterSpacing: 1,
),
),
Padding(
padding: const EdgeInsets.only(
top: 2.0,
),
child: Text(
controller.duration.value,
style: const TextStyle(
fontWeight: FontWeight.w400,
letterSpacing: 1,
),
),
),
], ],
), ),
), ),
), ),
Text(
Constant.amountShow(
amount:
controller
.getAmount(vehicleType)
.toString(),
),
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
letterSpacing: 1,
),
),
],
),
),
),
),
), ),
); );
}, },
), ),
), ),
SizedBox(height: 15.h),
Obx( Obx(
() => RoundedButtonFill( () => RoundedButtonFill(
title: 'pay_amount'.trParams({ title: 'pay_amount'.trParams({
@@ -701,8 +690,8 @@ class CabBookingScreen extends StatelessWidget {
); );
} }
}, },
color: AppThemeData.primary300, color: AppThemeData.mainColor,
textColor: AppThemeData.grey900, textColor: AppThemeData.grey50,
), ),
), ),
], ],

98
lib/widget/osm_map/map_picker_page.dart
View File

@@ -1,8 +1,11 @@
import 'dart:developer';
import 'package:customer/themes/app_them_data.dart'; import 'package:customer/themes/app_them_data.dart';
import 'package:customer/themes/round_button_fill.dart'; import 'package:customer/themes/round_button_fill.dart';
import 'package:customer/widget/osm_map/map_controller.dart'; import 'package:customer/widget/osm_map/map_controller.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart'; import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import 'package:latlong2/latlong.dart'; import 'package:latlong2/latlong.dart';
import '../../controllers/theme_controller.dart'; import '../../controllers/theme_controller.dart';
@@ -18,38 +21,68 @@ class MapPickerPage extends StatelessWidget {
final themeController = Get.find<ThemeController>(); final themeController = Get.find<ThemeController>();
final isDark = themeController.isDark.value; final isDark = themeController.isDark.value;
return Scaffold( return Scaffold(
appBar: AppBar( // appBar: AppBar(
backgroundColor: isDark ? AppThemeData.surfaceDark : AppThemeData.surface, // backgroundColor:
centerTitle: false, // isDark ? AppThemeData.surfaceDark : AppThemeData.surface,
titleSpacing: 0, // centerTitle: false,
title: Text("PickUp Location".tr, textAlign: TextAlign.start, style: TextStyle(fontFamily: AppThemeData.medium, fontSize: 16, color: isDark ? AppThemeData.grey50 : AppThemeData.grey900)), // titleSpacing: 0,
), // title: Text(
// "PickUp Location".tr,
// textAlign: TextAlign.start,
// style: TextStyle(
// fontFamily: AppThemeData.medium,
// fontSize: 16,
// color: isDark ? AppThemeData.grey50 : AppThemeData.grey900,
// ),
// ),
// ),
body: Stack( body: Stack(
children: [ children: [
Obx( Obx(
() => FlutterMap( () => FlutterMap(
mapController: controller.mapController, mapController: controller.mapController,
options: MapOptions( options: MapOptions(
initialCenter: controller.pickedPlace.value?.coordinates ?? LatLng(20.5937, 78.9629), // Default India center initialCenter:
controller.pickedPlace.value?.coordinates ??
LatLng(20.5937, 78.9629), // Default India center
initialZoom: 13, initialZoom: 13,
onTap: (tapPos, latlng) { onTap: (tapPos, latlng) {
controller.addLatLngOnly(latlng); controller.addLatLngOnly(latlng);
controller.mapController.move(latlng, controller.mapController.camera.zoom); controller.mapController.move(
latlng,
controller.mapController.camera.zoom,
);
}, },
), ),
children: [ children: [
TileLayer(urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', subdomains: const ['a', 'b', 'c'], userAgentPackageName: 'com.emart.app'), TileLayer(
urlTemplate:
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
subdomains: const ['a', 'b', 'c'],
userAgentPackageName: 'com.emart.app',
),
MarkerLayer( MarkerLayer(
markers: markers:
controller.pickedPlace.value != null controller.pickedPlace.value != null
? [Marker(point: controller.pickedPlace.value!.coordinates, width: 40, height: 40, child: const Icon(Icons.location_pin, size: 36, color: Colors.red))] ? [
Marker(
point: controller.pickedPlace.value!.coordinates,
width: 40,
height: 40,
child: const Icon(
Icons.location_pin,
size: 36,
color: Colors.red,
),
),
]
: [], : [],
), ),
], ],
), ),
), ),
Positioned( Positioned(
top: 16, top: MediaQuery.of(context).size.height / 9,
left: 16, left: 16,
right: 16, right: 16,
child: Column( child: Column(
@@ -59,10 +92,18 @@ class MapPickerPage extends StatelessWidget {
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
child: TextField( child: TextField(
controller: searchController, controller: searchController,
style: TextStyle(color: isDark ? AppThemeData.grey900 : AppThemeData.grey900), style: TextStyle(
color:
isDark ? AppThemeData.grey900 : AppThemeData.grey900,
),
decoration: InputDecoration( decoration: InputDecoration(
hintText: 'Search location...'.tr, hintText: 'Search location...'.tr,
hintStyle: TextStyle(color: isDark ? AppThemeData.grey900 : AppThemeData.grey900), hintStyle: TextStyle(
color:
isDark
? AppThemeData.grey900
: AppThemeData.grey900,
),
contentPadding: EdgeInsets.all(12), contentPadding: EdgeInsets.all(12),
border: InputBorder.none, border: InputBorder.none,
prefixIcon: Icon(Icons.search), prefixIcon: Icon(Icons.search),
@@ -76,7 +117,10 @@ class MapPickerPage extends StatelessWidget {
} }
return Container( return Container(
margin: const EdgeInsets.only(top: 4), margin: const EdgeInsets.only(top: 4),
decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(8)), decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
),
child: ListView.builder( child: ListView.builder(
shrinkWrap: true, shrinkWrap: true,
itemCount: controller.searchResults.length, itemCount: controller.searchResults.length,
@@ -111,8 +155,13 @@ class MapPickerPage extends StatelessWidget {
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
Text( Text(
controller.pickedPlace.value != null ? "Picked Location:".tr : "No Location Picked".tr, controller.pickedPlace.value != null
style: TextStyle(color: isDark ? AppThemeData.primary300 : AppThemeData.primary300, fontFamily: AppThemeData.semiBold, fontWeight: FontWeight.w600), ? "Picked Location:".tr
: "No Location Picked".tr,
style: AppThemeData.boldTextStyle(
color: AppThemeData.grey900,
fontSize: 17.sp,
),
), ),
const SizedBox(height: 4), const SizedBox(height: 4),
if (controller.pickedPlace.value != null) if (controller.pickedPlace.value != null)
@@ -129,20 +178,25 @@ class MapPickerPage extends StatelessWidget {
Expanded( Expanded(
child: RoundedButtonFill( child: RoundedButtonFill(
title: "Confirm Location".tr, title: "Confirm Location".tr,
color: AppThemeData.primary300, color: AppThemeData.mainColor,
textColor: AppThemeData.grey50, textColor: AppThemeData.grey50,
height: 5, height: 4.h,
onPress: () async { onPress: () async {
final selected = controller.pickedPlace.value; final selected = controller.pickedPlace.value;
if (selected != null) { if (selected != null) {
Get.back(result: selected); // ✅ Return the selected place Get.back(
print("Selected location: $selected"); result: selected,
); // ✅ Return the selected place
log("Selected location: $selected");
} }
}, },
), ),
), ),
const SizedBox(width: 10), SizedBox(width: 10.w),
IconButton(icon: const Icon(Icons.delete_forever, color: Colors.red), onPressed: controller.clearAll), IconButton(
icon: const Icon(Icons.delete_forever, color: Colors.red),
onPressed: controller.clearAll,
),
], ],
), ),
], ],

92
lib/widget/place_picker/location_picker_screen.dart
View File

@@ -31,7 +31,10 @@ class LocationPickerScreen extends StatelessWidget {
onMapCreated: (controllers) { onMapCreated: (controllers) {
controller.mapController = controllers; controller.mapController = controllers;
}, },
initialCameraPosition: CameraPosition(target: controller.selectedLocation.value!, zoom: 15), initialCameraPosition: CameraPosition(
target: controller.selectedLocation.value!,
zoom: 15,
),
onTap: (LatLng tappedPosition) { onTap: (LatLng tappedPosition) {
controller.selectedLocation.value = tappedPosition; controller.selectedLocation.value = tappedPosition;
controller.getAddressFromLatLng(tappedPosition); controller.getAddressFromLatLng(tappedPosition);
@@ -44,14 +47,18 @@ class LocationPickerScreen extends StatelessWidget {
markerId: const MarkerId("selected-location"), markerId: const MarkerId("selected-location"),
position: controller.selectedLocation.value!, position: controller.selectedLocation.value!,
onTap: () { onTap: () {
controller.getAddressFromLatLng(controller.selectedLocation.value!); controller.getAddressFromLatLng(
controller.selectedLocation.value!,
);
}, },
), ),
}, },
onCameraMove: controller.onMapMoved, onCameraMove: controller.onMapMoved,
onCameraIdle: () { onCameraIdle: () {
if (controller.selectedLocation.value != null) { if (controller.selectedLocation.value != null) {
controller.getAddressFromLatLng(controller.selectedLocation.value!); controller.getAddressFromLatLng(
controller.selectedLocation.value!,
);
} }
}, },
), ),
@@ -67,29 +74,65 @@ class LocationPickerScreen extends StatelessWidget {
Get.back(); Get.back();
}, },
child: Container( child: Container(
decoration: BoxDecoration(color: isDark ? AppThemeData.greyDark50 : AppThemeData.grey50, borderRadius: BorderRadius.circular(30)), decoration: BoxDecoration(
child: Padding(padding: const EdgeInsets.all(10), child: Icon(Icons.arrow_back_ios_new_outlined, color: isDark ? AppThemeData.greyDark900 : AppThemeData.grey900)), color:
isDark
? AppThemeData.greyDark50
: AppThemeData.grey50,
borderRadius: BorderRadius.circular(30),
),
child: Padding(
padding: const EdgeInsets.all(10),
child: Icon(
Icons.arrow_back_ios_new_outlined,
color:
isDark
? AppThemeData.greyDark900
: AppThemeData.grey900,
),
),
), ),
), ),
SizedBox(height: 20), SizedBox(height: 20),
GestureDetector( GestureDetector(
onTap: () async { onTap: () async {
Prediction? p = await PlacesAutocomplete.show(context: context, apiKey: Constant.mapAPIKey, mode: Mode.overlay, language: "en"); Prediction? p = await PlacesAutocomplete.show(
context: context,
apiKey: Constant.mapAPIKey,
mode: Mode.overlay,
language: "en",
);
if (p != null) { if (p != null) {
final detail = await _places.getDetailsByPlaceId(p.placeId!); final detail = await _places.getDetailsByPlaceId(
p.placeId!,
);
final lat = detail.result.geometry!.location.lat; final lat = detail.result.geometry!.location.lat;
final lng = detail.result.geometry!.location.lng; final lng = detail.result.geometry!.location.lng;
final LatLng pos = LatLng(lat, lng); final LatLng pos = LatLng(lat, lng);
controller.selectedLocation.value = pos; controller.selectedLocation.value = pos;
controller.mapController?.animateCamera(CameraUpdate.newLatLngZoom(pos, 15)); controller.mapController?.animateCamera(
CameraUpdate.newLatLngZoom(pos, 15),
);
controller.getAddressFromLatLng(pos); controller.getAddressFromLatLng(pos);
} }
}, },
child: Container( child: Container(
width: Responsive.width(100, context), width: Responsive.width(100, context),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12), padding: const EdgeInsets.symmetric(
decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(60)), horizontal: 16,
child: Row(children: [Icon(Icons.search), SizedBox(width: 8), Text("Search place...".tr)]), vertical: 12,
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(60),
),
child: Row(
children: [
Icon(Icons.search),
SizedBox(width: 8),
Text("Search place...".tr),
],
),
), ),
), ),
], ],
@@ -101,13 +144,34 @@ class LocationPickerScreen extends StatelessWidget {
right: 20, right: 20,
child: Container( child: Container(
padding: const EdgeInsets.all(10), padding: const EdgeInsets.all(10),
decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(10), boxShadow: const [BoxShadow(color: Colors.black26, blurRadius: 5)]), decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
boxShadow: const [
BoxShadow(color: Colors.black26, blurRadius: 5),
],
),
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
Obx(() => Text(controller.address.value, textAlign: TextAlign.center, style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w500))), Obx(
() => Text(
controller.address.value,
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
),
),
),
const SizedBox(height: 10), const SizedBox(height: 10),
RoundedButtonFill(title: "Confirm Location".tr, height: 5.5, color: AppThemeData.primary300, textColor: AppThemeData.grey50, onPress: () => controller.confirmLocation()), RoundedButtonFill(
title: "Confirm Location",
height: 5.5,
color: AppThemeData.mainColor,
textColor: AppThemeData.grey50,
onPress: () => controller.confirmLocation(),
),
], ],
), ),
), ),