apksel-dev/apskel-pos-flutter-v2
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

checkout page

Browse Source
This commit is contained in:
efrilm
2025-10-27 01:54:35 +07:00
parent e8fd683077
commit 3135dde317
9 changed files with 530 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/presentation/pages/checkout/checkout_page.dart
+52
View File
@@ -0,0 +1,52 @@
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../../application/checkout/checkout_form/checkout_form_bloc.dart';
import '../../../common/theme/theme.dart';
import '../../components/spaces/space.dart';
import 'widgets/checkout_left_panel.dart';
import 'widgets/checkout_right_panel.dart';
@RoutePage()
class CheckoutPage extends StatelessWidget {
const CheckoutPage({super.key});
@override
Widget build(BuildContext context) {
return SafeArea(
child: Hero(
tag: 'checkout_screen',
child: BlocBuilder<CheckoutFormBloc, CheckoutFormState>(
builder: (context, state) {
final price = state.items.fold(
0,
(previousValue, element) =>
previousValue +
(element.product.price.toInt() +
(element.variant?.priceModifier.toInt() ?? 0)) *
element.quantity,
);
return Scaffold(
backgroundColor: AppColor.white,
body: Row(
children: [
Expanded(
flex: 3,
child: CheckoutLeftPanel(
checkoutState: state,
price: price,
),
),
SpaceWidth(2),
Expanded(flex: 3, child: CheckoutRightPanel()),
],
),
);
},
),
),
);
}
}
lib/presentation/pages/checkout/widgets/checkout_left_panel.dart
+199
View File
@@ -0,0 +1,199 @@
import 'package:flutter/widgets.dart';
import '../../../../application/checkout/checkout_form/checkout_form_bloc.dart';
import '../../../../common/extension/extension.dart';
import '../../../../common/theme/theme.dart';
import '../../../components/border/dashed_border.dart';
import '../../../components/card/order_menu.dart';
import '../../../components/page/page_title.dart';
import '../../../components/spaces/space.dart';
class CheckoutLeftPanel extends StatelessWidget {
final CheckoutFormState checkoutState;
final int price;
const CheckoutLeftPanel({
super.key,
required this.checkoutState,
required this.price,
});
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
PageTitle(
title: 'Konfirmasi',
subtitle: checkoutState.table != null
? 'Pesanan Meja ${checkoutState.table?.tableName ?? "-"}'
: 'Pesanan',
actionWidget: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
border: Border.all(color: AppColor.primary, width: 1.0),
),
padding: const EdgeInsets.all(8.0),
child: Text(
checkoutState.orderType.value,
style: TextStyle(
color: AppColor.primary,
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
),
],
),
Container(
padding: const EdgeInsets.all(16.0).copyWith(bottom: 8),
decoration: const BoxDecoration(
border: Border(
bottom: BorderSide(color: AppColor.border, width: 1.0),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Item',
style: AppStyle.lg.copyWith(
color: AppColor.primary,
fontWeight: FontWeight.w600,
),
),
SpaceWidth(160),
SizedBox(
width: 50.0,
child: Text(
'Qty',
style: AppStyle.lg.copyWith(
color: AppColor.primary,
fontWeight: FontWeight.w600,
),
),
),
SizedBox(
child: Text(
'Price',
style: AppStyle.lg.copyWith(
color: AppColor.primary,
fontWeight: FontWeight.w600,
),
),
),
],
),
),
Expanded(
child: ListView.separated(
shrinkWrap: true,
padding: const EdgeInsets.all(16.0).copyWith(top: 8.0),
itemBuilder: (context, index) =>
OrderMenu(data: checkoutState.items[index]),
separatorBuilder: (context, index) => const SpaceHeight(12.0),
itemCount: checkoutState.items.length,
),
),
DashedDivider(color: AppColor.border),
Container(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
if (checkoutState.delivery != null) ...[
Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Pengiriman',
style: AppStyle.md.copyWith(
color: AppColor.black,
fontWeight: FontWeight.w600,
),
),
Text(
checkoutState.delivery?.name ?? '-',
style: AppStyle.md.copyWith(
color: AppColor.black,
fontWeight: FontWeight.w600,
),
),
],
),
const SpaceHeight(8.0),
DashedDivider(color: AppColor.border),
const SpaceHeight(8.0),
],
),
],
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Sub total',
style: AppStyle.md.copyWith(
color: AppColor.black,
fontWeight: FontWeight.w600,
),
),
Text(
price.currencyFormatRp,
style: AppStyle.md.copyWith(
color: AppColor.black,
fontWeight: FontWeight.w600,
),
),
],
),
const SpaceHeight(8.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Pajak PB1',
style: AppStyle.md.copyWith(
color: AppColor.black,
fontWeight: FontWeight.w400,
),
),
Text(
'${checkoutState.tax}% (Rp. 0)',
style: AppStyle.md.copyWith(
color: AppColor.black,
fontWeight: FontWeight.w500,
),
),
],
),
const SpaceHeight(8.0),
DashedDivider(color: AppColor.border),
const SpaceHeight(8.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Total',
style: AppStyle.xl.copyWith(
color: AppColor.black,
fontWeight: FontWeight.bold,
),
),
Text(
price.currencyFormatRp,
style: const TextStyle(
color: AppColor.primary,
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
],
),
],
),
),
],
);
}
}
lib/presentation/pages/checkout/widgets/checkout_right_panel.dart
+48
View File
@@ -0,0 +1,48 @@
import 'package:flutter/widgets.dart';
import '../../../../common/theme/theme.dart';
import '../../../components/field/field.dart';
import '../../../components/page/page_title.dart';
class CheckoutRightPanel extends StatelessWidget {
const CheckoutRightPanel({super.key});
@override
Widget build(BuildContext context) {
return Column(
children: [
PageTitle(
title: 'Pembayaran',
isBack: false,
subtitle: 'Silahkan lakukan pembayaran',
),
Expanded(
child: SingleChildScrollView(
child: Column(
children: [
// Container(
// padding: const EdgeInsets.all(16),
// decoration: BoxDecoration(
// color: AppColor.white,
// border: Border(
// bottom: BorderSide(color: AppColor.border, width: 1.0),
// ),
// ),
// child: CustomerAutocomplete(
// controller: customerController,
// selectedCustomer: selectedCustomer,
// onSelected: (customer) {
// setState(() {
// selectedCustomer = customer;
// });
// },
// ),
// ),
],
),
),
),
],
);
}
}