BASE: Finish Cab Type Section UI.
This commit is contained in:
@@ -14,6 +14,7 @@ import 'package:customer/utils/network_image_widget.dart';
|
||||
import 'package:customer/utils/utils.dart';
|
||||
import 'package:dotted_border/dotted_border.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
||||
import 'package:flutter_svg/flutter_svg.dart';
|
||||
import 'package:get/get.dart';
|
||||
import 'package:google_maps_flutter/google_maps_flutter.dart';
|
||||
@@ -469,9 +470,9 @@ class CabBookingScreen extends StatelessWidget {
|
||||
) {
|
||||
return Positioned.fill(
|
||||
child: DraggableScrollableSheet(
|
||||
initialChildSize: 0.40,
|
||||
minChildSize: 0.40,
|
||||
maxChildSize: 0.8,
|
||||
initialChildSize: 0.37,
|
||||
minChildSize: 0.37,
|
||||
maxChildSize: 0.37,
|
||||
expand: false,
|
||||
builder: (context, scrollController) {
|
||||
return Container(
|
||||
@@ -483,45 +484,45 @@ class CabBookingScreen extends StatelessWidget {
|
||||
),
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 15.0,
|
||||
vertical: 10,
|
||||
),
|
||||
padding: EdgeInsets.symmetric(vertical: 10.r),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
color: AppThemeData.grey400,
|
||||
),
|
||||
height: 4,
|
||||
width: 33,
|
||||
),
|
||||
Align(
|
||||
alignment: Alignment.topLeft,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 10),
|
||||
child: Text(
|
||||
"Select Your Vehicle Type".tr,
|
||||
style: AppThemeData.boldTextStyle(
|
||||
fontSize: 18,
|
||||
color:
|
||||
isDark
|
||||
? AppThemeData.greyDark900
|
||||
: AppThemeData.grey900,
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
color: AppThemeData.grey400,
|
||||
),
|
||||
textAlign: TextAlign.start,
|
||||
height: 4.h,
|
||||
width: 33.w,
|
||||
),
|
||||
],
|
||||
),
|
||||
SizedBox(height: 15.h),
|
||||
Padding(
|
||||
padding: EdgeInsetsGeometry.symmetric(horizontal: 16.r),
|
||||
child: Text(
|
||||
"Select Your Vehicle Type".tr,
|
||||
style: AppThemeData.boldTextStyle(
|
||||
fontSize: 18.sp,
|
||||
color:
|
||||
isDark
|
||||
? AppThemeData.greyDark900
|
||||
: AppThemeData.grey900,
|
||||
),
|
||||
textAlign: TextAlign.start,
|
||||
),
|
||||
),
|
||||
SizedBox(height: 10.h),
|
||||
Expanded(
|
||||
child: ListView.builder(
|
||||
itemCount: controller.vehicleTypes.length,
|
||||
shrinkWrap: true,
|
||||
padding: EdgeInsets.only(bottom: 20),
|
||||
physics: AlwaysScrollableScrollPhysics(),
|
||||
controller: scrollController,
|
||||
scrollDirection: Axis.vertical,
|
||||
scrollDirection: Axis.horizontal,
|
||||
itemBuilder: (context, index) {
|
||||
VehicleType vehicleType =
|
||||
controller.vehicleTypes[index];
|
||||
@@ -531,141 +532,128 @@ class CabBookingScreen extends StatelessWidget {
|
||||
controller.selectedVehicleType.value =
|
||||
controller.vehicleTypes[index];
|
||||
},
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(bottom: 10),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(15),
|
||||
border: Border.all(
|
||||
color:
|
||||
isDark
|
||||
? controller
|
||||
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(
|
||||
borderRadius: BorderRadius.circular(16.r),
|
||||
color:
|
||||
controller.selectedVehicleType.value.id ==
|
||||
vehicleType.id
|
||||
? AppThemeData.mainColor
|
||||
: AppThemeData.grey300,
|
||||
),
|
||||
child: Padding(
|
||||
padding: EdgeInsets.fromLTRB(8.r, 8.r, 0, 0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
// "${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
|
||||
? Colors.white
|
||||
: AppThemeData.grey500
|
||||
: controller
|
||||
.selectedVehicleType
|
||||
.value
|
||||
.id ==
|
||||
vehicleType.id
|
||||
? AppThemeData.grey300
|
||||
: Colors.transparent,
|
||||
width: 1,
|
||||
),
|
||||
color:
|
||||
controller.selectedVehicleType.value.id ==
|
||||
vehicleType.id
|
||||
? AppThemeData.grey50
|
||||
: isDark
|
||||
? AppThemeData.grey300
|
||||
: Colors.white,
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
vertical: 10,
|
||||
horizontal: 10,
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
ClipRRect(
|
||||
//borderRadius: BorderRadius.circular(10),
|
||||
child: CachedNetworkImage(
|
||||
imageUrl:
|
||||
vehicleType.vehicleIcon
|
||||
.toString(),
|
||||
height: 60,
|
||||
width: 60,
|
||||
imageBuilder:
|
||||
(context, imageProvider) =>
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius:
|
||||
BorderRadius.circular(
|
||||
10,
|
||||
),
|
||||
image: DecorationImage(
|
||||
image: imageProvider,
|
||||
fit: BoxFit.cover,
|
||||
),
|
||||
),
|
||||
),
|
||||
placeholder:
|
||||
(context, url) => Center(
|
||||
child:
|
||||
CircularProgressIndicator.adaptive(
|
||||
valueColor:
|
||||
AlwaysStoppedAnimation(
|
||||
AppThemeData
|
||||
.primary300,
|
||||
),
|
||||
),
|
||||
),
|
||||
errorWidget:
|
||||
(context, url, error) =>
|
||||
ClipRRect(
|
||||
? 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(
|
||||
imageUrl:
|
||||
vehicleType.vehicleIcon.toString(),
|
||||
|
||||
imageBuilder:
|
||||
(context, imageProvider) =>
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius:
|
||||
BorderRadius.circular(
|
||||
20,
|
||||
10,
|
||||
),
|
||||
child: Image.network(
|
||||
Constant.placeHolderImage,
|
||||
image: DecorationImage(
|
||||
image: imageProvider,
|
||||
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,
|
||||
placeholder:
|
||||
(context, url) => Center(
|
||||
child:
|
||||
CircularProgressIndicator.adaptive(
|
||||
valueColor:
|
||||
AlwaysStoppedAnimation(
|
||||
AppThemeData
|
||||
.primary300,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
errorWidget:
|
||||
(context, url, error) => ClipRRect(
|
||||
borderRadius:
|
||||
BorderRadius.circular(20),
|
||||
child: Image.network(
|
||||
Constant.placeHolderImage,
|
||||
fit: BoxFit.cover,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
fit: BoxFit.cover,
|
||||
),
|
||||
Text(
|
||||
Constant.amountShow(
|
||||
amount:
|
||||
controller
|
||||
.getAmount(vehicleType)
|
||||
.toString(),
|
||||
),
|
||||
style: const TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
letterSpacing: 1,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
@@ -674,6 +662,7 @@ class CabBookingScreen extends StatelessWidget {
|
||||
},
|
||||
),
|
||||
),
|
||||
SizedBox(height: 15.h),
|
||||
Obx(
|
||||
() => RoundedButtonFill(
|
||||
title: 'pay_amount'.trParams({
|
||||
@@ -701,8 +690,8 @@ class CabBookingScreen extends StatelessWidget {
|
||||
);
|
||||
}
|
||||
},
|
||||
color: AppThemeData.primary300,
|
||||
textColor: AppThemeData.grey900,
|
||||
color: AppThemeData.mainColor,
|
||||
textColor: AppThemeData.grey50,
|
||||
),
|
||||
),
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user