new glassUi package added

This commit is contained in:
cj201199
2024-07-05 14:49:57 +05:30
parent 807f765d2e
commit babc4418fc
6 changed files with 639 additions and 110 deletions

View File

@@ -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<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 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) => <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,
),
),
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<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-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),
],
),
);

View File

@@ -62,7 +62,7 @@ class _PostScreenState extends State<PostScreen> {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
sizedBoxHeight(20.h),
text16w400_FCFCFC("Caption"),
sizedBoxHeight(18.h),

View File

@@ -32,7 +32,8 @@ class _SettingsState extends State<Settings> {
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(

View File

@@ -65,89 +65,88 @@ class _WatchlistState extends State<Watchlist> {
: 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,
),
),
],
);
}),
);
},
),
),
],
);
}),
);
},
),
],
),
),
],
),
),
]),

View File

@@ -208,33 +208,73 @@ class _CustomDropDownTag1State extends State<CustomDropDownTag1> {
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<CustomDropDownTag1> {
onDropTap.value = false;
textEditingController.text = selectedValue.value;
widget.onItemSelected(selectedValue.value);
onDropTap.value = !onDropTap.value;
},
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,

View File

@@ -116,7 +116,6 @@ class _CustomTextFormFieldState extends State<CustomTextFormField> {
enableInteractiveSelection: false,
maxLines: widget.maxlines,
obscureText: obscureText,
controller: widget.textEditingController,
decoration: InputDecoration(
hintText: widget.hintText,