contact us detaile screen ui

This commit is contained in:
jayesh
2024-03-26 13:46:22 +05:30
parent ddd525d469
commit 9d2f9abc63
7 changed files with 620 additions and 83 deletions

View File

@@ -35,9 +35,10 @@ Widget text18W800(String text) {
);
}
Widget text18W600(String text) {
Widget text18W600(String text, {TextAlign textAl = TextAlign.start}) {
return Text(
text,
textAlign: textAl,
style: TextStyle(
fontSize: 18.sp,
color: Colors.white,
@@ -130,12 +131,12 @@ Widget text14W600_1B1B1B(String text) {
);
}
Widget text16W600(String text) {
Widget text16W600(String text, {Color clr = Colors.white}) {
return Text(
text,
style: TextStyle(
fontSize: 16.sp,
color: Colors.white,
color: clr,
fontWeight: FontWeight.w600,
fontFamily: 'manrope'),
);
@@ -306,8 +307,6 @@ Widget text14W400_979797(String text) {
);
}
Widget text12W400_979797(String text) {
return Text(
text,

View File

@@ -3,6 +3,36 @@ import 'dart:io';
import 'package:get/get.dart';
class ContactUsController extends GetxController {
//contact us page controller
RxList<File?> attachmentFileList = [File("")].obs;
RxList<String> attachmentPathNameList = [""].obs;
//contact us details page controller
RxList<File?> attachmentFileDetailsList = [File("")].obs;
RxList<String> attachmentPathNameDetailsList = [""].obs;
RxList<dynamic> contactUsDetailsChatContent = [
{
"initial_name": "SM",
"date": "16 Feb 2024, 11 : 35PM",
"content": """ Dear Customer,
Thank you for contacting Traders Circuit
Your Service reference no is 18663765
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to
using 'Content here, content here', making it look like readable English.
Regards,
Centralised Service Desk
Traders Circuit""",
},
{
"initial_name": "AM",
"date": "16 Feb 2024, 11 : 35PM",
"content": "Thank You.......",
}
].obs;
}

View File

@@ -43,4 +43,5 @@ class RouteName {
//contact us
static const String contactUsMain = '/contactUsMain';
static const String contactUsMainDetails = '/contactUsMainDetails';
}

View File

@@ -29,6 +29,7 @@ import 'package:traderscircuit/view/secureAccess.dart/Fingerprint.dart';
import 'package:traderscircuit/view/secureAccess.dart/Pin.dart';
import 'package:traderscircuit/view/secureAccess.dart/SecureAccess.dart';
import '../../view/Sidemenu/contactUs/contact_us_details.dart';
import '../../view/login/uploadKycImage.dart';
class AppRoutes {
@@ -151,6 +152,10 @@ class AppRoutes {
GetPage(
name: RouteName.contactUsMain,
page: () => const ContactUsMainScreen(),
),
GetPage(
name: RouteName.contactUsMainDetails,
page: () => const ContactUsDetailsScreen(),
)
];
}

View File

@@ -0,0 +1,101 @@
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/svg.dart';
import 'package:gap/gap.dart';
import 'package:get/get.dart';
import 'package:traderscircuit/Utils/text.dart';
import '../../../Utils/Common/commonBotton.dart';
import 'ticket_confirmed_bottom_sheet.dart';
class CancelTicketBottomSheet {
bottomSheet(
BuildContext context,
) {
return showModalBottomSheet(
useSafeArea: true,
isScrollControlled: true,
context: context,
backgroundColor: const Color(0xFF101111),
isDismissible: false,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8.r),
topRight: Radius.circular(8.r),
),
),
builder: (BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 20),
child: Wrap(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: [
GestureDetector(
onTap: () {
Get.back();
},
child: SvgPicture.asset(
"assets/images/svg/cross_cancel.svg")),
],
),
const Gap(16),
Container(
margin: const EdgeInsets.symmetric(horizontal: 15),
child: Center(
child: text18W600(
"Are You Sure You want to Close the Ticket?",
textAl: TextAlign.center),
),
),
const Gap(25),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 17, vertical: 20),
child: Row(
children: [
Expanded(
child: SizedBox(
width: 191.w,
child: kycBtn(
text: "Yes",
onTap: () {
Get.back();
},
bgClr: const Color(0xFF6C0000),
borderClr: const Color(0xFF9A0000),
),
),
),
const Gap(16),
Expanded(
child: SizedBox(
width: 191.w,
child: kycBtn(
text: "No",
onTap: () {
Get.back();
},
bgClr: const Color(0xFF111313),
borderClr: const Color(0xFF9A0000),
),
),
),
],
),
),
const Gap(25),
],
)
],
),
);
},
);
}
}

