336 lines
13 KiB
Dart
336 lines
13 KiB
Dart
import 'package:citycards_customer/common_packages/app_bar.dart';
|
|
import 'package:citycards_customer/common_packages/custom_filled_button.dart';
|
|
import 'package:citycards_customer/common_packages/custom_text.dart';
|
|
import 'package:citycards_customer/common_packages/custom_dashed_line.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
|
|
|
class CheckoutView extends StatelessWidget {
|
|
const CheckoutView({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
backgroundColor: Colors.white,
|
|
body: SafeArea(
|
|
child: Padding(
|
|
padding: EdgeInsets.symmetric(horizontal: 20.w),
|
|
child: Column(
|
|
children: [
|
|
CommonAppBar(
|
|
isWhiteLogo: false,
|
|
isProfilePage: false,
|
|
showCart: false,
|
|
),
|
|
Row(
|
|
children: [
|
|
Icon(Icons.arrow_back),
|
|
SizedBox(width: 8.w),
|
|
CustomText(text: "Checkout", size: 12.sp),
|
|
],
|
|
),
|
|
|
|
SizedBox(height: 22.h),
|
|
Container(
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
border: Border.all(
|
|
color: Color(0xFFF95FAF).withOpacity(0.2),
|
|
),
|
|
borderRadius: BorderRadius.circular(8.r),
|
|
),
|
|
child: Expanded(
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
ClipRRect(
|
|
borderRadius: BorderRadius.only(
|
|
topLeft: Radius.circular(8.r),
|
|
bottomLeft: Radius.circular(8.r),
|
|
),
|
|
child: Image.asset(
|
|
"assets/images/card_banner.png",
|
|
scale: 4,
|
|
width: 103.w,
|
|
height: 160.h,
|
|
fit: BoxFit.cover,
|
|
),
|
|
),
|
|
SizedBox(width: 6.66.w),
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
CustomText(
|
|
text: "Melbourne",
|
|
weight: FontWeight.w500,
|
|
size: 16.sp,
|
|
),
|
|
SizedBox(height: 8.h),
|
|
CustomText(
|
|
text: "2 Days",
|
|
color: Color(0xFF8E8E8E),
|
|
size: 12.sp,
|
|
),
|
|
SizedBox(height: 12.h),
|
|
|
|
SizedBox(
|
|
width: MediaQuery.of(context).size.width * .5,
|
|
child: Row(
|
|
mainAxisAlignment:
|
|
MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Image.asset(
|
|
'assets/icons/adult.png',
|
|
scale: 4,
|
|
),
|
|
SizedBox(width: 4.w),
|
|
CustomText(
|
|
text: "3 adults",
|
|
color: Color(0xFF8E8E8E),
|
|
size: 12.sp,
|
|
),
|
|
],
|
|
),
|
|
|
|
Row(
|
|
children: [
|
|
Image.asset(
|
|
'assets/icons/qty.png',
|
|
scale: 4,
|
|
),
|
|
SizedBox(width: 4.w),
|
|
CustomText(
|
|
text: "Qty : 2",
|
|
color: Color(0xFF8E8E8E),
|
|
size: 12.sp,
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
|
|
SizedBox(height: 7.h),
|
|
Row(
|
|
children: [
|
|
Image.asset(
|
|
"assets/icons/kid.png",
|
|
scale: 4,
|
|
),
|
|
SizedBox(width: 4.w),
|
|
CustomText(
|
|
text: "3 Kids",
|
|
color: Color(0xFF8E8E8E),
|
|
size: 12.sp,
|
|
),
|
|
|
|
SizedBox(width: 53.w),
|
|
|
|
CustomText(
|
|
text: "\$49.50",
|
|
size: 24.sp,
|
|
weight: FontWeight.w500,
|
|
color: Color(0xFFF95F62),
|
|
),
|
|
],
|
|
),
|
|
|
|
SizedBox(
|
|
width: 193.w,
|
|
child: CustomText(
|
|
text:
|
|
"Dive into an extensive selection of thrilling destinations!",
|
|
color: Color(0xFF000000).withOpacity(0.6),
|
|
size: 11.sp,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
|
|
Container(
|
|
width: 35.w,
|
|
height: 160.h,
|
|
decoration: BoxDecoration(
|
|
color: Color(0xFFF95FAF),
|
|
borderRadius: BorderRadius.only(
|
|
bottomRight: Radius.circular(8.r),
|
|
topRight: Radius.circular(8.r),
|
|
),
|
|
),
|
|
child: RotatedBox(
|
|
quarterTurns: -1,
|
|
child: Center(
|
|
child: RichText(
|
|
text: TextSpan(
|
|
children: [
|
|
TextSpan(
|
|
text: "Flexi ",
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 16.sp,
|
|
),
|
|
),
|
|
TextSpan(
|
|
text: "Card",
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 12.sp,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
|
|
SizedBox(height: 15.h),
|
|
Container(
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal: 12.w,
|
|
vertical: 12.h,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: Color(0xFFFFF5F5),
|
|
borderRadius: BorderRadius.circular(8.r),
|
|
border: Border.all(
|
|
color: Color(0xFFBB474A).withOpacity(0.4),
|
|
width: 0.8,
|
|
),
|
|
),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
CustomText(
|
|
text: "Get 10% off on your first trip",
|
|
color: Color(0xFF262626),
|
|
size: 14.sp,
|
|
),
|
|
SizedBox(height: 7.h),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.start,
|
|
children: [
|
|
CustomText(
|
|
text: "View all coupons",
|
|
color: Color(0xFFF95F62),
|
|
size: 12,
|
|
),
|
|
SizedBox(width: 3.w),
|
|
Icon(Icons.arrow_right, color: Color(0xFFF95F62)),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
|
|
const Spacer(),
|
|
Container(
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal: 12.w,
|
|
vertical: 10.h,
|
|
),
|
|
decoration: BoxDecoration(
|
|
border: Border.all(color: Color(0xFFF95F62)),
|
|
borderRadius: BorderRadius.circular(8.r),
|
|
),
|
|
child: CustomText(
|
|
text: "Apply",
|
|
color: Color(0xFFF95F62),
|
|
size: 14.sp,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
|
|
SizedBox(height: 15.h),
|
|
|
|
DashedDivider(
|
|
color: Color(0xFFACACAC),
|
|
thickness: 1.h,
|
|
dashLength: 4,
|
|
dashSpace: 4,
|
|
),
|
|
SizedBox(height: 10.h),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
CustomText(text: "Subtotal", size: 14.sp),
|
|
CustomText(
|
|
text: "\$49.50",
|
|
size: 14.sp,
|
|
weight: FontWeight.w500,
|
|
),
|
|
],
|
|
),
|
|
SizedBox(height: 14.h),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
CustomText(text: "Discount", size: 14.sp),
|
|
CustomText(
|
|
text: "-7.20%",
|
|
size: 14.sp,
|
|
weight: FontWeight.w500,
|
|
),
|
|
],
|
|
),
|
|
SizedBox(height: 10.h),
|
|
DashedDivider(
|
|
color: Color(0xFFACACAC),
|
|
thickness: 1.h,
|
|
dashLength: 4,
|
|
dashSpace: 4,
|
|
),
|
|
SizedBox(height: 10.h),
|
|
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
CustomText(text: 'Total', size: 14.sp),
|
|
SizedBox(height: 4.h),
|
|
CustomText(
|
|
text: "Including \$2.24 in taxes",
|
|
size: 12.sp,
|
|
color: Colors.black.withOpacity(0.6),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
CustomText(
|
|
text: "\$42.60",
|
|
size: 24.sp,
|
|
weight: FontWeight.w500,
|
|
),
|
|
],
|
|
),
|
|
const Spacer(),
|
|
CustomFilledButton(
|
|
onTap: () {},
|
|
label: "Login to Checkout",
|
|
),
|
|
SizedBox(height: 25.h,)
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|