From babc4418fcca932167a36b094724bd73c341e6b5 Mon Sep 17 00:00:00 2001 From: cj201199 Date: Fri, 5 Jul 2024 14:49:57 +0530 Subject: [PATCH] new glassUi package added --- .../Main_Screens/Community/Community.dart | 507 +++++++++++++++++- .../Main_Screens/Community/PostScreen.dart | 2 +- .../ProfileTab/Settings/Settings.dart | 3 +- .../sidemenu/Community/Watchlist.dart | 151 +++--- lib/Utils/Common/CommonDropdown.dart | 85 ++- lib/Utils/Common/CustomTextformfield.dart | 1 - 6 files changed, 639 insertions(+), 110 deletions(-) diff --git a/lib/Feed Module/Main_Screens/Community/Community.dart b/lib/Feed Module/Main_Screens/Community/Community.dart index b3a2343..30f6234 100644 --- a/lib/Feed Module/Main_Screens/Community/Community.dart +++ b/lib/Feed Module/Main_Screens/Community/Community.dart @@ -2,14 +2,13 @@ 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:glass_kit/glass_kit.dart'; +import 'package:glassmorphism_ui/glassmorphism_ui.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'; @@ -170,19 +169,43 @@ Widget feedTab() { return SingleChildScrollView( child: Column(children: [ sizedBoxHeight(16.h), - normalcardtile( + normalcardtile2( 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), - announcecardtile( - profileImg: 'assets/images/png/Ellipse 48.png', - title: 'Jocelyn Dokidis', - mainImg: 'assets/images/png/Rectangle 46.png', - containerTitle: ['Race', 'Swimming', 'Events', 'Marathon', 'Events']), + // 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( + normalcardtile2( + profileImg: 'assets/images/png/Ellipse 52.png', + title: 'Ryan Dorwat', + mainImg: 'assets/images/png/Rectangle 25.png', + containerTitle: [ + 'Football', + 'Teams player', + 'Events', + 'Marathon', + 'Events' + ]), + sizedBoxHeight(20.h), + normalcardtile2( + profileImg: 'assets/images/png/Ellipse 52.png', + title: 'Ryan Dorwat', + mainImg: 'assets/images/png/Rectangle 25.png', + containerTitle: [ + 'Football', + 'Teams player', + 'Events', + 'Marathon', + 'Events' + ]), + sizedBoxHeight(20.h), + normalcardtile2( profileImg: 'assets/images/png/Ellipse 52.png', title: 'Ryan Dorwat', mainImg: 'assets/images/png/Rectangle 25.png', @@ -196,6 +219,414 @@ Widget feedTab() { ])); } +Widget normalcardtile2({ + 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 GlassContainer( + height: 570.h, + width: double.infinity, + borderRadius: BorderRadius.circular(1), + blur: 6, + opacity: 0.04, + gradient: LinearGradient( + begin: Alignment.topLeft, + end: Alignment.bottomRight, + colors: [ + Color(0xFFFFFFFF).withOpacity(0.4), + const Color(0xFFFFFFFF).withOpacity(0.5), + ], + stops: const [ + 0.1, + 1, + ], + ), + border: Border.all(color: Color(0xff434A53)), + // borderGradient: LinearGradient( + // begin: Alignment.topLeft, + // end: Alignment.bottomRight, + // colors: [ + // borderColor, + // borderColor, + // ], + // ), + child: 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: const Color(0xFFFCFCFC), + size: 4.sp, + ), + sizedBoxWidth(6.w), + text12w400_FCFCFC('1 Hour ago'), + ], + ) + ], + ), + const Spacer(), + PopupMenuButton( + surfaceTintColor: const Color(0xFF222935), + constraints: BoxConstraints.tightFor(width: 176.w), + offset: const Offset(0, 50), + color: const 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", + ), + ), + 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, + ), + ), + 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: containertile2( + 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' + // ]), + // ), + const Spacer(), + GlassContainer( + height: 30.h, + width: 30.w, + opacity: 0.2, + borderRadius: BorderRadius.circular(100), + blur: 6, + gradient: LinearGradient( + begin: Alignment.topLeft, + end: Alignment.bottomRight, + colors: [ + Color(0xFFFFFFFF).withOpacity(0.5), + const Color(0xFFFFFFFF).withOpacity(0.6), + ], + stops: const [ + 0.1, + 1, + ], + ), + border: Border.all(color: Color(0xff434A53)), + // borderGradient: LinearGradient( + // begin: Alignment.topLeft, + // end: Alignment.bottomRight, + // colors: [ + // borderColor, + // borderColor, + // ], + // ), + child: 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), + GlassContainer( + height: 30.h, + width: 30.w, + borderRadius: BorderRadius.circular(100), + blur: 6, + opacity: 0.2, + gradient: LinearGradient( + begin: Alignment.topLeft, + end: Alignment.bottomRight, + colors: [ + Color(0xFFFFFFFF).withOpacity(0.5), + const Color(0xFFFFFFFF).withOpacity(0.6), + ], + stops: const [ + 0.1, + 1, + ], + ), + border: Border.all(color: Color(0xff434A53)), + // borderGradient: LinearGradient( + // begin: Alignment.topLeft, + // end: Alignment.bottomRight, + // colors: [ + // borderColor, + // borderColor, + // ], + // ), + child: 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: 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, + 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 announcecardtile({ required String profileImg, required String title, @@ -930,6 +1361,40 @@ Widget containertile({required String text}) { )); } +Widget containertile2({required String text}) { + return GlassContainer( + height: 30.h, + width: 130.w, + // opacity: 0.2, + borderRadius: BorderRadius.circular(30), + blur: 6, + gradient: LinearGradient( + begin: Alignment.topLeft, + end: Alignment.bottomRight, + colors: [ + Color(0xFFFFFFFF).withOpacity(0.5), + const Color(0xFFFFFFFF).withOpacity(0.6), + ], + stops: const [ + 0.1, + 1, + ], + ), + border: Border.all(color: Color(0xFFD90B2E)), + // borderGradient: LinearGradient( + // begin: Alignment.topLeft, + // end: Alignment.bottomRight, + // colors: [ + // borderColor, + // borderColor, + // ], + // ), + child: Padding( + padding: EdgeInsets.symmetric(horizontal: 10.w), + child: Center(child: text14w400_FCFCFC(text)), + )); +} + Widget popularTab() { return SingleChildScrollView( child: Column( @@ -959,6 +1424,30 @@ Widget popularTab() { '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' + ]), + 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' + ]), + sizedBoxHeight(20.h), ], ), ); diff --git a/lib/Feed Module/Main_Screens/Community/PostScreen.dart b/lib/Feed Module/Main_Screens/Community/PostScreen.dart index 9d047f7..18cbe83 100644 --- a/lib/Feed Module/Main_Screens/Community/PostScreen.dart +++ b/lib/Feed Module/Main_Screens/Community/PostScreen.dart @@ -62,7 +62,7 @@ class _PostScreenState extends State { crossAxisAlignment: CrossAxisAlignment.start, children: [ sizedBoxHeight(20.h), - + text16w400_FCFCFC("Caption"), sizedBoxHeight(18.h), diff --git a/lib/Feed Module/Main_Screens/ProfileTab/Settings/Settings.dart b/lib/Feed Module/Main_Screens/ProfileTab/Settings/Settings.dart index b31c071..8dfdd7d 100644 --- a/lib/Feed Module/Main_Screens/ProfileTab/Settings/Settings.dart +++ b/lib/Feed Module/Main_Screens/ProfileTab/Settings/Settings.dart @@ -32,7 +32,8 @@ class _SettingsState extends State { Container( decoration: const BoxDecoration( image: DecorationImage( - image: AssetImage("assets/images/png/Ellipse 1496.png"), fit: BoxFit.fill)), + image: AssetImage("assets/images/png/Ellipse 1496.png"), + fit: BoxFit.fill)), ), Column(children: [ GestureDetector( diff --git a/lib/Feed Module/sidemenu/Community/Watchlist.dart b/lib/Feed Module/sidemenu/Community/Watchlist.dart index f49f03d..5063a82 100644 --- a/lib/Feed Module/sidemenu/Community/Watchlist.dart +++ b/lib/Feed Module/sidemenu/Community/Watchlist.dart @@ -65,89 +65,88 @@ class _WatchlistState extends State { : SizedBox.shrink()), ), body: Stack(children: [ - const CommonBlurLeftRed(), - const CommonBlurRightRed(), - const CommonBlurLeft(), - const CommonBlurRight(), - Positioned.fill( - child: Padding( - padding: EdgeInsets.symmetric(horizontal: 16.w), - child: Column( - children: [ - sizedBoxHeight(40.h), - Expanded( - child: GridView.builder( - scrollDirection: Axis.vertical, - gridDelegate: - const SliverGridDelegateWithFixedCrossAxisCount( - crossAxisCount: 3, - mainAxisSpacing: 8, - crossAxisSpacing: 8, - childAspectRatio: 1, - ), - itemCount: images.length, - itemBuilder: (context, index) { - return GestureDetector( - onLongPress: () { - toggleCircles(); - }, - onTap: () { - toggleSelection(index); - }, - child: Obx(() { - return Stack( - children: [ - Container( + Container( + decoration: const BoxDecoration( + image: DecorationImage( + image: AssetImage("assets/images/png/Ellipse 1496.png"), + fit: BoxFit.fill)), + ), + Padding( + padding: EdgeInsets.symmetric(horizontal: 16.w), + child: Column( + children: [ + sizedBoxHeight(40.h), + Expanded( + child: GridView.builder( + scrollDirection: Axis.vertical, + gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( + crossAxisCount: 3, + mainAxisSpacing: 8, + crossAxisSpacing: 8, + childAspectRatio: 1, + ), + itemCount: images.length, + itemBuilder: (context, index) { + return GestureDetector( + onLongPress: () { + toggleCircles(); + }, + onTap: () { + toggleSelection(index); + }, + child: Obx(() { + return Stack( + children: [ + Container( + width: 115.w, + height: 115.h, + child: Image.asset( + images[index], width: 115.w, height: 115.h, - child: Image.asset( - images[index], - width: 115.w, - height: 115.h, - fit: BoxFit.cover, - ), + fit: BoxFit.cover, ), - if (showCircles.value) - Positioned( - top: 8.h, - right: 8.w, - child: GestureDetector( - onTap: () { - toggleSelection(index); - }, - child: Container( - width: 18.w, - height: 18.h, - decoration: BoxDecoration( - color: selected[index] - ? Colors.white - : Colors.transparent, - shape: BoxShape.circle, - border: Border.all( - color: Colors.white, width: 1), - ), - child: selected[index] - ? Center( - child: Icon( - Icons.check, - color: Color(0xFF344436), - size: 12, - weight: 3, - ), - ) - : null, + ), + if (showCircles.value) + Positioned( + top: 8.h, + right: 8.w, + child: GestureDetector( + onTap: () { + toggleSelection(index); + }, + child: Container( + width: 18.w, + height: 18.h, + decoration: BoxDecoration( + color: selected[index] + ? Colors.white + : Colors.transparent, + shape: BoxShape.circle, + border: Border.all( + color: Colors.white, width: 1), ), + child: selected[index] + ? Center( + child: Icon( + Icons.check, + color: Color(0xFF344436), + size: 12, + weight: 3, + ), + ) + : null, ), ), - ], - ); - }), - ); - }, - ), + ), + ], + ); + }), + ); + }, ), - ], - ), + ), + ], ), ), ]), diff --git a/lib/Utils/Common/CommonDropdown.dart b/lib/Utils/Common/CommonDropdown.dart index d7d02da..91d0d62 100644 --- a/lib/Utils/Common/CommonDropdown.dart +++ b/lib/Utils/Common/CommonDropdown.dart @@ -208,33 +208,73 @@ class _CustomDropDownTag1State extends State { mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: [ - CustomTextFormField( - hintText: widget.header, - suffixIcon: GestureDetector( - onTap: () { - onDropTap.value = !onDropTap.value; - }, - child: Container( - height: 20.h, - width: 20, - child: Center( - child: Image.asset( - 'assets/images/png/Frame 58575.png', - height: 20.h, - width: 20, + Container( + width: double.infinity, + height: 50.h, + padding: EdgeInsets.only( + right: 12.w, + left: 12.w, + ), + decoration: BoxDecoration( + color: Color(0xFFFFFFFF).withOpacity(0.10), + gradient: LinearGradient( + begin: Alignment.topLeft, + end: Alignment.bottomRight, + colors: [ + const Color(0xFFffffff).withOpacity(0.50), + const Color(0xFFFFFFFF).withOpacity(0.50), + ], + ), + // color: Color(0xFFFFFFFF).withOpacity(0.10), + borderRadius: onDropTap.value && filteredListData.isNotEmpty + ? BorderRadius.vertical( + top: Radius.circular(30.r), + ) + : BorderRadius.circular(30.r), + border: Border.all(color: const Color(0xFF434A53)), + ), + child: Center( + child: TextFormField( + controller: textEditingController, + style: TextStyle( + fontSize: 16.sp, + color: Colors.white, + fontFamily: 'Helvetica'), + cursorColor: Colors.red, + enableInteractiveSelection: false, + obscureText: false, + decoration: InputDecoration( + hintText: widget.header, + hintStyle: TextStyle( + fontSize: 16.sp, + color: Colors.white, + fontWeight: FontWeight.w400, + fontFamily: 'Helvetica'), + suffixIcon: GestureDetector( + onTap: () { + onDropTap.value = !onDropTap.value; + }, + child: Container( + height: 20.h, + width: 20, + child: Center( + child: Image.asset( + 'assets/images/png/Frame 58575.png', + height: 20.h, + width: 20, + ), + ), + ), ), + border: InputBorder.none, ), + onTap: () { + onDropTap.value = !onDropTap.value; + }, ), ), - textEditingController: textEditingController, - // onInput: (p0) { - // onDropTap.value = !onDropTap.value; - // }, - onTap: () { - onDropTap.value = !onDropTap.value; - }, ), - if (onDropTap.value) + if (onDropTap.value && filteredListData.isNotEmpty) Container( width: double.infinity, decoration: BoxDecoration( @@ -262,6 +302,7 @@ class _CustomDropDownTag1State extends State { onDropTap.value = false; textEditingController.text = selectedValue.value; widget.onItemSelected(selectedValue.value); + onDropTap.value = !onDropTap.value; }, child: Column( crossAxisAlignment: CrossAxisAlignment.start, diff --git a/lib/Utils/Common/CustomTextformfield.dart b/lib/Utils/Common/CustomTextformfield.dart index 24b617e..a6caef8 100644 --- a/lib/Utils/Common/CustomTextformfield.dart +++ b/lib/Utils/Common/CustomTextformfield.dart @@ -116,7 +116,6 @@ class _CustomTextFormFieldState extends State { enableInteractiveSelection: false, maxLines: widget.maxlines, obscureText: obscureText, - controller: widget.textEditingController, decoration: InputDecoration( hintText: widget.hintText,