195 lines
6.4 KiB
Dart
195 lines
6.4 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_bloc/flutter_bloc.dart';
|
|
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
|
import 'package:google_fonts/google_fonts.dart';
|
|
import '../../common_packages/app_bar.dart';
|
|
import '../blocs/postcard_creation_bloc.dart';
|
|
import '../blocs/postcard_creation_events.dart';
|
|
import '../blocs/postcard_creation_state.dart';
|
|
import '../widgets/postcard_preview_widget.dart';
|
|
|
|
class PostcardCheckoutPageView extends StatelessWidget {
|
|
const PostcardCheckoutPageView({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return BlocBuilder<PostcardCreationBloc, PostcardCreationState>(
|
|
builder: (context, state) {
|
|
final bloc = context.read<PostcardCreationBloc>();
|
|
return SafeArea(
|
|
child: SingleChildScrollView(
|
|
padding: const EdgeInsets.all(16),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
CommonAppBar(isWhiteLogo: false, isProfilePage: false),
|
|
// Header
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Text(
|
|
"Checkout",
|
|
style: GoogleFonts.poppins(
|
|
fontSize: 20.sp,
|
|
fontWeight: FontWeight.w600,
|
|
color: const Color(0xff1A1A1A),
|
|
),
|
|
),
|
|
TextButton(
|
|
onPressed: () {
|
|
// TODO: Save as draft
|
|
},
|
|
child: Text(
|
|
"Save as draft",
|
|
style: GoogleFonts.poppins(
|
|
fontSize: 14.sp,
|
|
fontWeight: FontWeight.w500,
|
|
color: const Color(0xffF95F62),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
|
|
const SizedBox(height: 16),
|
|
|
|
|
|
PostCardPreviewWidget(
|
|
imagePath: state.imagePath ?? "",
|
|
message: state.message ?? "",
|
|
selectedFont: state.selectedFont,
|
|
),
|
|
|
|
SizedBox(height: 60.h),
|
|
|
|
// 💰 Payment Summary
|
|
Text(
|
|
"Payment summary",
|
|
style: TextStyle(
|
|
fontSize: 12.sp,
|
|
fontWeight: FontWeight.w400,
|
|
color: const Color(0xff999999),
|
|
),
|
|
),
|
|
Divider(color: Color(0xffEDEDED)),
|
|
const SizedBox(height: 5),
|
|
|
|
_buildPaymentRow("Subtotal", "\$ 50"),
|
|
const SizedBox(height: 20),
|
|
_buildPaymentRow(
|
|
"Discount",
|
|
"\$ 20",
|
|
highlight: true,
|
|
),
|
|
const SizedBox(height: 8),
|
|
Divider(color: Colors.black),
|
|
_buildPaymentRow("Grand Total", "\$ 30", size: 20.sp),
|
|
const SizedBox(height: 28),
|
|
Container(
|
|
color: Color(0xffFAFAFA),
|
|
height: 10,
|
|
),
|
|
const SizedBox(height: 10),
|
|
Row(
|
|
children: [
|
|
const Icon(Icons.home_outlined,
|
|
color: Color(0xffF95F62), size: 20),
|
|
const SizedBox(width: 10),
|
|
Expanded(
|
|
child: Text(
|
|
"Unit 7, Level 3, Dummy Towers 33.......",
|
|
style: GoogleFonts.poppins(
|
|
fontSize: 13.sp,
|
|
color: const Color(0xff2D3134),
|
|
),
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
),
|
|
IconButton(
|
|
onPressed: () {
|
|
|
|
},
|
|
icon: const Icon(Icons.edit_outlined,
|
|
color: Color(0xffF95F62), size: 18),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 10),
|
|
Container(
|
|
color: Color(0xffFAFAFA),
|
|
height: 10,
|
|
),
|
|
|
|
const SizedBox(height: 40),
|
|
|
|
// 🧾 Pay Button
|
|
SizedBox(
|
|
width: double.infinity,
|
|
child: ElevatedButton(
|
|
onPressed: () {
|
|
bloc.add(GoToNextStep());
|
|
},
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: const Color(0xffF95F62),
|
|
padding: EdgeInsets.symmetric(vertical: 16.h),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(40),
|
|
),
|
|
),
|
|
child: Text(
|
|
"Pay \$30",
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 14.sp,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
|
|
/// 💵 Helper for payment summary row
|
|
Widget _buildPaymentRow(String label, String value,
|
|
{bool highlight = false, double? size}) {
|
|
return Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Text(
|
|
label,
|
|
style: GoogleFonts.poppins(
|
|
fontSize: 12.sp,
|
|
fontWeight: FontWeight.w400,
|
|
color: const Color(0xff2D3134),
|
|
),
|
|
),
|
|
Container(
|
|
decoration: highlight
|
|
? BoxDecoration(
|
|
color: const Color(0xffFDCDCE),
|
|
borderRadius: BorderRadius.circular(6),
|
|
border: Border.all(color: Color(0xffEDEDED))
|
|
)
|
|
: null,
|
|
padding:
|
|
EdgeInsets.symmetric(horizontal: highlight ? 6 : 0, vertical: 2),
|
|
child: Text(
|
|
value,
|
|
style: GoogleFonts.poppins(
|
|
fontSize: size ?? 12.sp,
|
|
fontWeight: FontWeight.w400,
|
|
color: const Color(0xff2D3134),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|