702 lines
31 KiB
Dart
702 lines
31 KiB
Dart
import 'package:comment_tree/comment_tree.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter/widgets.dart';
|
|
import 'package:flutter_reaction_button/flutter_reaction_button.dart';
|
|
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
|
import 'package:get/get.dart';
|
|
import 'package:regroup/Common/CommonGlassmorphism.dart';
|
|
import 'package:regroup/Common/CommonWidget.dart';
|
|
import 'package:regroup/Utils/Common/CommonAppbar.dart';
|
|
import 'package:regroup/Utils/Common/CustomTextformfield.dart';
|
|
import 'package:regroup/Utils/Common/sized_box.dart';
|
|
import 'package:regroup/Utils/texts.dart';
|
|
import 'package:regroup/resources/routes/route_name.dart';
|
|
|
|
class PostDetailsScreen extends StatefulWidget {
|
|
const PostDetailsScreen({super.key});
|
|
|
|
@override
|
|
State<PostDetailsScreen> createState() => _PostDetailsScreenState();
|
|
}
|
|
|
|
class _PostDetailsScreenState extends State<PostDetailsScreen> {
|
|
List<bool> _hideReplies = List.filled(5, true);
|
|
// bool _hideReplies = true;
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
resizeToAvoidBottomInset: false,
|
|
backgroundColor: const Color(0xFF222935),
|
|
extendBody: true,
|
|
appBar: const CommonAppbar(
|
|
titleTxt: "Post",
|
|
),
|
|
body: Stack(children: [
|
|
Container(
|
|
decoration: const BoxDecoration(
|
|
image: DecorationImage(
|
|
image: AssetImage("assets/images/png/Ellipse 1496.png"),
|
|
fit: BoxFit.fill)),
|
|
),
|
|
SingleChildScrollView(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
postCards(
|
|
profileImg: 'assets/images/png/Ellipse 52.png',
|
|
title: 'Ryan Dorwat',
|
|
mainImg: 'assets/images/png/Rectangle 25.png',
|
|
containerTitle: [
|
|
'Football',
|
|
'Marathon',
|
|
'Events',
|
|
'Marathon',
|
|
'Events'
|
|
]),
|
|
sizedBoxHeight(35.h),
|
|
ListView.builder(
|
|
physics: const NeverScrollableScrollPhysics(),
|
|
shrinkWrap: true,
|
|
itemCount: 2,
|
|
itemBuilder: (context, index) {
|
|
return Container(
|
|
padding: const EdgeInsets.symmetric(
|
|
vertical: 12, horizontal: 16),
|
|
child: CommentTreeWidget<Comment, Comment>(
|
|
Comment(
|
|
avatar: 'assets/images/png/Ellipse 52.png',
|
|
userName: 'Krishna',
|
|
content:
|
|
'felangel made felangel/cubit_and_beyond public'),
|
|
[
|
|
Comment(
|
|
avatar: 'assets/images/png/Ellipse 52.png',
|
|
userName: 'Kishan',
|
|
content: 'Sample comment from kishan'),
|
|
Comment(
|
|
avatar: 'assets/images/png/Ellipse 52.png',
|
|
userName: 'Ram',
|
|
content:
|
|
'A Dart template generator which helps teams generator which helps teams generator which helps teams'),
|
|
// Comment(
|
|
// avatar: 'null',
|
|
// userName: 'null',
|
|
// content:
|
|
// 'A Dart template generator which helps teams'),
|
|
// Comment(
|
|
// avatar: 'null',
|
|
// userName: 'null',
|
|
// content:
|
|
// 'A Dart template generator which helps teams generator which helps teams '),
|
|
],
|
|
treeThemeData: const TreeThemeData(
|
|
lineColor: Color(0xFFD90B2E), lineWidth: 2.5),
|
|
avatarRoot: (context, data) => const PreferredSize(
|
|
preferredSize: Size.fromRadius(18),
|
|
child: CircleAvatar(
|
|
radius: 18,
|
|
backgroundColor: Colors.grey,
|
|
backgroundImage: AssetImage(
|
|
'assets/images/png/Ellipse 52.png',
|
|
),
|
|
),
|
|
),
|
|
avatarChild: (context, data) => const PreferredSize(
|
|
preferredSize: Size.fromRadius(12),
|
|
child: CircleAvatar(
|
|
radius: 12,
|
|
backgroundColor: Colors.grey,
|
|
backgroundImage: AssetImage(
|
|
'assets/images/png/Ellipse 52.png',
|
|
),
|
|
),
|
|
),
|
|
contentChild: (context, data) {
|
|
print("printing");
|
|
return data.userName! == "Ram" && _hideReplies[index]
|
|
? GestureDetector(
|
|
onTap: () {
|
|
setState(() {
|
|
_hideReplies[index] = false;
|
|
});
|
|
},
|
|
child: Container(
|
|
child: const Text(
|
|
"View more",
|
|
style: TextStyle(color: Colors.white),
|
|
),
|
|
),
|
|
)
|
|
: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(
|
|
vertical: 8, horizontal: 8),
|
|
decoration: BoxDecoration(
|
|
color: Colors.grey[100],
|
|
borderRadius:
|
|
BorderRadius.circular(12)),
|
|
child: Column(
|
|
crossAxisAlignment:
|
|
CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
'${data.userName}',
|
|
style: Theme.of(context)
|
|
.textTheme
|
|
.bodySmall
|
|
?.copyWith(
|
|
fontWeight: FontWeight.w600,
|
|
color: Colors.black),
|
|
),
|
|
const SizedBox(
|
|
height: 4,
|
|
),
|
|
Text(
|
|
'${data.content}',
|
|
style: Theme.of(context)
|
|
.textTheme
|
|
.bodySmall
|
|
?.copyWith(
|
|
fontWeight: FontWeight.w300,
|
|
color: Colors.black),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
DefaultTextStyle(
|
|
style: Theme.of(context)
|
|
.textTheme
|
|
.bodySmall!
|
|
.copyWith(
|
|
color: Colors.grey[700],
|
|
fontWeight: FontWeight.bold),
|
|
child: const Padding(
|
|
padding: EdgeInsets.only(top: 4),
|
|
child: Row(
|
|
children: [
|
|
SizedBox(
|
|
width: 8,
|
|
),
|
|
Text('Like'),
|
|
SizedBox(
|
|
width: 24,
|
|
),
|
|
Text('Reply'),
|
|
],
|
|
),
|
|
),
|
|
)
|
|
],
|
|
);
|
|
},
|
|
contentRoot: (context, data) {
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(
|
|
vertical: 8, horizontal: 8),
|
|
decoration: BoxDecoration(
|
|
color: Colors.grey[100],
|
|
borderRadius: BorderRadius.circular(12)),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
'dangngocduc',
|
|
style: Theme.of(context)
|
|
.textTheme
|
|
.bodySmall!
|
|
.copyWith(
|
|
fontWeight: FontWeight.w600,
|
|
color: Colors.black),
|
|
),
|
|
const SizedBox(
|
|
height: 4,
|
|
),
|
|
Text(
|
|
'${data.content}',
|
|
style: Theme.of(context)
|
|
.textTheme
|
|
.bodySmall!
|
|
.copyWith(
|
|
fontWeight: FontWeight.w300,
|
|
color: Colors.black),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
DefaultTextStyle(
|
|
style: Theme.of(context)
|
|
.textTheme
|
|
.bodySmall!
|
|
.copyWith(
|
|
color: Colors.grey[700],
|
|
fontWeight: FontWeight.bold),
|
|
child: const Padding(
|
|
padding: EdgeInsets.only(top: 4),
|
|
child: Row(
|
|
children: [
|
|
SizedBox(
|
|
width: 8,
|
|
),
|
|
Text('Like'),
|
|
SizedBox(
|
|
width: 24,
|
|
),
|
|
Text('Reply'),
|
|
],
|
|
),
|
|
),
|
|
)
|
|
],
|
|
);
|
|
},
|
|
),
|
|
);
|
|
},
|
|
),
|
|
|
|
// Padding(
|
|
// padding: EdgeInsets.symmetric(horizontal: 16.w),
|
|
// child: Column(children: [
|
|
// Row(
|
|
// crossAxisAlignment: CrossAxisAlignment.start,
|
|
// children: [
|
|
// CircleAvatar(
|
|
// radius: 20.r,
|
|
// foregroundImage: const AssetImage(
|
|
// "assets/images/png/Ellipse 48.png",
|
|
// ),
|
|
// ),
|
|
// sizedBoxWidth(15.w),
|
|
// Expanded(
|
|
// child: Column(
|
|
// crossAxisAlignment: CrossAxisAlignment.start,
|
|
// children: [
|
|
// text12w400_FCFCFC_blur("Roger Saris"),
|
|
// text14w400_FCFCFC(
|
|
// "Lorem Ipsum has been the industry's standard dummy text 😍"),
|
|
// text10w400_FCFCFC_blur("Reply. . . ")
|
|
// ],
|
|
// ),
|
|
// ),
|
|
// ],
|
|
// ),
|
|
// sizedBoxHeight(50.h),
|
|
// Align(
|
|
// alignment: Alignment.bottomCenter,
|
|
// child: Padding(
|
|
// padding: const EdgeInsets.only(top: 15, bottom: 15),
|
|
// child: Row(
|
|
// children: <Widget>[
|
|
// Expanded(
|
|
// child: CustomTextFormField(
|
|
// hintText: "Add comment",
|
|
// suffixIcon: SizedBox(
|
|
// height: 20.h,
|
|
// width: 25.w,
|
|
// child: Center(
|
|
// child: Image.asset(
|
|
// "assets/images/png/iconoir_send.png",
|
|
// height: 20.h,
|
|
// width: 25.w,
|
|
// ),
|
|
// ),
|
|
// ),
|
|
// ),
|
|
// )
|
|
// ],
|
|
// ),
|
|
// )),
|
|
// sizedBoxHeight(85.h)
|
|
// ]))
|
|
]))
|
|
]));
|
|
}
|
|
|
|
Widget postCards({
|
|
required String profileImg,
|
|
required String title,
|
|
required String mainImg,
|
|
required List<String> containerTitle,
|
|
}) {
|
|
var mainImage = 'assets/images/png/uiw_like-o.png'.obs;
|
|
void updateImage(String reaction) {
|
|
if (reaction == 'like') {
|
|
mainImage.value = 'assets/images/png/f7_hand-thumbsup.png';
|
|
} else if (reaction == 'heart') {
|
|
mainImage.value = 'assets/images/png/heart 2.png';
|
|
} else if (reaction == 'party') {
|
|
mainImage.value = 'assets/images/png/party-popper 2.png';
|
|
}
|
|
}
|
|
|
|
return commonGlassUI(
|
|
width: double.infinity,
|
|
height: 570.h,
|
|
borderwidth: 0,
|
|
borderRadius: BorderRadius.circular(0),
|
|
customWidget: Column(
|
|
children: [
|
|
sizedBoxHeight(25.h),
|
|
Padding(
|
|
padding: EdgeInsets.symmetric(horizontal: 16.w),
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
CircleAvatar(
|
|
foregroundImage: AssetImage(profileImg),
|
|
radius: 25.r,
|
|
),
|
|
sizedBoxWidth(12.w),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
text16w400_FCFCFC(title),
|
|
const Spacer(),
|
|
commonGlassUI(
|
|
width: 72.w,
|
|
height: 26.h,
|
|
borderRadius: BorderRadius.circular(5.r),
|
|
borderColor: const Color(0xFFD90B2E),
|
|
customWidget:
|
|
Center(child: text14400white("Follow")),
|
|
borderwidth: 1),
|
|
sizedBoxWidth(6.w),
|
|
PopupMenuButton(
|
|
surfaceTintColor: const Color(0xFF222935),
|
|
constraints:
|
|
BoxConstraints.tightFor(width: 176.w),
|
|
offset: const Offset(0, 50),
|
|
color: const Color(0xFF222935),
|
|
tooltip: "",
|
|
itemBuilder: (BuildContext context) =>
|
|
<PopupMenuEntry>[
|
|
PopupMenuItem(
|
|
onTap: () {},
|
|
child: Padding(
|
|
padding:
|
|
EdgeInsets.symmetric(horizontal: 12.w),
|
|
child: Row(
|
|
children: [
|
|
Text(
|
|
'Report Post',
|
|
style: TextStyle(
|
|
fontSize: 16.sp,
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.w800,
|
|
fontFamily: "Nunito Sans",
|
|
),
|
|
),
|
|
const Spacer(),
|
|
Image.asset(
|
|
"assets/images/png/Vector (5).png",
|
|
height: 15.h,
|
|
width: 15.w,
|
|
)
|
|
],
|
|
),
|
|
),
|
|
),
|
|
const PopupMenuDivider(),
|
|
PopupMenuItem(
|
|
onTap: () {},
|
|
child: Padding(
|
|
padding:
|
|
EdgeInsets.symmetric(horizontal: 12.w),
|
|
child: Row(
|
|
children: [
|
|
Text(
|
|
'Share post',
|
|
style: TextStyle(
|
|
fontSize: 16.sp,
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.w800,
|
|
fontFamily: "Nunito Sans",
|
|
),
|
|
),
|
|
const Spacer(),
|
|
Image.asset(
|
|
"assets/images/png/share.png",
|
|
height: 20.h,
|
|
width: 20.w,
|
|
)
|
|
],
|
|
),
|
|
),
|
|
),
|
|
const PopupMenuDivider(),
|
|
PopupMenuItem(
|
|
onTap: () {},
|
|
child: Padding(
|
|
padding:
|
|
EdgeInsets.symmetric(horizontal: 12.w),
|
|
child: Row(
|
|
children: [
|
|
Text(
|
|
'Pin',
|
|
style: TextStyle(
|
|
fontSize: 16.sp,
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.w800,
|
|
fontFamily: "Nunito Sans",
|
|
),
|
|
),
|
|
const Spacer(),
|
|
Image.asset(
|
|
"assets/images/png/f7_pin-fill (2).png",
|
|
height: 25.h,
|
|
width: 25.w,
|
|
)
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
child: Image.asset(
|
|
'assets/images/png/Group 1000004071.png',
|
|
width: 16.w,
|
|
height: 18.h,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
sizedBoxHeight(5.h),
|
|
Row(
|
|
children: [
|
|
Image.asset(
|
|
'assets/images/png/community 1 (traced).png',
|
|
height: 14.w,
|
|
width: 14.w,
|
|
),
|
|
sizedBoxWidth(7.w),
|
|
text12w400_FCFCFC('Active alliance network'),
|
|
sizedBoxWidth(7.w),
|
|
Icon(
|
|
Icons.circle,
|
|
color: const Color(0xFFFCFCFC),
|
|
size: 4.sp,
|
|
),
|
|
sizedBoxWidth(6.w),
|
|
text12w400_FCFCFC('1 Hour ago'),
|
|
],
|
|
)
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
sizedBoxHeight(20.h),
|
|
GestureDetector(
|
|
onTap: () {
|
|
Get.toNamed(RouteName.postdetailsScreen);
|
|
},
|
|
child: SizedBox(
|
|
height: 163.h,
|
|
width: double.infinity,
|
|
child: Image.asset(
|
|
mainImg,
|
|
fit: BoxFit.cover,
|
|
),
|
|
)),
|
|
sizedBoxHeight(20.h),
|
|
Padding(
|
|
padding: EdgeInsets.symmetric(horizontal: 16.w),
|
|
child: Column(children: [
|
|
SizedBox(
|
|
height: 30.h,
|
|
child: ListView.builder(
|
|
scrollDirection: Axis.horizontal,
|
|
shrinkWrap: true,
|
|
itemCount: containerTitle.length,
|
|
itemBuilder: (context, index) {
|
|
return Padding(
|
|
padding: EdgeInsets.only(right: 12.w),
|
|
child: GestureDetector(
|
|
onTap: () {
|
|
Get.toNamed(RouteName.cyclescreen);
|
|
},
|
|
child: containertile(text: containerTitle[index])),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
sizedBoxHeight(20.h),
|
|
text16w400_FCFCFC(
|
|
"Lorem Ipsum has been the industry's standard dummy text ever since the 1500s . . ."),
|
|
Row(children: [
|
|
stackReaction(number: '20', containerImages: [
|
|
'assets/images/png/f7_hand-thumbsup.png',
|
|
'assets/images/png/heart 2.png',
|
|
'assets/images/png/party-popper 2.png'
|
|
]),
|
|
const Spacer(),
|
|
commonGlassUI(
|
|
borderwidth: 0.9,
|
|
width: 30.w,
|
|
height: 30.h,
|
|
borderRadius: BorderRadius.circular(100.r),
|
|
customWidget: Center(
|
|
child: Image.asset(
|
|
'assets/images/png/Frame 1000004088.png',
|
|
height: 13.h,
|
|
width: 13.w,
|
|
),
|
|
),
|
|
),
|
|
sizedBoxWidth(12.w),
|
|
text14w400_FCFCFC('20'),
|
|
sizedBoxWidth(20.w),
|
|
commonGlassUI(
|
|
borderwidth: 0.9,
|
|
width: 30.w,
|
|
height: 30.h,
|
|
borderRadius: BorderRadius.circular(100.r),
|
|
customWidget: Center(
|
|
child: Image.asset(
|
|
'assets/images/png/Vector (1).png',
|
|
height: 12.h,
|
|
width: 12.w,
|
|
),
|
|
),
|
|
),
|
|
sizedBoxWidth(12.w),
|
|
text14w400_FCFCFC('10'),
|
|
]),
|
|
sizedBoxHeight(12.h),
|
|
commonDivider(),
|
|
sizedBoxHeight(12.h),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
|
children: [
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
|
children: [
|
|
Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Obx(() {
|
|
return ReactionButton<String>(
|
|
onReactionChanged: (reaction) {
|
|
updateImage(reaction?.value ?? 'like');
|
|
debugPrint(
|
|
'Selected value: ${reaction?.value}');
|
|
},
|
|
reactions: <Reaction<String>?>[
|
|
Reaction<String>(
|
|
value: 'like',
|
|
previewIcon: _buildReactionsPreviewIcon(
|
|
'assets/images/png/f7_hand-thumbsup.png'),
|
|
icon: _buildReactionsIcon(
|
|
'assets/images/png/f7_hand-thumbsup.png'),
|
|
),
|
|
Reaction<String>(
|
|
value: 'heart',
|
|
previewIcon: _buildReactionsPreviewIcon(
|
|
'assets/images/png/heart 2.png'),
|
|
icon: _buildReactionsIcon(
|
|
'assets/images/png/heart 2.png'),
|
|
),
|
|
Reaction<String>(
|
|
value: 'party',
|
|
previewIcon: _buildReactionsPreviewIcon(
|
|
'assets/images/png/party-popper 2.png'),
|
|
icon: _buildReactionsIcon(
|
|
'assets/images/png/party-popper 2.png'),
|
|
),
|
|
],
|
|
selectedReaction: Reaction<String>(
|
|
value: 'like',
|
|
icon: _buildReactionsIcon(
|
|
'assets/images/png/f7_hand-thumbsup.png'),
|
|
),
|
|
boxColor: Colors.white,
|
|
boxElevation: 9,
|
|
boxRadius: 30,
|
|
itemsSpacing: 8,
|
|
itemScale: 0.4,
|
|
itemSize: const Size(45, 45),
|
|
boxPadding: const EdgeInsets.all(8),
|
|
boxAnimationDuration:
|
|
const Duration(milliseconds: 200),
|
|
itemAnimationDuration:
|
|
const Duration(milliseconds: 500),
|
|
hoverDuration:
|
|
const Duration(milliseconds: 700),
|
|
// toggle: false,
|
|
|
|
child: _buildReactionsIcon(mainImage.value),
|
|
);
|
|
})
|
|
],
|
|
),
|
|
],
|
|
),
|
|
Column(
|
|
children: [
|
|
Image.asset(
|
|
'assets/images/png/Frame 1000004089.png',
|
|
height: 19.h,
|
|
width: 19.w,
|
|
),
|
|
sizedBoxHeight(8.h),
|
|
text11w400_FCFCFC('Save')
|
|
],
|
|
)
|
|
],
|
|
),
|
|
sizedBoxHeight(12.h),
|
|
commonDivider(),
|
|
sizedBoxHeight(12.h),
|
|
]),
|
|
),
|
|
],
|
|
));
|
|
}
|
|
|
|
Widget containertile({required String text}) {
|
|
return commonGlassUI(
|
|
borderwidth: 0.9,
|
|
width: 100.w,
|
|
height: 30.h,
|
|
borderRadius: BorderRadius.circular( 30.r),
|
|
borderColor: const Color(0xFFD90B2E),
|
|
customWidget: Padding(
|
|
padding: EdgeInsets.symmetric(horizontal: 10.w),
|
|
child: Center(child: text14w400_FCFCFC(text)),
|
|
));
|
|
}
|
|
|
|
Widget _buildReactionsPreviewIcon(String assetPath) {
|
|
return Padding(
|
|
padding: const EdgeInsets.all(8.0),
|
|
child: Image.asset(
|
|
assetPath,
|
|
height: 40.h,
|
|
width: 40.w,
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildReactionsIcon(String assetPath) {
|
|
return Column(
|
|
children: [
|
|
Image.asset(
|
|
assetPath,
|
|
height: 19.h,
|
|
width: 19.w,
|
|
),
|
|
sizedBoxHeight(8.h),
|
|
text11w400_FCFCFC('Like')
|
|
],
|
|
);
|
|
}
|
|
}
|