View File

@@ -0,0 +1,392 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/svg.dart';
import 'package:gap/gap.dart';
import 'package:get/get.dart';
import 'package:traderscircuit/controller/contact_us_controller.dart';
import '../../../Utils/Common/CommonAppbar.dart';
import '../../../Utils/Common/CustomTextFormField.dart';
import '../../../Utils/Common/FilePicker.dart';
import '../../../Utils/Common/commonBotton.dart';
import '../../../Utils/text.dart';
import '../../onBoarding/splashScreen1.dart';
import 'cancel_ticket_bottom_sheet.dart';
class ContactUsDetailsScreen extends StatefulWidget {
const ContactUsDetailsScreen({super.key});
@override
State<ContactUsDetailsScreen> createState() => _ContactUsDetailsScreenState();
}
class _ContactUsDetailsScreenState extends State<ContactUsDetailsScreen> {
ContactUsController contactUsController = Get.put(ContactUsController());
TextEditingController queriesTextController = TextEditingController();
@override
Widget build(BuildContext context) {
final GlobalKey<FormState> queriesForm = GlobalKey<FormState>();
return Obx(
() => Form(
key: queriesForm,
child: Scaffold(
appBar: CommonAppbar(
height: 75,
titleTxt: "",
customActionWidget: text16W400(""),
),
backgroundColor: Colors.black,
extendBody: true,
body: Stack(
children: [
const CommonBlurLeft(),
const CommonBlurRight(),
Stack(children: [
SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 18, vertical: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
//physics: const NeverScrollableScrollPhysics(),
children: [
text25W600("Contact Us"),
const Gap(20),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
text22W600("#18663765"),
const Gap(10),
text16W500(
"RESOLVED",
clr: const Color(0xFF34C759),
),
],
),
text16W400("16 Feb 2024, 11 : 35 PM"),
],
),
const Gap(15),
const Divider(
thickness: 1,
color: Color(0xFF242424),
),
const Gap(20),
text16W600("Ticket Category"),
const Gap(10),
text16W400(
"It is a long established fact that a reader It is a long established fact that a reader It is a long established fact that a reader"),
contactUsController
.attachmentPathNameDetailsList.isEmpty
? const SizedBox()
: const Gap(15),
contactUsController
.attachmentPathNameDetailsList.isEmpty
? const SizedBox()
: ListView.builder(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: contactUsController
.attachmentPathNameDetailsList.length,
itemBuilder: (ctx, index) {
return Container(
width: 1.sw,
height: 42.h,
margin: const EdgeInsets.symmetric(
vertical: 6,
),
decoration: BoxDecoration(
color: const Color(0xFF0C0C0C),
borderRadius:
BorderRadius.circular(4),
border: Border.all(
width: 1,
color: const Color(0xFF3A3A3A))),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
const Gap(6),
SvgPicture.asset(
"assets/images/svg/attachment_pin.svg"),
const Gap(6),
Container(
width: 0.7.sw,
child: FittedBox(
child: text12W400(
contactUsController
.attachmentPathNameDetailsList[
index]),
),
),
],
),
GestureDetector(
onTap: () {
contactUsController
.attachmentPathNameDetailsList
.removeAt(index);
contactUsController
.attachmentFileDetailsList
.removeAt(index);
},
child: Container(
margin: const EdgeInsets.only(
right: 20),
child: SvgPicture.asset(
"assets/images/svg/cross_cancel.svg",
color:
const Color(0xFF818181),
width: 10,
height: 10,
),
)),
],
),
);
}),
contactUsController
.contactUsDetailsChatContent.isEmpty
? const SizedBox()
: const Gap(18),
ListView.builder(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: contactUsController
.contactUsDetailsChatContent.length +
1,
itemBuilder: (ctx, index) {
return index ==
contactUsController
.contactUsDetailsChatContent.length
? Container(
margin: EdgeInsets.only(top: 20),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: [
Stack(
children: [
CustomTextFormField3(
texttype:
TextInputType.multiline,
hintText:
"Enter some text...",
textEditingController:
queriesTextController,
maxlines: 8,
validator: (value) {
if (value.isEmpty) {
return 'Enter your Content';
} else if (value
.toString()
.length <
30) {
return 'Content should be minimum 30 characters';
}
return null;
},
inputFormatters: [
LengthLimitingTextInputFormatter(
200),
],
),
Positioned(
bottom: 15,
left: 37,
right: 37,
child: SizedBox(
width: 200.w,
child: kycBtn(
text: "Close Ticket",
onTap: () {
CancelTicketBottomSheet()
.bottomSheet(
context);
},
bgClr: const Color(
0xFF111313),
borderClr: const Color(
0xFF990000),
),
),
)
],
),
contactUsController
.attachmentPathNameDetailsList
.length >=
3
? const SizedBox()
: const Gap(10),
contactUsController
.attachmentPathNameDetailsList
.length >=
3
? const SizedBox()
: InkWell(
onTap: () async {
var result =
await FilePickerMethod()
.pickFile();
if (result != null) {
contactUsController
.attachmentPathNameDetailsList
.clear();
for (var a in result) {
contactUsController
.attachmentFileDetailsList
.add(a);
}
for (var a
in contactUsController
.attachmentFileDetailsList) {
contactUsController
.attachmentPathNameDetailsList
.add(FilePickerMethod()
.extractFileName(
a?.path ??
''));
}
}
},
child: Row(
mainAxisAlignment:
MainAxisAlignment.end,
children: [
SvgPicture.asset(
"assets/images/svg/attachment_pin.svg"),
const Gap(6),
text12W400(
"Add Attachment (Max 32MB / Optional)"),
],
),
),
const Gap(20),
Padding(
padding:
const EdgeInsets.symmetric(
// horizontal: 10,
vertical: 20),
child: SizedBox(
width: Get.width,
child: kycBtn(
text: "Submit",
onTap: () {
final isValid = queriesForm
.currentState
?.validate();
if (isValid!) {
contactUsController
.contactUsDetailsChatContent
.add({
"initial_name": "AM",
"date":
"16 Feb 2024, 11 : 35PM",
"content":
queriesTextController
.text,
});
queriesTextController
.clear();
}
},
bgClr:
const Color(0xFF6C0000),
borderClr:
const Color(0xFF990000),
),
),
),
],
),
)
: Container(
width: 1.sw,
margin: const EdgeInsets.symmetric(
vertical: 5,
),
decoration: BoxDecoration(
color: const Color(0xFF0C0C0C),
borderRadius:
BorderRadius.circular(8),
gradient: LinearGradient(
begin:
const Alignment(0.98, -0.21),
end: const Alignment(-0.98, 0.21),
colors: [
Colors.white.withOpacity(
0.03999999910593033),
Colors.white.withOpacity(
0.05999999865889549)
],
),
border: Border.all(
width: 1,
color:
const Color(0xFF3A3A3A))),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
CircleAvatar(
radius: 18,
backgroundColor:
Colors.white,
child: Center(
child: text16W600(
contactUsController
.contactUsDetailsChatContent[
index]
["initial_name"],
clr: const Color(
0xFF535353)),
),
),
text14W500(
contactUsController
.contactUsDetailsChatContent[
index]["date"],
),
],
),
const Gap(18),
text16W400(
contactUsController
.contactUsDetailsChatContent[
index]["content"],
)
],
),
));
}),
]),
),
)
]),
],
),
),
),
);
}
}

