Completed the new design for the Appointment Flow

pull/3/head
FaizHashmiCS22 3 years ago
parent 3390112aa3
commit 3f0178e1cd

@ -2,6 +2,7 @@ import 'package:car_customer_app/views/appointments/appointment_detail_view.dart
import 'package:car_customer_app/views/appointments/appointment_services_list_view.dart';
import 'package:car_customer_app/views/appointments/book_appointments_item_view.dart';
import 'package:car_customer_app/views/appointments/pick_items_view.dart';
import 'package:car_customer_app/views/appointments/review_appointment_view.dart';
import 'package:car_customer_app/views/dashboard/dashboard_page.dart';
import 'package:flutter/cupertino.dart';
import 'package:mc_common_app/config/routes.dart';
@ -20,6 +21,7 @@ class CustomerAppRoutes {
AppRoutes.createAdView: (context) => CreateAdView(),
AppRoutes.bookAppointmenServicesView: (context) => AppointmentServicesListView(),
AppRoutes.bookAppointmentsItemView: (context) => BookAppointmentsItemView(),
AppRoutes.reviewAppointmentView: (context) => ReviewAppointment(),
AppRoutes.paymentMethodsView: (context) => PaymentMethodsView(),
};
}

@ -2,12 +2,16 @@ import 'package:car_customer_app/view_models/appointments_view_model.dart';
import 'package:car_customer_app/views/appointments/widgets/appointment_service_pick_bottom_sheet.dart';
import 'package:flutter/material.dart';
import 'package:mc_common_app/classes/consts.dart';
import 'package:mc_common_app/config/routes.dart';
import 'package:mc_common_app/extensions/int_extensions.dart';
import 'package:mc_common_app/extensions/string_extensions.dart';
import 'package:mc_common_app/models/widgets_models.dart';
import 'package:mc_common_app/theme/colors.dart';
import 'package:mc_common_app/utils/navigator.dart';
import 'package:mc_common_app/views/advertisement/custom_add_button.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/common_widgets/info_bottom_sheet.dart';
import 'package:mc_common_app/widgets/common_widgets/time_slots.dart';
import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';
import 'package:provider/provider.dart';
@ -48,6 +52,73 @@ class AppointmentServicesListView extends StatelessWidget {
TimeSlotModel(isSelected: false, slotId: 19, slot: "29:00"),
];
void priceBreakDownClicked(BuildContext context) {
showModalBottomSheet(
context: context,
isScrollControlled: true,
enableDrag: true,
builder: (BuildContext context) {
return InfoBottomSheet(
title: "Charges Breakdown",
description: 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),
],
),
20.height,
"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),
],
),
30.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),
],
)
],
),
30.height,
],
));
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
@ -125,8 +196,12 @@ class AppointmentServicesListView extends StatelessWidget {
"120".toText(fontSize: 29, isBold: true),
2.width,
"SAR".toText(color: MyColors.lightTextColor, fontSize: 16, isBold: true).paddingOnly(bottom: 5),
Icon(
Icons.arrow_drop_down,
size: 30,
)
],
),
).onPress(() => priceBreakDownClicked(context)),
],
if (true) ...[
8.height,
@ -146,7 +221,31 @@ class AppointmentServicesListView extends StatelessWidget {
],
).toWhiteContainer(width: double.infinity, allPading: 12, margin: const EdgeInsets.symmetric(horizontal: 21, vertical: 10));
},
).expand()
).expand(),
Row(
children: [
Expanded(
child: ShowFillButton(
txtColor: MyColors.black,
maxHeight: 55,
title: "Cancel",
onPressed: () {},
backgroundColor: MyColors.greyButtonColor,
),
),
12.width,
Expanded(
child: ShowFillButton(
maxHeight: 55,
title: "Review",
onPressed: () {
navigateWithName(context, AppRoutes.reviewAppointmentView);
},
backgroundColor: MyColors.darkPrimaryColor,
),
)
],
).paddingAll(21)
],
);
},

@ -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(),
],
),
);
}
}

@ -103,7 +103,9 @@ class AdsFragment extends StatelessWidget {
),
floatingActionButton: FloatingActionButton(
onPressed: () {
context.read<AdVM>().getVehicleTypes();
if (context.read<AdVM>().vehicleTypes.isEmpty) {
context.read<AdVM>().getVehicleTypes();
}
navigateWithName(context, AppRoutes.createAdView);
},

Loading…
Cancel
Save