401 lines
17 KiB
Dart
401 lines
17 KiB
Dart
import 'package:citycards_customer/checkout/bloc/email_verify_bloc.dart';
|
|
import 'package:citycards_customer/checkout/repository/auth_local_repository.dart';
|
|
import 'package:citycards_customer/checkout/widget/all_coupons_bottomsheet.dart';
|
|
import 'package:citycards_customer/checkout/widget/login_email_bottomsheet.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_bloc/flutter_bloc.dart';
|
|
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
|
|
|
class CheckoutView extends StatelessWidget {
|
|
const CheckoutView({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return BlocProvider(
|
|
create: (context) => EmailVerifyBloc(),
|
|
child: Scaffold(
|
|
resizeToAvoidBottomInset: true,
|
|
backgroundColor: Colors.white,
|
|
body: SafeArea(
|
|
child: Padding(
|
|
padding: EdgeInsets.symmetric(horizontal: 20.w),
|
|
child: Column(
|
|
children: [
|
|
CommonAppBar(
|
|
isWhiteLogo: false,
|
|
isProfilePage: false,
|
|
showCart: false,
|
|
showDivider: true,
|
|
),
|
|
Row(
|
|
children: [
|
|
GestureDetector(
|
|
onTap: () {
|
|
Navigator.pop(context);
|
|
},
|
|
child: 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: 105.w,
|
|
height: 123.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: 5.h),
|
|
CustomText(
|
|
text: "2 Days",
|
|
color: Color(0xFF8E8E8E),
|
|
size: 12.sp,
|
|
),
|
|
SizedBox(height: 5.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),
|
|
Text.rich(
|
|
TextSpan(
|
|
children: [
|
|
TextSpan(
|
|
text: "Qty:",
|
|
style: TextStyle(
|
|
color: Color(0xFF8E8E8E),
|
|
fontSize: 12.sp,
|
|
),
|
|
),
|
|
TextSpan(
|
|
text: " 2",
|
|
style: TextStyle(
|
|
color: Color(0xFF000000),
|
|
fontSize: 12.sp,
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
|
|
SizedBox(height: 5.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),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
|
|
Container(
|
|
width: 35.w,
|
|
height: 123.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: [
|
|
GestureDetector(
|
|
onTap: () {
|
|
showModalBottomSheet(
|
|
context: context,
|
|
isScrollControlled: true,
|
|
backgroundColor: Colors.white,
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.vertical(
|
|
top: Radius.circular(12.r),
|
|
),
|
|
),
|
|
builder: (_) => AllCouponsBottomsheet(),
|
|
);
|
|
},
|
|
child: 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: 20.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(),
|
|
FutureBuilder(
|
|
future: LocalAuth().getloggedIn(),
|
|
builder: (context, snap) {
|
|
final isLoggedIn = snap.data ?? false;
|
|
return BlocBuilder<EmailVerifyBloc, EmailVerifyState>(
|
|
builder: (context, state){
|
|
return CustomFilledButton(
|
|
onTap: () async {
|
|
final rootContext = context;
|
|
showModalBottomSheet(
|
|
backgroundColor: Colors.white,
|
|
context: context,
|
|
isScrollControlled: true,
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.vertical(
|
|
top: Radius.circular(12.r),
|
|
),
|
|
),
|
|
builder: (_) => BlocProvider(
|
|
create: (rootContext) => EmailVerifyBloc(),
|
|
child: LoginEmailBottomsheet(
|
|
rootContext: rootContext,
|
|
),
|
|
),
|
|
);
|
|
},
|
|
width: double.infinity,
|
|
label: isLoggedIn || state.loggedIn ? "Proceed to Checkouts" :"Login to Checkout",
|
|
);
|
|
},
|
|
);
|
|
},
|
|
),
|
|
SizedBox(height: 25.h),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|