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/CommonTabBar.dart'; import 'package:regroup/Common/CommonWidget.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 createState() => _CommunityScreenState(); } final List titles = [ 'Race', 'Swimming', 'Events', 'Swimming', 'Events', ]; class _CommunityScreenState extends State { GlobalKey _scaffoldKey1 = GlobalKey(); @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: [ GestureDetector( onTap: () { Get.toNamed(RouteName.explorescreen); }, child: Image.asset( 'assets/images/png/ion_search-outline.png', height: 25.h, width: 25.w, ), ), sizedBoxWidth(10.w), GestureDetector( onTap: () { Get.toNamed(RouteName.notificaationpage); }, child: 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: [ Expanded( child: DefaultTabController( length: 3, // initialIndex: selectedIndex.value, child: Column( children: [ CommonTabBar(tabs: const [ Tab( text: 'Feed', ), Tab( text: 'Popular', ), Tab( text: 'Latest', ), ]), Expanded( child: TabBarView( children: [ feedTab(), popularTab(), latestTab(), ], ), ), sizedBoxHeight(90.h) ], ), ), ), ])) ]) ]), 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: [ sizedBoxHeight(16.h), normalcardtile( profileImg: 'assets/images/png/Ellipse 43.png', title: 'Edward Hackket', mainImg: 'assets/images/png/Rectangle 24.png', containerTitle: ['Cycle', 'Marathon', 'Events', 'Marathon', 'Events']), sizedBoxHeight(20.h), Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( width: double.infinity, height: 47.h, color: Color(0xFF009DAB), child: Padding( padding: EdgeInsets.only(left: 16.w), child: Row( crossAxisAlignment: CrossAxisAlignment.center, children: [ text16w400_FCFCFC('#Announcement'), ], ), ), ), announcecardtile( profileImg: 'assets/images/png/Ellipse 48.png', title: 'Jocelyn Dokidis', mainImg: 'assets/images/png/Rectangle 46.png', containerTitle: [ 'Race', 'Swimming', 'Events', 'Marathon', 'Events' ]), sizedBoxHeight(20.h), normalcardtile( profileImg: 'assets/images/png/Ellipse 52.png', title: 'Ryan Dorwat', mainImg: 'assets/images/png/Rectangle 25.png', containerTitle: [ 'Football', 'Teams player', 'Events', 'Marathon', 'Events' ]) ], ), ])); } Widget announcecardtile({ required String profileImg, required String title, required String mainImg, required List 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 commonGlassContainerblue( width: double.infinity, height: 570.h, border: 0, borderradius: 1, 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), Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ text16w400_FCFCFC(title), 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) => [ 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: 16.w, height: 18.h, ), ), sizedBoxWidth(5.w) ], ), ), sizedBoxHeight(20.h), GestureDetector( onTap: () { Get.toNamed(RouteName.postdetailsScreen); }, child: Container( 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: [ InkWell( onTap: () { Get.toNamed(RouteName.reactionview); }, child: stackReaction(number: '20', containerImages: [ 'assets/images/png/f7_hand-thumbsup.png', 'assets/images/png/heart 2.png', 'assets/images/png/party-popper 2.png' ]), ), Spacer(), commonGlassContainer( border: 0.43, width: 30.w, height: 30.h, opacity1: 0.05, opacity2: 0.06, borderradius: 100, 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), commonGlassContainer( border: 0.43, width: 30.w, height: 30.h, borderradius: 100, opacity1: 0.05, opacity2: 0.06, 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: [ Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Obx(() { return ReactionButton( onReactionChanged: (reaction) { updateImage(reaction?.value ?? 'like'); debugPrint('Selected value: ${reaction?.value}'); }, reactions: ?>[ Reaction( value: 'like', previewIcon: _buildReactionsPreviewIcon( 'assets/images/png/f7_hand-thumbsup.png'), icon: _buildReactionsIcon( 'assets/images/png/f7_hand-thumbsup.png', ), ), Reaction( value: 'heart', previewIcon: _buildReactionsPreviewIcon( 'assets/images/png/heart 2.png'), icon: _buildReactionsIcon( 'assets/images/png/heart 2.png'), ), Reaction( value: 'party', previewIcon: _buildReactionsPreviewIcon( 'assets/images/png/party-popper 2.png'), icon: _buildReactionsIcon( 'assets/images/png/party-popper 2.png'), ), ], selectedReaction: Reaction( value: 'like', icon: _buildReactionsIcon( 'assets/images/png/f7_hand-thumbs.png'), ), boxColor: Colors.white, boxElevation: 2, boxRadius: 30, itemsSpacing: 8, itemScale: 0.4, itemSize: Size(45, 45), boxPadding: EdgeInsets.all(8), boxAnimationDuration: Duration(milliseconds: 200), itemAnimationDuration: Duration(milliseconds: 500), hoverDuration: Duration(milliseconds: 700), // toggle: false, direction: ReactionsBoxAlignment.rtl, child: _buildReactionsIcon(mainImage.value), ); }) ], ), GestureDetector( onTap: () { Get.toNamed(RouteName.postdetailsScreen); }, child: Column( children: [ Image.asset( 'assets/images/png/Frame 1000004088.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') ], ) ], ), sizedBoxHeight(12.h), commonDivider(), sizedBoxHeight(12.h), ]), ), ], )); } Widget normalcardtile({ required String profileImg, required String title, required String mainImg, required List 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 commonGlassContainer( width: double.infinity, height: 570.h, border: 0, borderradius: 1, 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), Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ text16w400_FCFCFC(title), 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) => [ 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: 16.w, height: 18.h, ), ), sizedBoxWidth(5.w) ], ), ), sizedBoxHeight(20.h), GestureDetector( onTap: () { Get.toNamed(RouteName.postdetailsScreen); }, child: Container( 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: [ InkWell( onTap: () { Get.toNamed(RouteName.reactionview); }, child: stackReaction(number: '20', containerImages: [ 'assets/images/png/f7_hand-thumbsup.png', 'assets/images/png/heart 2.png', 'assets/images/png/party-popper 2.png' ]), ), Spacer(), commonGlassContainer( border: 0.43, width: 30.w, height: 30.h, opacity1: 0.05, opacity2: 0.06, borderradius: 100, 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), commonGlassContainer( border: 0.43, width: 30.w, height: 30.h, borderradius: 100, opacity1: 0.05, opacity2: 0.06, 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: [ Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Obx(() { return ReactionButton( onReactionChanged: (reaction) { updateImage(reaction?.value ?? 'like'); debugPrint('Selected value: ${reaction?.value}'); }, reactions: ?>[ Reaction( value: 'like', previewIcon: _buildReactionsPreviewIcon( 'assets/images/png/f7_hand-thumbsup.png'), icon: _buildReactionsIcon( 'assets/images/png/f7_hand-thumbsup.png', ), ), Reaction( value: 'heart', previewIcon: _buildReactionsPreviewIcon( 'assets/images/png/heart 2.png'), icon: _buildReactionsIcon( 'assets/images/png/heart 2.png'), ), Reaction( value: 'party', previewIcon: _buildReactionsPreviewIcon( 'assets/images/png/party-popper 2.png'), icon: _buildReactionsIcon( 'assets/images/png/party-popper 2.png'), ), ], selectedReaction: Reaction( value: 'like', icon: _buildReactionsIcon( 'assets/images/png/f7_hand-thumbs.png'), ), boxColor: Colors.white, boxElevation: 2, boxRadius: 30, itemsSpacing: 8, itemScale: 0.4, itemSize: Size(45, 45), boxPadding: EdgeInsets.all(8), boxAnimationDuration: Duration(milliseconds: 200), itemAnimationDuration: Duration(milliseconds: 500), hoverDuration: Duration(milliseconds: 700), // toggle: false, direction: ReactionsBoxAlignment.rtl, child: _buildReactionsIcon(mainImage.value), ); }) ], ), GestureDetector( onTap: () { Get.toNamed(RouteName.postdetailsScreen); }, child: Column( children: [ Image.asset( 'assets/images/png/Frame 1000004088.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') ], ) ], ), sizedBoxHeight(12.h), commonDivider(), sizedBoxHeight(12.h), ]), ), ], )); } 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') ], ); } Widget containertile({required String text}) { return commonGlassContainer( border: 1, width: 130.w, height: 30.h, borderradius: 30.r, borderColor: Color(0xFFD90B2E), customWidget: Padding( padding: EdgeInsets.symmetric(horizontal: 10.w), child: Center(child: text14w400_FCFCFC(text)), )); } Widget popularTab() { return SingleChildScrollView( child: Column( children: [ sizedBoxHeight(20.h), normalcardtile( profileImg: 'assets/images/png/Ellipse 43.png', title: 'Edward Hackket', mainImg: 'assets/images/png/Rectangle 24.png', containerTitle: [ 'Race', 'Swimming', 'Events', 'Marathon', 'Events' ]), sizedBoxHeight(20.h), normalcardtile( profileImg: 'assets/images/png/Ellipse 52.png', title: 'Edward Hackket', mainImg: 'assets/images/png/Rectangle 25.png', containerTitle: [ 'Football', 'Teams player', 'Events', 'Marathon', 'Events' ]) ], ), ); } Widget latestTab() { return SingleChildScrollView( child: Column(children: [ sizedBoxHeight(16.h), normalcardtile( profileImg: 'assets/images/png/Ellipse 43.png', title: 'Edward Hackket', mainImg: 'assets/images/png/Rectangle 24.png', containerTitle: ['Cycle', 'Marathon', 'Events', 'Marathon', 'Events']), sizedBoxHeight(20.h), Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( width: double.infinity, height: 47.h, color: Color(0xFFD90B2E), child: Padding( padding: EdgeInsets.only(left: 16.w), child: Row( crossAxisAlignment: CrossAxisAlignment.center, children: [ text16w400_FCFCFC('#Announcement'), ], ), ), ), normalcardtile( profileImg: 'assets/images/png/Ellipse 48.png', title: 'Jocelyn Dokidis', mainImg: 'assets/images/png/Rectangle 46.png', containerTitle: [ 'Race', 'Swimming', 'Events', 'Marathon', 'Events' ]), sizedBoxHeight(20.h), normalcardtile( profileImg: 'assets/images/png/Ellipse 52.png', title: 'Ryan Dorwat', mainImg: 'assets/images/png/Rectangle 25.png', containerTitle: [ 'Football', 'Teams player', 'Events', 'Marathon', 'Events' ]) ], ), ])); }