bugs solved for dropdown in create post

This commit is contained in:
Shubhamshirva
2024-08-26 13:31:16 +05:30
parent 6eba901db1
commit fb271e64c4

View File

@@ -926,6 +926,220 @@ class _PostScreenState extends State<PostScreen> {
}
}
// class CustomDropDownCheckBoxPostNew extends StatefulWidget {
// const CustomDropDownCheckBoxPostNew({
// Key? key,
// required this.header,
// required this.title,
// required this.listData,
// required this.onItemSelected,
// required this.images,
// required this.leadingImage,
// }) : super(key: key);
// final String header;
// final String title;
// final List<String> listData;
// final Function(List<String>) onItemSelected;
// final List<String>? images;
// final Widget? leadingImage;
// @override
// State<CustomDropDownCheckBoxPostNew> createState() =>
// _CustomDropDownCheckBoxPostNewState();
// }
// class _CustomDropDownCheckBoxPostNewState
// extends State<CustomDropDownCheckBoxPostNew> {
// RxBool onDropTap = false.obs;
// RxString selectedValue =
// ''.obs; // Use a single string to track the selected value
// @override
// Widget build(BuildContext context) {
// return Obx(
// () => Column(
// mainAxisSize: MainAxisSize.min,
// crossAxisAlignment: CrossAxisAlignment.start,
// children: [
// GestureDetector(
// onTap: () {
// onDropTap.value = !onDropTap.value;
// },
// child: Container(
// width: double.infinity,
// padding: EdgeInsets.only(
// top: 14.0, bottom: 14.0, right: 22.w, left: 12.w),
// decoration: BoxDecoration(
// color: const Color(0xFFFFFFFF).withOpacity(0.10),
// borderRadius: onDropTap.value
// ? BorderRadius.vertical(top: Radius.circular(30.r))
// : BorderRadius.circular(30.r),
// gradient: LinearGradient(
// begin: Alignment.topLeft,
// end: Alignment.bottomRight,
// colors: [
// const Color(0xFFffffff).withOpacity(0.50),
// const Color(0xFFFFFFFF).withOpacity(0.50),
// ],
// ),
// border: Border.all(color: const Color(0xFF434A53)),
// ),
// child: Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
// children: [
// Expanded(
// child: Row(
// children: [
// if (widget.leadingImage != null) widget.leadingImage!,
// SizedBox(width: 16.w),
// Expanded(
// child: Text(
// selectedValue.value.isEmpty
// ? widget.header
// : selectedValue.value,
// style: TextStyle(
// color: Colors.white,
// fontSize: 16.sp,
// fontFamily: 'Helvetica',
// fontWeight: FontWeight.w400,
// ),
// overflow: TextOverflow.ellipsis,
// ),
// ),
// ],
// ),
// ),
// onDropTap.value
// ? Image.asset('assets/images/png/arrowup.png')
// : Image.asset('assets/images/png/arrowdown.png'),
// ],
// ),
// ),
// ),
// if (onDropTap.value)
// Container(
// width: double.infinity,
// height: 250.h,
// decoration: BoxDecoration(
// color: const Color(0xFFFFFFFF).withOpacity(0.10),
// borderRadius:
// BorderRadius.vertical(bottom: Radius.circular(30.r)),
// border: Border.all(color: const Color(0xFF434A53)),
// gradient: LinearGradient(
// begin: Alignment.topLeft,
// end: Alignment.bottomRight,
// colors: [
// const Color(0xFFffffff).withOpacity(0.50),
// const Color(0xFFFFFFFF).withOpacity(0.50),
// ],
// ),
// ),
// child: widget.listData.isEmpty
// ? Padding(
// padding: const EdgeInsets.symmetric(
// vertical: 10.0, horizontal: 20.0),
// child: Center(
// child: Text(
// 'No communities available',
// style: TextStyle(
// color: Colors.white,
// fontSize: 16.sp,
// fontFamily: 'Helvetica',
// fontWeight: FontWeight.w400,
// ),
// ),
// ),
// )
// : ListView.builder(
// shrinkWrap: true,
// physics: ScrollPhysics(),
// itemCount: widget.listData.length,
// itemBuilder: (context, index) {
// String item = widget.listData[index];
// String image = widget.images![index];
// return InkWell(
// onTap: () {
// setState(() {
// selectedValue.value =
// item; // Set the selected value
// onDropTap.value = false; // Close the dropdown
// });
// widget.onItemSelected(
// [item]); // Pass the selected item
// },
// child: Column(
// crossAxisAlignment: CrossAxisAlignment.start,
// children: [
// Padding(
// padding: const EdgeInsets.symmetric(
// vertical: 10.0, horizontal: 20.0),
// child: Row(
// children: [
// Container(
// width: 40.w,
// height: 40.h,
// decoration: BoxDecoration(
// borderRadius:
// BorderRadius.circular(8.r),
// image: image.isEmpty
// ? null
// : DecorationImage(
// image: NetworkImage(image),
// fit: BoxFit.cover,
// )),
// ),
// SizedBox(width: 8.w),
// Expanded(
// child: Text(
// item,
// style: TextStyle(
// color: Colors.white,
// fontSize: 16.sp,
// fontFamily: 'hiragino',
// fontWeight: FontWeight.w500,
// ),
// overflow: TextOverflow.ellipsis,
// ),
// ),
// Checkbox(
// side: const BorderSide(
// color: Color(0xFF434A53)),
// value: selectedValue.value ==
// item, // Check if item is selected
// activeColor: const Color(0xFF434A53),
// checkColor: Colors.white,
// onChanged: (bool? value) {
// if (value == true) {
// setState(() {
// selectedValue.value =
// item; // Set the selected value
// onDropTap.value =
// false; // Close the dropdown
// });
// widget.onItemSelected(
// [item]); // Pass the selected item
// }
// },
// ),
// ],
// ),
// ),
// if (index != widget.listData.length - 1)
// const Divider(
// thickness: 1, color: Color(0xFF434A53)),
// ],
// ),
// );
// },
// ),
// ),
// ],
// ),
// );
// }
// }
class CustomDropDownCheckBoxPostNew extends StatefulWidget {
const CustomDropDownCheckBoxPostNew({
Key? key,
@@ -952,11 +1166,23 @@ class CustomDropDownCheckBoxPostNew extends StatefulWidget {
class _CustomDropDownCheckBoxPostNewState
extends State<CustomDropDownCheckBoxPostNew> {
RxBool onDropTap = false.obs;
RxString selectedValue =
''.obs; // Use a single string to track the selected value
RxString selectedValue = ''.obs;
@override
Widget build(BuildContext context) {
// Define the height of each item and the padding for the container
const double itemHeight = 60.0;
const double containerPadding = 16.0;
const double minimumDropdownHeight =
50.0; // Minimum height when list is empty
// Calculate the height of the dropdown container based on the number of items
double dropdownHeight = widget.listData.isEmpty
? minimumDropdownHeight
: (widget.listData.length * itemHeight) + containerPadding;
// Set a maximum height to avoid the dropdown becoming too large
dropdownHeight = dropdownHeight > 250.0 ? 250.0 : dropdownHeight;
return Obx(
() => Column(
mainAxisSize: MainAxisSize.min,
@@ -969,12 +1195,12 @@ class _CustomDropDownCheckBoxPostNewState
child: Container(
width: double.infinity,
padding: EdgeInsets.only(
top: 14.0, bottom: 14.0, right: 22.w, left: 12.w),
top: 14.0, bottom: 14.0, right: 22.0, left: 12.0),
decoration: BoxDecoration(
color: const Color(0xFFFFFFFF).withOpacity(0.10),
borderRadius: onDropTap.value
? BorderRadius.vertical(top: Radius.circular(30.r))
: BorderRadius.circular(30.r),
? BorderRadius.vertical(top: Radius.circular(30.0))
: BorderRadius.circular(30.0),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
@@ -992,7 +1218,7 @@ class _CustomDropDownCheckBoxPostNewState
child: Row(
children: [
if (widget.leadingImage != null) widget.leadingImage!,
SizedBox(width: 16.w),
SizedBox(width: 16.0),
Expanded(
child: Text(
selectedValue.value.isEmpty
@@ -1000,7 +1226,7 @@ class _CustomDropDownCheckBoxPostNewState
: selectedValue.value,
style: TextStyle(
color: Colors.white,
fontSize: 16.sp,
fontSize: 16.0,
fontFamily: 'Helvetica',
fontWeight: FontWeight.w400,
),
@@ -1018,121 +1244,116 @@ class _CustomDropDownCheckBoxPostNewState
),
),
if (onDropTap.value)
Container(
width: double.infinity,
height: 250.h,
decoration: BoxDecoration(
color: const Color(0xFFFFFFFF).withOpacity(0.10),
borderRadius:
BorderRadius.vertical(bottom: Radius.circular(30.r)),
border: Border.all(color: const Color(0xFF434A53)),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
const Color(0xFFffffff).withOpacity(0.50),
const Color(0xFFFFFFFF).withOpacity(0.50),
],
ClipRRect(
borderRadius:
BorderRadius.vertical(bottom: Radius.circular(30.0)),
child: Container(
width: double.infinity,
height: dropdownHeight,
decoration: BoxDecoration(
color: const Color(0xFFFFFFFF).withOpacity(0.10),
border: Border.all(color: const Color(0xFF434A53)),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
const Color(0xFFffffff).withOpacity(0.50),
const Color(0xFFFFFFFF).withOpacity(0.50),
],
),
),
),
child: widget.listData.isEmpty
? Padding(
padding: const EdgeInsets.symmetric(
vertical: 10.0, horizontal: 20.0),
child: Center(
child: Text(
'No communities available',
style: TextStyle(
color: Colors.white,
fontSize: 16.sp,
fontFamily: 'Helvetica',
fontWeight: FontWeight.w400,
child: widget.listData.isEmpty
? Padding(
padding: const EdgeInsets.symmetric(
vertical: 10.0, horizontal: 20.0),
child: Center(
child: Text(
'No communities available',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
fontFamily: 'Helvetica',
fontWeight: FontWeight.w400,
),
),
),
),
)
: ListView.builder(
shrinkWrap: true,
physics: ScrollPhysics(),
itemCount: widget.listData.length,
itemBuilder: (context, index) {
String item = widget.listData[index];
String image = widget.images![index];
return InkWell(
onTap: () {
setState(() {
selectedValue.value =
item; // Set the selected value
onDropTap.value = false; // Close the dropdown
});
widget.onItemSelected(
[item]); // Pass the selected item
},
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.symmetric(
vertical: 10.0, horizontal: 20.0),
child: Row(
children: [
Container(
width: 40.w,
height: 40.h,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(8.r),
image: image.isEmpty
? null
: DecorationImage(
image: NetworkImage(image),
fit: BoxFit.cover,
)),
),
SizedBox(width: 8.w),
Expanded(
child: Text(
item,
style: TextStyle(
color: Colors.white,
fontSize: 16.sp,
fontFamily: 'hiragino',
fontWeight: FontWeight.w500,
),
overflow: TextOverflow.ellipsis,
)
: ListView.separated(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
itemCount: widget.listData.length,
separatorBuilder: (context, index) =>
Divider(thickness: 1, color: Color(0xFF434A53)),
itemBuilder: (context, index) {
String item = widget.listData[index];
String image = widget.images![index];
return InkWell(
onTap: () {
setState(() {
selectedValue.value =
item; // Set the selected value
onDropTap.value = false; // Close the dropdown
});
widget.onItemSelected(
[item]); // Pass the selected item
},
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 10.0, horizontal: 20.0),
child: Row(
children: [
Container(
width: 40.0,
height: 40.0,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(8.0),
image: image.isEmpty
? null
: DecorationImage(
image: NetworkImage(image),
fit: BoxFit.cover,
)),
),
SizedBox(width: 8.0),
Expanded(
child: Text(
item,
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
fontFamily: 'hiragino',
fontWeight: FontWeight.w500,
),
overflow: TextOverflow.ellipsis,
),
Checkbox(
side: const BorderSide(
color: Color(0xFF434A53)),
value: selectedValue.value ==
item, // Check if item is selected
activeColor: const Color(0xFF434A53),
checkColor: Colors.white,
onChanged: (bool? value) {
if (value == true) {
setState(() {
selectedValue.value =
item; // Set the selected value
onDropTap.value =
false; // Close the dropdown
});
widget.onItemSelected(
[item]); // Pass the selected item
}
},
),
],
),
),
Checkbox(
side: const BorderSide(
color: Color(0xFF434A53)),
value: selectedValue.value == item,
activeColor: const Color(0xFF434A53),
checkColor: Colors.white,
onChanged: (bool? value) {
if (value == true) {
setState(() {
selectedValue.value =
item; // Set the selected value
onDropTap.value =
false; // Close the dropdown
});
widget.onItemSelected(
[item]); // Pass the selected item
}
},
),
],
),
if (index != widget.listData.length - 1)
const Divider(
thickness: 1, color: Color(0xFF434A53)),
],
),
);
},
),
),
);
},
),
),
),
],
),
@@ -1204,6 +1425,18 @@ class _CustomDropDownPopularTagState extends State<CustomDropDownPopularTag> {
@override
Widget build(BuildContext context) {
const double itemHeight = 60.0;
const double containerPadding = 16.0;
const double minimumDropdownHeight =
50.0; // Minimum height when list is empty
// Calculate the height of the dropdown container based on the number of items
double dropdownHeight = filteredTags.isEmpty
? minimumDropdownHeight
: (filteredTags.length * itemHeight) + containerPadding;
// Set a maximum height to avoid the dropdown becoming too large
dropdownHeight = dropdownHeight > 250.0 ? 250.0 : dropdownHeight;
return Obx(
() => Column(
crossAxisAlignment: CrossAxisAlignment.start,
@@ -1264,7 +1497,8 @@ class _CustomDropDownPopularTagState extends State<CustomDropDownPopularTag> {
// Dropdown List
if (onDropTap.value && filteredTags.isNotEmpty)
Container(
height: 250.h,
height: dropdownHeight,
// 250.h,
width: double.infinity,
decoration: BoxDecoration(
color: const Color(0xFFFFFFFF).withOpacity(0.10),