From fb271e64c431c710610d0e7663e66eb09939e29e Mon Sep 17 00:00:00 2001 From: Shubhamshirva Date: Mon, 26 Aug 2024 13:31:16 +0530 Subject: [PATCH] bugs solved for dropdown in create post --- .../Community_HomePage/PostScreen.dart | 468 +++++++++++++----- 1 file changed, 351 insertions(+), 117 deletions(-) diff --git a/lib/Main_Screens/Community_HomePage/PostScreen.dart b/lib/Main_Screens/Community_HomePage/PostScreen.dart index 35d2482..970b375 100644 --- a/lib/Main_Screens/Community_HomePage/PostScreen.dart +++ b/lib/Main_Screens/Community_HomePage/PostScreen.dart @@ -926,6 +926,220 @@ class _PostScreenState extends State { } } +// 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 listData; +// final Function(List) onItemSelected; +// final List? images; +// final Widget? leadingImage; + +// @override +// State createState() => +// _CustomDropDownCheckBoxPostNewState(); +// } + +// class _CustomDropDownCheckBoxPostNewState +// extends State { +// 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 { 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 { @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 { // 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),