getChatUiTemplate function
Implementation
String getChatUiTemplate({String? className, String? isLoading}) {
final body = '''
Column(
children: [
// Chat Messages Area
Expanded(
child: Container(
color: AppColors.white,
child: ListView.builder(
reverse: true,
itemCount: 15,
padding: EdgeInsets.symmetric(horizontal: 20.sp, vertical: 20.sp),
itemBuilder: (context, index) {
final isMe = index % 2 != 0;
if (!isMe) {
return Padding(
padding: EdgeInsets.only(bottom: 20.sp),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(left: 45.sp, bottom: 4.sp),
child: TextWidget(
text: "Olivia Smith",
textSize: 14.sp,
fontWeight: FontWeight.w600,
color: AppColors.textPrimary,
),
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CircleAvatar(
radius: 18.sp,
backgroundColor: AppColors.primary.withOpacity(0.1),
child: Icon(Icons.person, color: AppColors.primary, size: 20.sp),
),
SizedBox(width: 8.sp),
Flexible(
child: Container(
padding: EdgeInsets.all(16.sp),
decoration: BoxDecoration(
color: AppColors.primary,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(4.sp),
topRight: Radius.circular(20.sp),
bottomLeft: Radius.circular(20.sp),
bottomRight: Radius.circular(20.sp),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: TextWidget(
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, ",
color: AppColors.white,
textSize: 15.sp,
),
),
Icon(Icons.more_horiz, color: AppColors.white, size: 18.sp),
],
),
SizedBox(height: 8.sp),
TextWidget(
text: "4:30 pm",
color: AppColors.white.withOpacity(0.8),
textSize: 11.sp,
),
],
),
),
),
SizedBox(width: 40.sp),
],
),
],
),
);
} else {
return Padding(
padding: EdgeInsets.only(bottom: 20.sp),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
SizedBox(width: 60.sp),
Flexible(
child: Container(
padding: EdgeInsets.all(16.sp),
decoration: BoxDecoration(
color: AppColors.background.withOpacity(0.5),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.sp),
topRight: Radius.circular(20.sp),
bottomLeft: Radius.circular(20.sp),
bottomRight: Radius.circular(4.sp),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
TextWidget(
text: "Lorem ipsum dolor sit ",
color: AppColors.textPrimary,
textSize: 15.sp,
),
SizedBox(height: 8.sp),
TextWidget(
text: "4:30 pm",
color: AppColors.grey,
textSize: 11.sp,
),
],
),
),
),
],
),
);
}
},
),
),
),
// Message Input Area
Container(
padding: EdgeInsets.symmetric(horizontal: 20.sp, vertical: 15.sp),
decoration: BoxDecoration(
color: AppColors.white,
border: Border(top: BorderSide(color: AppColors.borderColor.withOpacity(0.3))),
),
child: SafeArea(
top: false,
child: Row(
children: [
Expanded(
child: Container(
height: 50.sp,
padding: EdgeInsets.symmetric(horizontal: 15.sp),
decoration: BoxDecoration(
color: AppColors.white,
borderRadius: BorderRadius.circular(25.sp),
border: Border.all(color: AppColors.borderColor),
),
child: Row(
children: [
Expanded(
child: TextField(
decoration: InputDecoration(
hintText: "Enter",
hintStyle: TextStyle(color: AppColors.grey, fontSize: 14.sp),
border: InputBorder.none,
),
),
),
Icon(Icons.emoji_emotions_outlined, color: AppColors.textPrimary.withOpacity(0.6), size: 24.sp),
],
),
),
),
SizedBox(width: 12.sp),
Container(
width: 50.sp,
height: 50.sp,
decoration: const BoxDecoration(
color: AppColors.primary,
shape: BoxShape.circle,
),
child: Center(
child: Icon(Icons.send_rounded, color: AppColors.white, size: 22.sp),
),
),
],
),
),
),
],
)''';
if (className != null) {
return '''CustomBody(
isLoading: ${isLoading ?? 'false'},
padding: EdgeInsets.zero,
appBarLeading: const BackButton(),
centerTitle: false,
titleSpacing: 0,
titleWidget: Row(
children: [
CircleAvatar(
radius: 18.sp,
backgroundColor: AppColors.primary.withOpacity(0.1),
child: Icon(Icons.person, color: AppColors.primary, size: 20.sp),
),
SizedBox(width: 10.sp),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
TextWidget(
text: "Olivia Smith",
textSize: 16.sp,
fontWeight: FontWeight.bold,
color: AppColors.textPrimary,
),
TextWidget(
text: "olvie@gmail.com",
textSize: 12.sp,
color: AppColors.grey,
),
],
),
],
),
actions: [
PopupMenuButton(
icon: const Icon(Icons.more_vert, color: AppColors.textPrimary),
itemBuilder: (context) => [
const PopupMenuItem(
value: 'block',
child: TextWidget(text: 'Block'),
),
],
),
],
child: $body
)''';
}
return body;
}