Completed the new design for the Appointment Flow
parent
3390112aa3
commit
3f0178e1cd
@ -0,0 +1,265 @@
|
||||
import 'package:easy_localization/easy_localization.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:mc_common_app/classes/consts.dart';
|
||||
import 'package:mc_common_app/extensions/int_extensions.dart';
|
||||
import 'package:mc_common_app/extensions/string_extensions.dart';
|
||||
import 'package:mc_common_app/generated/locale_keys.g.dart';
|
||||
import 'package:mc_common_app/theme/colors.dart';
|
||||
import 'package:mc_common_app/widgets/button/show_fill_button.dart';
|
||||
import 'package:mc_common_app/widgets/common_widgets/app_bar.dart';
|
||||
import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';
|
||||
|
||||
class ReviewAppointment extends StatelessWidget {
|
||||
const ReviewAppointment({Key? key}) : super(key: key);
|
||||
|
||||
Widget buildBranchInfoCard({
|
||||
required String branchImageUrl,
|
||||
required String branchName,
|
||||
required String branchRatings,
|
||||
required String branchLocation,
|
||||
}) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
bottom: 10,
|
||||
left: 21,
|
||||
right: 21,
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Image.asset(
|
||||
branchImageUrl,
|
||||
width: 80,
|
||||
height: 60,
|
||||
fit: BoxFit.cover,
|
||||
),
|
||||
12.width,
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
children: [
|
||||
branchName.toText(fontSize: 16, isBold: true),
|
||||
Row(
|
||||
children: [
|
||||
LocaleKeys.location.tr().toText(color: MyColors.lightTextColor, fontSize: 12),
|
||||
2.width,
|
||||
":$branchLocation".toText(fontSize: 12),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
children: [
|
||||
branchRatings.toText(
|
||||
isUnderLine: true,
|
||||
isBold: true,
|
||||
fontSize: 12,
|
||||
),
|
||||
2.width,
|
||||
MyAssets.starIcon.buildSvg(width: 12),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
).onPress(() {}).toWhiteContainer(width: double.infinity, allPading: 12));
|
||||
}
|
||||
|
||||
Widget buildServicesSubSection({required String title, required List<String> itemList}) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
title.toText(fontSize: 16, isBold: true),
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: List.generate(
|
||||
itemList.length,
|
||||
(index) => itemList[index].toText(
|
||||
fontSize: 12,
|
||||
color: MyColors.lightTextColor,
|
||||
isBold: true,
|
||||
)),
|
||||
),
|
||||
],
|
||||
).paddingOnly(bottom: 14);
|
||||
}
|
||||
|
||||
Widget buildServicesInfoCard() {
|
||||
return SizedBox(
|
||||
width: double.infinity,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: List.generate(
|
||||
2,
|
||||
(index) => buildServicesSubSection(
|
||||
title: "Mechanic",
|
||||
itemList: [
|
||||
"Engine Check : 450 SAR",
|
||||
"Gear Check : 700 SAR",
|
||||
"Gear Check : 700 SAR",
|
||||
"Gear Check : 700 SAR",
|
||||
],
|
||||
),
|
||||
),
|
||||
).toWhiteContainer(width: double.infinity, allPading: 12, margin: EdgeInsets.symmetric(horizontal: 21)),
|
||||
);
|
||||
}
|
||||
|
||||
Widget buildTimeAndLocationInfoCard() {
|
||||
return SizedBox(
|
||||
width: double.infinity,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
"Time & Location".toText(fontSize: 16, isBold: true),
|
||||
3.height,
|
||||
Row(children: [
|
||||
"Date & Time: ".toText(fontSize: 12, color: MyColors.lightTextColor, isBold: true),
|
||||
"2nd Feb, 2023 at 09:30 AM".toText(fontSize: 12, isBold: true),
|
||||
]),
|
||||
Row(children: [
|
||||
"Location: ".toText(fontSize: 12, color: MyColors.lightTextColor, isBold: true),
|
||||
"PM58+F97, Al Olaya, Riyadh 12333".toText(fontSize: 12, isBold: true),
|
||||
]),
|
||||
],
|
||||
).toWhiteContainer(width: double.infinity, allPading: 12, margin: EdgeInsets.only(left: 21, right: 21, top: 10)),
|
||||
);
|
||||
}
|
||||
|
||||
Widget buildChargesBreakDown() {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
"Services".toText(fontSize: 16, isBold: true),
|
||||
Column(
|
||||
children: List.generate(
|
||||
5,
|
||||
(index) => Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
"Gear Kit".toText(fontSize: 12, color: MyColors.lightTextColor, isBold: true),
|
||||
"200 SAR".toText(fontSize: 12, isBold: true),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
"1149 SAR".toText(fontSize: 16, isBold: true),
|
||||
],
|
||||
),
|
||||
10.height,
|
||||
Divider(
|
||||
thickness: 0.7,
|
||||
),
|
||||
"Home Location".toText(fontSize: 16, isBold: true),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
"10km ".toText(fontSize: 12, color: MyColors.lightTextColor, isBold: true),
|
||||
"5 x 10".toText(fontSize: 12, isBold: true),
|
||||
],
|
||||
),
|
||||
8.height,
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
"50 SAR".toText(fontSize: 16, isBold: true),
|
||||
],
|
||||
),
|
||||
10.height,
|
||||
Divider(
|
||||
thickness: 0.7,
|
||||
),
|
||||
10.height,
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
"Total Amount ".toText(fontSize: 16, isBold: true),
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
"120".toText(fontSize: 29, isBold: true),
|
||||
2.width,
|
||||
"SAR".toText(color: MyColors.lightTextColor, fontSize: 16, isBold: true).paddingOnly(bottom: 5),
|
||||
],
|
||||
)
|
||||
],
|
||||
),
|
||||
10.height,
|
||||
],
|
||||
).toWhiteContainer(width: double.infinity, allPading: 12, margin: EdgeInsets.only(left: 21, right: 21, top: 10, bottom: 21));
|
||||
}
|
||||
|
||||
Widget buildNextButtonFooter() {
|
||||
return Container(
|
||||
height: 90,
|
||||
color: MyColors.white,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
Divider(thickness: 0.7, height: 3),
|
||||
10.height,
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
child: ShowFillButton(
|
||||
maxHeight: 55,
|
||||
backgroundColor: MyColors.primaryColor,
|
||||
title: "Book Appointment",
|
||||
onPressed: () {},
|
||||
).paddingOnly(bottom: 12, left: 21, right: 21),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: CustomAppBar(
|
||||
title: "Review Appointment",
|
||||
isRemoveBackButton: false,
|
||||
isDrawerEnabled: false,
|
||||
actions: [MyAssets.searchIcon.buildSvg().paddingOnly(right: 21)],
|
||||
onBackButtonTapped: () => Navigator.pop(context),
|
||||
),
|
||||
body: Stack(
|
||||
alignment: Alignment.bottomCenter,
|
||||
children: [
|
||||
SingleChildScrollView(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
buildBranchInfoCard(
|
||||
branchImageUrl: MyAssets.bnCar,
|
||||
branchLocation: " 3km",
|
||||
branchName: "Al Ahmed Maintenance",
|
||||
branchRatings: "4.9",
|
||||
),
|
||||
buildServicesInfoCard(),
|
||||
buildTimeAndLocationInfoCard(),
|
||||
buildChargesBreakDown(),
|
||||
],
|
||||
),
|
||||
),
|
||||
buildNextButtonFooter(),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue