593 lines
19 KiB
Dart
593 lines
19 KiB
Dart
import 'package:flutter/material.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/CommonBottomNavigationBar.dart';
|
|
import 'package:regroup/Common/CommonGlassmorphism.dart';
|
|
import 'package:regroup/Common/controller/MainScreen.dart';
|
|
import 'package:regroup/Feed%20Module/sidemenu/sidemenu.dart';
|
|
import 'package:regroup/Utils/Common/blureffect.dart';
|
|
import 'package:regroup/Utils/Common/sized_box.dart';
|
|
import 'package:regroup/Utils/texts.dart';
|
|
import 'package:regroup/resources/routes/route_name.dart';
|
|
|
|
class CommunityScreen extends StatefulWidget {
|
|
const CommunityScreen({super.key});
|
|
|
|
@override
|
|
State<CommunityScreen> createState() => _CommunityScreenState();
|
|
}
|
|
|
|
final List<String> titles = [
|
|
'Race',
|
|
'Swimming',
|
|
'Events',
|
|
'Swimming',
|
|
'Events',
|
|
];
|
|
|
|
class _CommunityScreenState extends State<CommunityScreen> {
|
|
GlobalKey<ScaffoldState> _scaffoldKey1 = GlobalKey<ScaffoldState>();
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
key: _scaffoldKey1,
|
|
backgroundColor: Color(0xFF222935),
|
|
// drawerEnableOpenDragGesture: false,
|
|
drawer: SizedBox(width: 300.w, child: SideMenu()),
|
|
extendBody: true,
|
|
appBar: AppBar(
|
|
scrolledUnderElevation: 0.0,
|
|
backgroundColor: Color(0xff222935),
|
|
elevation: 0,
|
|
automaticallyImplyLeading: false,
|
|
titleSpacing: 0,
|
|
leading: InkWell(
|
|
onTap: () {
|
|
_scaffoldKey1.currentState?.openDrawer();
|
|
},
|
|
child: Center(
|
|
child: Image.asset(
|
|
'assets/images/png/menu.png',
|
|
height: 15.h,
|
|
width: 20.w,
|
|
),
|
|
),
|
|
),
|
|
title: Image.asset(
|
|
'assets/images/png/Group.png',
|
|
width: 26.w,
|
|
height: 25.h,
|
|
),
|
|
actions: [
|
|
Image.asset(
|
|
'assets/images/png/ion_search-outline.png',
|
|
height: 25.h,
|
|
width: 25.w,
|
|
),
|
|
sizedBoxWidth(10.w),
|
|
Image.asset(
|
|
'assets/images/png/Frame 9.png',
|
|
height: 25.h,
|
|
width: 25.w,
|
|
),
|
|
sizedBoxWidth(16.w),
|
|
],
|
|
),
|
|
body: Stack(children: [
|
|
const CommonBlurLeftRed(),
|
|
const CommonBlurRightRed(),
|
|
const CommonBlurLeft(),
|
|
const CommonBlurRight(),
|
|
Stack(children: [
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: 16),
|
|
child: Column(children: [
|
|
DefaultTabController(
|
|
length: 3,
|
|
// initialIndex: selectedIndex.value,
|
|
child: Column(
|
|
children: [
|
|
MyTabBar(),
|
|
SizedBox(
|
|
height: 600.h,
|
|
child: TabBarView(
|
|
children: [
|
|
feedTab(),
|
|
popularTab(),
|
|
latestTab(),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
]))
|
|
])
|
|
]),
|
|
floatingActionButton: Container(
|
|
height: 55.h,
|
|
width: 55.w,
|
|
decoration: BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Color(0x40000000), // Hex color with 40% opacity
|
|
offset: Offset(0, 6),
|
|
blurRadius: 8,
|
|
),
|
|
],
|
|
),
|
|
child: FloatingActionButton(
|
|
onPressed: () {
|
|
Get.toNamed(RouteName.postscreen);
|
|
},
|
|
backgroundColor: Color(0xFFD90B2E),
|
|
autofocus: true,
|
|
shape: CircleBorder(),
|
|
child: Image.asset(
|
|
"assets/images/png/iconamoon_edit-thin.png",
|
|
height: 30.h,
|
|
width: 30.w,
|
|
),
|
|
),
|
|
),
|
|
|
|
bottomNavigationBar: bottomnavigationbar(mainController),
|
|
);
|
|
}
|
|
}
|
|
|
|
Widget feedTab() {
|
|
return SingleChildScrollView(
|
|
child: Column(
|
|
children: [
|
|
normalcardtile(),
|
|
sizedBoxHeight(20.h),
|
|
tagCardTile(),
|
|
sizedBoxHeight(20.h),
|
|
normalcardtile(),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget normalcardtile() {
|
|
return Column(
|
|
children: [
|
|
sizedBoxHeight(25.h),
|
|
Padding(
|
|
padding: EdgeInsets.symmetric(horizontal: 16.w),
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
CircleAvatar(
|
|
foregroundImage: AssetImage('assets/images/png/Ellipse 43.png'),
|
|
radius: 25.r,
|
|
),
|
|
sizedBoxWidth(12.w),
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
text16w400_FCFCFC('Edward Hackket'),
|
|
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: Color(0xFFFCFCFC),
|
|
size: 4.sp,
|
|
),
|
|
sizedBoxWidth(6.w),
|
|
text12w400_FCFCFC('1 Hour ago'),
|
|
],
|
|
)
|
|
],
|
|
),
|
|
Spacer(),
|
|
PopupMenuButton(
|
|
surfaceTintColor: Color(0xFF222935),
|
|
constraints: BoxConstraints.tightFor(width: 176.w),
|
|
offset: Offset(0, 50),
|
|
color: 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",
|
|
),
|
|
),
|
|
Spacer(),
|
|
Image.asset(
|
|
"assets/images/png/Vector (5).png",
|
|
height: 15.h,
|
|
width: 15.w,
|
|
)
|
|
],
|
|
),
|
|
),
|
|
),
|
|
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",
|
|
),
|
|
),
|
|
Spacer(),
|
|
Image.asset(
|
|
"assets/images/png/share.png",
|
|
height: 20.h,
|
|
width: 20.w,
|
|
)
|
|
],
|
|
),
|
|
),
|
|
),
|
|
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",
|
|
),
|
|
),
|
|
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: 4.w,
|
|
height: 18.h,
|
|
),
|
|
),
|
|
|
|
sizedBoxWidth(5.w)
|
|
],
|
|
),
|
|
),
|
|
sizedBoxHeight(20.h),
|
|
GestureDetector(
|
|
onTap: () {
|
|
Get.toNamed(RouteName.postdetailsScreen);
|
|
},
|
|
child: Image.asset('assets/images/png/Rectangle 22.png')),
|
|
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: titles.length,
|
|
itemBuilder: (context, index) {
|
|
return Padding(
|
|
padding: EdgeInsets.only(right: 12.w),
|
|
child: GestureDetector(
|
|
onTap: () {
|
|
Get.toNamed(RouteName.cyclescreen);
|
|
},
|
|
child: containertile(text: titles[index])),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
sizedBoxHeight(20.h),
|
|
text16w400_FCFCFC(
|
|
"Lorem Ipsum has been the industry's standard dummy text ever since the 1500s . . ."),
|
|
Row(children: [
|
|
|
|
Spacer(),
|
|
commonGlassContainer(
|
|
border: 0.9,
|
|
|
|
width: 30.w,
|
|
height: 30.h,
|
|
borderradius: 100,
|
|
customWidget: Center(
|
|
child: ReactionButton<String>(
|
|
itemSize: Size.fromHeight(20),
|
|
onReactionChanged: (Reaction<String>? reaction) {
|
|
debugPrint('Selected value: ${reaction?.value}');
|
|
},
|
|
reactions: <Reaction<String>>[
|
|
Reaction<String>(
|
|
value: 'message',
|
|
icon: Image.asset(
|
|
'assets/images/png/Vector.png',
|
|
height: 13.h,
|
|
width: 13.w,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
sizedBoxWidth(12.w),
|
|
text14w400_FCFCFC('20'),
|
|
sizedBoxWidth(20.w),
|
|
commonGlassContainer(
|
|
border: 0.9,
|
|
|
|
width: 30.w,
|
|
height: 30.h,
|
|
borderradius: 100,
|
|
customWidget: Center(
|
|
child: ReactionButton<String>(
|
|
itemSize: Size.fromHeight(20),
|
|
onReactionChanged: (Reaction<String>? reaction) {
|
|
debugPrint('Selected value: ${reaction?.value}');
|
|
},
|
|
reactions: <Reaction<String>>[
|
|
Reaction<String>(
|
|
value: 'message',
|
|
icon: Image.asset(
|
|
'assets/images/png/Vector (1).png',
|
|
height: 12.h,
|
|
width: 12.w,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
sizedBoxWidth(12.w),
|
|
text14w400_FCFCFC('10'),
|
|
]),
|
|
sizedBoxHeight(30.h),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
|
children: [
|
|
Column(
|
|
children: [
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
|
children: [
|
|
Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
ReactionButton<String>(
|
|
onReactionChanged: (reaction) {
|
|
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'),
|
|
),
|
|
|
|
// Add more reactions here if needed
|
|
],
|
|
placeholder: Reaction<String>(
|
|
value: 'like',
|
|
icon: _buildReactionsIcon(
|
|
'assets/images/png/f7_hand-thumbsup.png'),
|
|
),
|
|
selectedReaction: Reaction<String>(
|
|
value: 'like',
|
|
icon: _buildReactionsIcon(
|
|
'assets/images/png/f7_hand-thumbsup.png'),
|
|
),
|
|
boxColor: Colors.white,
|
|
boxElevation: 5,
|
|
boxRadius: 50,
|
|
itemsSpacing: 8,
|
|
itemScale: 0.3,
|
|
itemSize: Size(40.w, 40.h),
|
|
boxPadding: EdgeInsets.all(4),
|
|
boxAnimationDuration: Duration(milliseconds: 200),
|
|
itemAnimationDuration: Duration(milliseconds: 100),
|
|
hoverDuration: Duration(milliseconds: 400),
|
|
toggle: false,
|
|
direction: ReactionsBoxAlignment.ltr,
|
|
child: _buildReactionsIcon(
|
|
'assets/images/png/uiw_like-o.png',
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
sizedBoxHeight(8.h),
|
|
text11w400_FCFCFC('Like')
|
|
],
|
|
),
|
|
Column(
|
|
children: [
|
|
Image.asset(
|
|
'assets/images/png/Vector.png',
|
|
height: 19.h,
|
|
width: 19.w,
|
|
),
|
|
sizedBoxHeight(8.h),
|
|
text11w400_FCFCFC('Comment')
|
|
],
|
|
),
|
|
Column(
|
|
children: [
|
|
Image.asset(
|
|
'assets/images/png/Frame 1000004089.png',
|
|
height: 19.h,
|
|
width: 19.w,
|
|
),
|
|
sizedBoxHeight(8.h),
|
|
text11w400_FCFCFC('Save')
|
|
],
|
|
)
|
|
],
|
|
)
|
|
]),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
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 Image.asset(
|
|
assetPath,
|
|
height: 19.h,
|
|
width: 19.w,
|
|
);
|
|
}
|
|
|
|
Widget tagCardTile() {
|
|
return commonGlassContainer(
|
|
border: 0.9,
|
|
|
|
width: double.infinity,
|
|
height: 580.h,
|
|
borderradius: 1,
|
|
customWidget: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
sizedBoxHeight(16.h),
|
|
Padding(
|
|
padding: EdgeInsets.only(left: 16.w),
|
|
child: text16w400_FCFCFC('#Announcement'),
|
|
),
|
|
normalcardtile(),
|
|
],
|
|
));
|
|
}
|
|
|
|
Widget containertile({required String text}) {
|
|
return commonGlassContainer(
|
|
border: 0.9,
|
|
|
|
width: 100.w,
|
|
height: 30.h,
|
|
borderradius: 30.r,
|
|
customWidget: Padding(
|
|
padding: EdgeInsets.symmetric(horizontal: 10.w),
|
|
child: Center(child: text14w400_FCFCFC(text)),
|
|
));
|
|
}
|
|
|
|
Widget popularTab() {
|
|
return SingleChildScrollView(
|
|
child: Column(
|
|
children: [
|
|
Column(
|
|
children: [
|
|
normalcardtile(),
|
|
sizedBoxHeight(20.h),
|
|
normalcardtile(),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget latestTab() {
|
|
return Column(
|
|
children: [],
|
|
);
|
|
}
|
|
|
|
class MyTabBar extends StatelessWidget {
|
|
// Set the desired height
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return TabBar(
|
|
dividerColor: Color(0xFFFFFFFF).withOpacity(0.07),
|
|
labelStyle: TextStyle(
|
|
fontSize: 14.sp,
|
|
color: Color(0xFFFCFCFC),
|
|
fontWeight: FontWeight.w400,
|
|
fontFamily: 'Helvetica'),
|
|
indicatorSize: TabBarIndicatorSize.tab,
|
|
indicatorColor: const Color(0xFFD90B2E),
|
|
// labelColor: Colors.white,
|
|
indicatorWeight: 2.h,
|
|
dividerHeight: 2.h,
|
|
unselectedLabelColor: Color(0xFFFCFCFC),
|
|
overlayColor: MaterialStateProperty.all(const Color(0xFFD90B2E)),
|
|
tabs: const [
|
|
Tab(
|
|
text: 'Feed',
|
|
),
|
|
Tab(
|
|
text: 'Popular',
|
|
),
|
|
Tab(
|
|
text: 'Latest',
|
|
),
|
|
]);
|
|
}
|
|
}
|