View File

@@ -3,6 +3,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:gap/gap.dart';
import 'package:get/get.dart';
import 'package:traderscircuit/controller/contact_us_controller.dart';
import 'package:traderscircuit/resources/routes/route_name.dart';
import '../../../Utils/Common/CommonAppbar.dart';
import '../../../Utils/Common/commonBotton.dart';
@@ -122,92 +123,100 @@ class _ContactUsMainScreenState extends State<ContactUsMainScreen> {
}
Widget ticketCardWidget(index, type) {
ContactUsController contactUsController = Get.put(ContactUsController());
return dataL[index]["type"] != type && type != "ALL"
? SizedBox()
: Container(
width: Get.width,
height: 190,
margin: EdgeInsets.only(bottom: 18, top: index == 0 ? 15 : 0),
decoration: ShapeDecoration(
gradient: LinearGradient(
begin: const Alignment(0.98, -0.21),
end: const Alignment(-0.98, 0.21),
colors: [
Colors.white.withOpacity(0.03999999910593033),
Colors.white.withOpacity(0.05999999865889549)
],
? const SizedBox()
: InkWell(
onTap: () {
contactUsController.attachmentFileDetailsList.clear();
contactUsController.attachmentPathNameDetailsList.clear();
Get.toNamed(RouteName.contactUsMainDetails);
},
child: Container(
width: Get.width,
height: 190,
margin: EdgeInsets.only(bottom: 18, top: index == 0 ? 15 : 0),
decoration: ShapeDecoration(
gradient: LinearGradient(
begin: const Alignment(0.98, -0.21),
end: const Alignment(-0.98, 0.21),
colors: [
Colors.white.withOpacity(0.03999999910593033),
Colors.white.withOpacity(0.05999999865889549)
],
),
shape: RoundedRectangleBorder(
side: const BorderSide(width: 1, color: Color(0xFF393939)),
borderRadius: BorderRadius.circular(8),
),
),
shape: RoundedRectangleBorder(
side: const BorderSide(width: 1, color: Color(0xFF393939)),
borderRadius: BorderRadius.circular(8),
),
),
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 15,
horizontal: 10,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
text16W600(dataL[index]["id"]),
Row(
children: [
text16W500(dataL[index]["type"],
clr: dataL[index]["type"] == "OPEN"
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 15,
horizontal: 10,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
text16W600(dataL[index]["id"]),
Row(
children: [
text16W500(dataL[index]["type"],
clr: dataL[index]["type"] == "OPEN"
? const Color(0xFFFFAD31)
: dataL[index]["type"] == "CLOSED"
? const Color(0xFF95CCFF)
: const Color(0xFF34C759)),
const Gap(8),
CircleAvatar(
radius: 10,
backgroundColor: dataL[index]["type"] == "OPEN"
? const Color(0xFFFFAD31)
: dataL[index]["type"] == "CLOSED"
? const Color(0xFF95CCFF)
: const Color(0xFF34C759)),
const Gap(8),
CircleAvatar(
radius: 10,
backgroundColor: dataL[index]["type"] == "OPEN"
? const Color(0xFFFFAD31)
: dataL[index]["type"] == "CLOSED"
? const Color(0xFF95CCFF)
: const Color(0xFF34C759),
child: const Center(
child: Icon(
Icons.check_rounded,
size: 15,
color: Colors.white,
: const Color(0xFF34C759),
child: const Center(
child: Icon(
Icons.check_rounded,
size: 15,
color: Colors.white,
),
),
),
)
],
)
],
),
],
),
const Gap(10),
text16W600(dataL[index]["date"]),
const Gap(5),
text16W400(dataL[index]["category"]),
const Gap(22),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 12,
),
],
),
const Gap(10),
text16W600(dataL[index]["date"]),
const Gap(5),
text16W400(dataL[index]["category"]),
const Gap(22),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 12,
),
width: Get.width,
height: 50,
decoration: ShapeDecoration(
color: Colors.black.withOpacity(0.03999999910593033),
shape: RoundedRectangleBorder(
side:
const BorderSide(width: 1, color: Color(0xFF393939)),
borderRadius: BorderRadius.circular(8),
width: Get.width,
height: 50,
decoration: ShapeDecoration(
color: Colors.black.withOpacity(0.03999999910593033),
shape: RoundedRectangleBorder(
side: const BorderSide(
width: 1, color: Color(0xFF393939)),
borderRadius: BorderRadius.circular(8),
),
),
),
child: Center(
child: text16W400(dataL[index]["desc"],
clr: const Color(0xFF9E9E9E),
textOver: TextOverflow.ellipsis),
),
)
],
child: Center(
child: text16W400(dataL[index]["desc"],
clr: const Color(0xFF9E9E9E),
textOver: TextOverflow.ellipsis),
),
)
],
),
),
),
);