From cadc26518b643639efd0b87bb39276218314750a Mon Sep 17 00:00:00 2001 From: Hamza-Ayed Date: Mon, 6 Jul 2026 03:51:32 +0300 Subject: [PATCH] Update: 2026-07-06 03:51:32 --- .../car_details_widget_to_go.dart | 269 ++++++++---------- 1 file changed, 125 insertions(+), 144 deletions(-) diff --git a/siro_rider/lib/views/home/map_widget.dart/car_details_widget_to_go.dart b/siro_rider/lib/views/home/map_widget.dart/car_details_widget_to_go.dart index b1d54626..e0836332 100644 --- a/siro_rider/lib/views/home/map_widget.dart/car_details_widget_to_go.dart +++ b/siro_rider/lib/views/home/map_widget.dart/car_details_widget_to_go.dart @@ -93,8 +93,8 @@ class CarDetailsTypeToChoose extends StatelessWidget { right: 0, child: ClipRRect( borderRadius: const BorderRadius.only( - topLeft: Radius.circular(28), - topRight: Radius.circular(28), + topLeft: Radius.circular(24), + topRight: Radius.circular(24), ), child: BackdropFilter( filter: ImageFilter.blur(sigmaX: 12, sigmaY: 12), @@ -102,8 +102,8 @@ class CarDetailsTypeToChoose extends StatelessWidget { decoration: BoxDecoration( color: AppColor.secondaryColor.withAlpha(240), borderRadius: const BorderRadius.only( - topLeft: Radius.circular(28), - topRight: Radius.circular(28), + topLeft: Radius.circular(24), + topRight: Radius.circular(24), ), boxShadow: [ BoxShadow( @@ -120,9 +120,9 @@ class CarDetailsTypeToChoose extends StatelessWidget { // ── Drag Handle ────────────────────────────────────── Center( child: Container( - width: 40, - height: 4, - margin: const EdgeInsets.only(top: 8, bottom: 4), + width: 32, + height: 3, + margin: const EdgeInsets.only(top: 6, bottom: 2), decoration: BoxDecoration( color: Colors.grey.shade300, borderRadius: BorderRadius.circular(2), @@ -138,18 +138,18 @@ class CarDetailsTypeToChoose extends StatelessWidget { // ── Car Selection List ─────────────────────────────── SizedBox( - height: 115, + height: 90, child: ListView.builder( physics: const BouncingScrollPhysics(), scrollDirection: Axis.horizontal, - padding: const EdgeInsets.fromLTRB(20, 4, 20, 6), + padding: const EdgeInsets.fromLTRB(16, 2, 16, 2), itemCount: carTypes.length, itemBuilder: (context, index) { final carType = carTypes[index]; final isSelected = controller.selectedIndex == index; return Padding( padding: EdgeInsets.only( - right: index < carTypes.length - 1 ? 10 : 0), + right: index < carTypes.length - 1 ? 8 : 0), child: _buildCarCard( context, controller, carType, isSelected, index), ); @@ -162,7 +162,7 @@ class CarDetailsTypeToChoose extends StatelessWidget { controller.savingsLabel!.isNotEmpty) Padding( padding: const EdgeInsets.symmetric( - horizontal: 20, vertical: 4), + horizontal: 16, vertical: 2), child: CompetitorPriceBadge( savingsLabel: controller.savingsLabel, savingsPercent: controller.savingsPercent ?? 0.0, @@ -172,7 +172,7 @@ class CarDetailsTypeToChoose extends StatelessWidget { // ── Promo Code & Actions ───────────────────────────── _buildPromoButton(context, controller), - SizedBox(height: MediaQuery.of(context).padding.bottom + 4), + SizedBox(height: MediaQuery.of(context).padding.bottom), ], ), ), @@ -187,88 +187,79 @@ class CarDetailsTypeToChoose extends StatelessWidget { // ═══════════════════════════════════════════════════════════════════════════ Widget _buildHeader(RideLifecycleController controller) { return Padding( - padding: const EdgeInsets.fromLTRB(22, 2, 22, 4), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, + padding: const EdgeInsets.fromLTRB(16, 0, 16, 2), + child: Row( children: [ - Row( - children: [ - // Title - Expanded( - child: Text( + Expanded( + child: Row( + children: [ + Text( 'Choose your ride'.tr, style: AppStyle.headTitle.copyWith( - fontSize: 20, + fontSize: 17, fontWeight: FontWeight.w800, letterSpacing: 0.3, ), ), - ), - // Close button - GestureDetector( - onTap: () { - controller.isBottomSheetShown = false; - controller.update(); - }, - child: Container( - padding: const EdgeInsets.all(6), - decoration: BoxDecoration( - color: Get.isDarkMode - ? Colors.white.withOpacity(0.08) - : Colors.grey.shade100, - shape: BoxShape.circle, - ), - child: Icon(Icons.close_rounded, - size: 18, color: AppColor.grayColor), + const SizedBox(width: 8), + // Distance chip + _buildStatChip( + icon: Icons.route_rounded, + value: '${controller.distance.toStringAsFixed(1)} ${'KM'.tr}', + color: AppColor.primaryColor, ), - ), - ], + const SizedBox(width: 6), + // Duration chip + _buildStatChip( + icon: Icons.schedule_rounded, + value: controller.hours > 0 + ? '${controller.hours}h ${controller.minutes}m' + : '${controller.minutes} ${'min'.tr}', + color: const Color(0xFF6366F1), + ), + ], + ), ), - const SizedBox(height: 6), - // Trip Stats Row - Row( - children: [ - // Distance chip - _buildStatChip( - icon: Icons.route_rounded, - value: '${controller.distance.toStringAsFixed(1)} ${'KM'.tr}', - color: AppColor.primaryColor, - ), - const SizedBox(width: 8), - // Duration chip - _buildStatChip( - icon: Icons.schedule_rounded, - value: controller.hours > 0 - ? '${controller.hours}h ${controller.minutes}m' - : '${controller.minutes} ${'min'.tr}', - color: const Color(0xFF6366F1), // Indigo - ), - const Spacer(), - // Price preview for selected car - if (controller.selectedIndex >= 0 && - controller.selectedIndex < carTypes.length) - Container( - padding: - const EdgeInsets.symmetric(horizontal: 12, vertical: 6), - decoration: BoxDecoration( - gradient: LinearGradient( - colors: [ - AppColor.primaryColor, - AppColor.primaryColor.withAlpha(200), - ], - ), - borderRadius: BorderRadius.circular(20), - ), - child: Text( - '${_getPassengerPriceText(carTypes[controller.selectedIndex], controller)} ${CurrencyHelper.currency}', - style: const TextStyle( - color: Colors.white, - fontSize: 13, - fontWeight: FontWeight.w700, - ), - ), + if (controller.selectedIndex >= 0 && + controller.selectedIndex < carTypes.length) + Container( + padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4), + margin: const EdgeInsets.only(right: 6), + decoration: BoxDecoration( + gradient: LinearGradient( + colors: [ + AppColor.primaryColor, + AppColor.primaryColor.withAlpha(200), + ], ), - ], + borderRadius: BorderRadius.circular(16), + ), + child: Text( + '${_getPassengerPriceText(carTypes[controller.selectedIndex], controller)} ${CurrencyHelper.currency}', + style: const TextStyle( + color: Colors.white, + fontSize: 12, + fontWeight: FontWeight.w700, + ), + ), + ), + // Close button + GestureDetector( + onTap: () { + controller.isBottomSheetShown = false; + controller.update(); + }, + child: Container( + padding: const EdgeInsets.all(5), + decoration: BoxDecoration( + color: Get.isDarkMode + ? Colors.white.withOpacity(0.08) + : Colors.grey.shade100, + shape: BoxShape.circle, + ), + child: Icon(Icons.close_rounded, + size: 16, color: AppColor.grayColor), + ), ), ], ), @@ -278,21 +269,21 @@ class CarDetailsTypeToChoose extends StatelessWidget { Widget _buildStatChip( {required IconData icon, required String value, required Color color}) { return Container( - padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4), + padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 3), decoration: BoxDecoration( color: color.withAlpha(20), - borderRadius: BorderRadius.circular(20), + borderRadius: BorderRadius.circular(14), border: Border.all(color: color.withAlpha(50)), ), child: Row( mainAxisSize: MainAxisSize.min, children: [ - Icon(icon, size: 14, color: color), - const SizedBox(width: 5), + Icon(icon, size: 11, color: color), + const SizedBox(width: 4), Text( value, style: TextStyle( - fontSize: 12, + fontSize: 11, fontWeight: FontWeight.w700, color: color, ), @@ -316,7 +307,7 @@ class CarDetailsTypeToChoose extends StatelessWidget { child: AnimatedContainer( duration: const Duration(milliseconds: 300), curve: Curves.easeOutCubic, - width: 105, + width: 88, decoration: BoxDecoration( gradient: isSelected ? LinearGradient( @@ -329,20 +320,20 @@ class CarDetailsTypeToChoose extends StatelessWidget { ) : null, color: isSelected ? null : AppColor.secondaryColor, - borderRadius: BorderRadius.circular(18), + borderRadius: BorderRadius.circular(14), border: Border.all( color: isSelected ? AppColor.primaryColor : AppColor.grayColor.withOpacity(0.25), - width: isSelected ? 2.5 : 1.5, + width: isSelected ? 2 : 1.2, ), boxShadow: [ BoxShadow( color: isSelected ? AppColor.primaryColor.withAlpha(50) - : Colors.black.withAlpha(16), - blurRadius: isSelected ? 14 : 6, - offset: const Offset(0, 3), + : Colors.black.withAlpha(12), + blurRadius: isSelected ? 10 : 4, + offset: const Offset(0, 2), ), ], ), @@ -351,11 +342,11 @@ class CarDetailsTypeToChoose extends StatelessWidget { // Selected indicator if (isSelected) Positioned( - top: 5, - right: 5, + top: 3, + right: 3, child: Container( - width: 22, - height: 22, + width: 18, + height: 18, decoration: BoxDecoration( gradient: LinearGradient( colors: [ @@ -367,31 +358,31 @@ class CarDetailsTypeToChoose extends StatelessWidget { boxShadow: [ BoxShadow( color: AppColor.primaryColor.withAlpha(60), - blurRadius: 6, + blurRadius: 4, ), ], ), - child: const Icon(Icons.check, size: 13, color: Colors.white), + child: const Icon(Icons.check, size: 11, color: Colors.white), ), ), // Card content Padding( - padding: const EdgeInsets.fromLTRB(8, 8, 8, 8), + padding: const EdgeInsets.fromLTRB(6, 6, 6, 6), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ // Car image AnimatedScale( - scale: isSelected ? 1.12 : 1.0, + scale: isSelected ? 1.1 : 1.0, duration: const Duration(milliseconds: 300), child: Image.asset( carType.image, - height: 44, + height: 34, fit: BoxFit.contain, ), ), - const SizedBox(height: 2), + const SizedBox(height: 1), // Car name FittedBox( @@ -401,7 +392,7 @@ class CarDetailsTypeToChoose extends StatelessWidget { style: TextStyle( fontWeight: isSelected ? FontWeight.w800 : FontWeight.w600, - fontSize: 13, + fontSize: 11, color: isSelected ? AppColor.primaryColor : AppColor.writeColor, @@ -410,17 +401,17 @@ class CarDetailsTypeToChoose extends StatelessWidget { ), ), - const SizedBox(height: 2), + const SizedBox(height: 1), // Price tag Container( padding: - const EdgeInsets.symmetric(horizontal: 8, vertical: 2), + const EdgeInsets.symmetric(horizontal: 6, vertical: 1), decoration: BoxDecoration( color: isSelected ? AppColor.primaryColor : AppColor.writeColor.withOpacity(0.05), - borderRadius: BorderRadius.circular(10), + borderRadius: BorderRadius.circular(8), border: isSelected ? null : Border.all( @@ -430,7 +421,7 @@ class CarDetailsTypeToChoose extends StatelessWidget { child: Text( '${_getPassengerPriceText(carType, controller)} ${CurrencyHelper.currency}', style: TextStyle( - fontSize: 14.5, + fontSize: 12, fontWeight: FontWeight.w800, color: isSelected ? Colors.white @@ -456,14 +447,14 @@ class CarDetailsTypeToChoose extends StatelessWidget { if (controller.promoTaken) return const SizedBox.shrink(); return Padding( - padding: const EdgeInsets.fromLTRB(20, 4, 20, 2), + padding: const EdgeInsets.fromLTRB(16, 2, 16, 0), child: Material( color: Colors.transparent, child: InkWell( onTap: () => _showPromoCodeDialog(context, controller), - borderRadius: BorderRadius.circular(14), + borderRadius: BorderRadius.circular(12), child: Container( - padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 12), + padding: const EdgeInsets.symmetric(vertical: 6, horizontal: 10), decoration: BoxDecoration( gradient: LinearGradient( colors: [ @@ -471,49 +462,39 @@ class CarDetailsTypeToChoose extends StatelessWidget { Colors.orange.shade50, ], ), - borderRadius: BorderRadius.circular(14), + borderRadius: BorderRadius.circular(12), border: Border.all(color: Colors.amber.shade200), ), child: Row( children: [ Container( - padding: const EdgeInsets.all(7), + padding: const EdgeInsets.all(5), decoration: BoxDecoration( color: Colors.amber.shade100, shape: BoxShape.circle, ), child: Icon(Icons.percent_rounded, - color: Colors.amber.shade800, size: 16), + color: Colors.amber.shade800, size: 14), ), - const SizedBox(width: 12), + const SizedBox(width: 8), Expanded( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - 'Have a Promo Code?'.tr, - style: TextStyle( - fontSize: 13, - fontWeight: FontWeight.w700, - color: Colors.amber.shade900, - ), - ), - Text( - 'Tap to apply your discount'.tr, - style: TextStyle( - fontSize: 11, color: Colors.amber.shade700), - ), - ], + child: Text( + 'Have a Promo Code?'.tr, + style: TextStyle( + fontSize: 12, + fontWeight: FontWeight.w700, + color: Colors.amber.shade900, + ), ), ), Container( - padding: const EdgeInsets.all(4), + padding: const EdgeInsets.all(3), decoration: BoxDecoration( color: Colors.amber.shade100, - borderRadius: BorderRadius.circular(8), + borderRadius: BorderRadius.circular(6), ), child: Icon(Icons.arrow_forward_ios_rounded, - size: 12, color: Colors.amber.shade800), + size: 10, color: Colors.amber.shade800), ), ], ), @@ -531,32 +512,32 @@ class CarDetailsTypeToChoose extends StatelessWidget { double.tryParse(box.read(BoxName.passengerWalletTotal) ?? '0.0') ?? 0.0; if (passengerWallet < 0.0) { return Container( - margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 6), - padding: const EdgeInsets.all(12), + margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 3), + padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6), decoration: BoxDecoration( color: Colors.red.shade50, - borderRadius: BorderRadius.circular(12), + borderRadius: BorderRadius.circular(10), border: Border.all(color: Colors.red.shade200), ), child: Row( children: [ Container( - padding: const EdgeInsets.all(6), + padding: const EdgeInsets.all(4), decoration: BoxDecoration( color: Colors.red.shade100, shape: BoxShape.circle, ), child: Icon(Icons.warning_amber_rounded, - color: Colors.red.shade700, size: 18), + color: Colors.red.shade700, size: 14), ), - const SizedBox(width: 10), + const SizedBox(width: 8), Expanded( child: Text( '${'You have a negative balance of'.tr} ${passengerWallet.toStringAsFixed(2)} ${CurrencyHelper.currency}.', style: TextStyle( color: Colors.red.shade800, fontWeight: FontWeight.w600, - fontSize: 12, + fontSize: 11, ), ), ),