929 lines
33 KiB
Dart
929 lines
33 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
|
import 'package:get/get.dart';
|
|
import 'package:regroup/Utils/Common/CustomTextformfield.dart';
|
|
import 'package:regroup/Utils/Common/sized_box.dart';
|
|
import 'package:regroup/Utils/texts.dart';
|
|
|
|
class CustomDropDownWidgetSignup extends StatefulWidget {
|
|
const CustomDropDownWidgetSignup({
|
|
Key? key,
|
|
required this.header,
|
|
required this.title,
|
|
required this.listData,
|
|
required this.onItemSelected,
|
|
required this.leadingImage,
|
|
}) : super(key: key);
|
|
|
|
final String header;
|
|
final String title;
|
|
final List<String> listData;
|
|
final Function(String) onItemSelected;
|
|
final Widget? leadingImage;
|
|
|
|
@override
|
|
State<CustomDropDownWidgetSignup> createState() =>
|
|
_CustomDropDownWidgetSignupState();
|
|
}
|
|
|
|
class _CustomDropDownWidgetSignupState
|
|
extends State<CustomDropDownWidgetSignup> {
|
|
RxBool onDropTap = false.obs;
|
|
RxString selectedValue = "".obs;
|
|
|
|
@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,
|
|
height: 50.h,
|
|
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: [
|
|
Row(
|
|
children: [
|
|
// Image.asset(
|
|
// 'assets/images/png/user.png',
|
|
// ),
|
|
|
|
widget.leadingImage!,
|
|
SizedBox(width: 16.w),
|
|
Text(
|
|
selectedValue.value.isEmpty
|
|
? widget.header
|
|
: selectedValue.value,
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 16.sp,
|
|
fontFamily: 'Helvetica',
|
|
fontWeight: FontWeight.w400),
|
|
),
|
|
],
|
|
),
|
|
onDropTap.value
|
|
? Image.asset('assets/images/png/arrowup.png')
|
|
: Image.asset('assets/images/png/arrowdown.png'),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
if (onDropTap.value)
|
|
Container(
|
|
width: double.infinity,
|
|
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: ListView.builder(
|
|
shrinkWrap: true,
|
|
itemCount: widget.listData.length,
|
|
itemBuilder: (context, index) {
|
|
return InkWell(
|
|
onTap: () {
|
|
selectedValue.value = widget.listData[index];
|
|
onDropTap.value = !onDropTap.value;
|
|
widget.onItemSelected(selectedValue.value);
|
|
},
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Padding(
|
|
padding: const EdgeInsets.only(
|
|
left: 20.0, right: 20.0, top: 10.0, bottom: 10.0),
|
|
child: Text(
|
|
widget.listData[index],
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 16.sp,
|
|
fontWeight: FontWeight.w400,
|
|
fontFamily: 'Helvetica'),
|
|
),
|
|
),
|
|
// sizedBoxHeight(5.h),
|
|
if (index != widget.listData.length - 1)
|
|
const Divider(thickness: 1, color: Color(0xFF434A53)),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class CustomDropDownTag1 extends StatefulWidget {
|
|
const CustomDropDownTag1(
|
|
{Key? key,
|
|
required this.header,
|
|
required this.title,
|
|
required this.listData,
|
|
required this.onItemSelected,
|
|
required this.leadingImage,
|
|
required this.rowData})
|
|
: super(key: key);
|
|
|
|
final String header;
|
|
final String title;
|
|
final List<String> listData;
|
|
final List<String> rowData;
|
|
final Function(String) onItemSelected;
|
|
final Widget? leadingImage;
|
|
|
|
@override
|
|
State<CustomDropDownTag1> createState() => _CustomDropDownTag1State();
|
|
}
|
|
|
|
class _CustomDropDownTag1State extends State<CustomDropDownTag1> {
|
|
RxBool onDropTap = false.obs;
|
|
RxString selectedValue = "".obs;
|
|
RxList<String> filteredListData = <String>[].obs;
|
|
TextEditingController textEditingController = TextEditingController();
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
filteredListData.value = widget.listData;
|
|
textEditingController.addListener(() {
|
|
filterList();
|
|
});
|
|
}
|
|
|
|
void filterList() {
|
|
String query = textEditingController.text.toLowerCase();
|
|
if (query.isNotEmpty) {
|
|
filteredListData.value = widget.listData
|
|
.where((item) => item.toLowerCase().contains(query))
|
|
.toList();
|
|
} else {
|
|
filteredListData.value = widget.listData;
|
|
}
|
|
onDropTap.value = filteredListData.isNotEmpty;
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Obx(
|
|
() => Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Container(
|
|
width: double.infinity,
|
|
height: 50.h,
|
|
padding: EdgeInsets.only(
|
|
right: 12.w,
|
|
left: 12.w,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: const 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;
|
|
},
|
|
),
|
|
),
|
|
),
|
|
if (onDropTap.value && filteredListData.isNotEmpty)
|
|
Container(
|
|
width: double.infinity,
|
|
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: ListView.builder(
|
|
shrinkWrap: true,
|
|
itemCount: filteredListData.length,
|
|
itemBuilder: (context, index) {
|
|
return InkWell(
|
|
onTap: () {
|
|
selectedValue.value = filteredListData[index];
|
|
onDropTap.value = false;
|
|
textEditingController.text = selectedValue.value;
|
|
widget.onItemSelected(selectedValue.value);
|
|
onDropTap.value = !onDropTap.value;
|
|
},
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Padding(
|
|
padding: const EdgeInsets.only(
|
|
left: 20.0, right: 20.0, top: 10.0, bottom: 10.0),
|
|
child: Row(
|
|
children: [
|
|
Text(
|
|
filteredListData[index],
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 16.sp,
|
|
fontWeight: FontWeight.w400,
|
|
fontFamily: 'Helvetica'),
|
|
),
|
|
const Spacer(),
|
|
text14400whiteblur(widget.rowData[widget.listData
|
|
.indexOf(filteredListData[index])]),
|
|
],
|
|
),
|
|
),
|
|
if (index != filteredListData.length - 1)
|
|
const Divider(thickness: 1, color: Color(0xFF434A53)),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class CustomDropDownTag extends StatefulWidget {
|
|
const CustomDropDownTag(
|
|
{Key? key,
|
|
required this.header,
|
|
required this.title,
|
|
required this.listData,
|
|
required this.onItemSelected,
|
|
required this.leadingImage,
|
|
required this.rowData})
|
|
: super(key: key);
|
|
|
|
final String header;
|
|
final String title;
|
|
final List<String> listData;
|
|
final List<String> rowData;
|
|
final Function(String) onItemSelected;
|
|
final Widget? leadingImage;
|
|
|
|
@override
|
|
State<CustomDropDownTag> createState() => _CustomDropDownTagState();
|
|
}
|
|
|
|
class _CustomDropDownTagState extends State<CustomDropDownTag> {
|
|
RxBool onDropTap = false.obs;
|
|
RxString selectedValue = "".obs;
|
|
|
|
@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,
|
|
height: 50.h,
|
|
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: [
|
|
Row(
|
|
children: [
|
|
// Image.asset(
|
|
// 'assets/images/png/user.png',
|
|
// ),
|
|
|
|
widget.leadingImage!,
|
|
SizedBox(width: 16.w),
|
|
Text(
|
|
selectedValue.value.isEmpty
|
|
? widget.header
|
|
: selectedValue.value,
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 16.sp,
|
|
fontFamily: 'Helvetica',
|
|
fontWeight: FontWeight.w400),
|
|
),
|
|
],
|
|
),
|
|
onDropTap.value
|
|
? Image.asset('assets/images/png/arrowup.png')
|
|
: Image.asset('assets/images/png/arrowdown.png'),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
if (onDropTap.value)
|
|
Container(
|
|
width: double.infinity,
|
|
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: ListView.builder(
|
|
shrinkWrap: true,
|
|
itemCount: widget.listData.length,
|
|
itemBuilder: (context, index) {
|
|
return InkWell(
|
|
onTap: () {
|
|
selectedValue.value = widget.listData[index];
|
|
onDropTap.value = !onDropTap.value;
|
|
widget.onItemSelected(selectedValue.value);
|
|
},
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Padding(
|
|
padding: const EdgeInsets.only(
|
|
left: 20.0, right: 20.0, top: 10.0, bottom: 10.0),
|
|
child: Row(
|
|
children: [
|
|
Text(
|
|
widget.listData[index],
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 16.sp,
|
|
fontWeight: FontWeight.w400,
|
|
fontFamily: 'Helvetica'),
|
|
),
|
|
const Spacer(),
|
|
text14400whiteblur(widget.rowData[index]),
|
|
],
|
|
),
|
|
),
|
|
// sizedBoxHeight(5.h),
|
|
if (index != widget.listData.length - 1)
|
|
const Divider(thickness: 1, color: Color(0xFF434A53)),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
class CustomDropDownRadio extends StatefulWidget {
|
|
const CustomDropDownRadio({
|
|
Key? key,
|
|
required this.header,
|
|
required this.title,
|
|
required this.listData,
|
|
required this.onItemSelected,
|
|
required this.leadingImage,
|
|
this.showOtherOption = false,
|
|
}) : super(key: key);
|
|
|
|
final String header;
|
|
final String title;
|
|
final List<String> listData;
|
|
final Function(String) onItemSelected;
|
|
final Widget? leadingImage;
|
|
final bool showOtherOption;
|
|
|
|
@override
|
|
State<CustomDropDownRadio> createState() => _CustomDropDownRadioState();
|
|
}
|
|
|
|
class _CustomDropDownRadioState extends State<CustomDropDownRadio> {
|
|
RxBool onDropTap = false.obs;
|
|
RxString selectedValue = "".obs;
|
|
final TextEditingController _textController =
|
|
TextEditingController(); // Add a text controller
|
|
|
|
List<DropdownMenuItem<String>> _buildDropdownMenuItems() {
|
|
List<DropdownMenuItem<String>> items =
|
|
widget.listData.asMap().entries.map((entry) {
|
|
int index = entry.key;
|
|
String item = entry.value;
|
|
return DropdownMenuItem<String>(
|
|
value: item,
|
|
child: InkWell(
|
|
onTap: () {
|
|
selectedValue.value = item;
|
|
_textController.clear();
|
|
widget.onItemSelected(item);
|
|
onDropTap.value = !onDropTap.value;
|
|
},
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Obx(() {
|
|
return Radio<String>(
|
|
value: item,
|
|
activeColor: Colors.white,
|
|
groupValue: selectedValue.value,
|
|
onChanged: (value) {
|
|
selectedValue.value = value!;
|
|
_textController.clear();
|
|
widget.onItemSelected(value);
|
|
},
|
|
);
|
|
}),
|
|
const SizedBox(width: 8),
|
|
Text(
|
|
item,
|
|
style: const TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 16,
|
|
fontFamily: 'Helvetica',
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
],
|
|
),
|
|
// SizedBox(height: 5.h),
|
|
if (index != widget.listData.length - 1)
|
|
const Divider(thickness: 1, color: Color(0xFF434A53)),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}).toList();
|
|
|
|
if (widget.showOtherOption) {
|
|
items.add(
|
|
DropdownMenuItem<String>(
|
|
value: _textController.text,
|
|
child: Column(
|
|
children: [
|
|
const Divider(thickness: 1, color: Color(0xFF434A53)),
|
|
Row(
|
|
children: [
|
|
Obx(() {
|
|
return Radio<String>(
|
|
value: _textController.text,
|
|
activeColor: Colors.white,
|
|
groupValue: selectedValue.value,
|
|
onChanged: (value) {
|
|
selectedValue.value = value!;
|
|
_textController.clear();
|
|
widget.onItemSelected(value);
|
|
},
|
|
);
|
|
}),
|
|
const SizedBox(width: 8),
|
|
const Text(
|
|
"Other: ",
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 16,
|
|
fontFamily: 'Helvetica',
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
Expanded(
|
|
child: TextField(
|
|
controller: _textController,
|
|
style: const TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 16,
|
|
fontFamily: 'Helvetica',
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
decoration: const InputDecoration(
|
|
hintText: '',
|
|
hintStyle: TextStyle(color: Colors.white70),
|
|
border: UnderlineInputBorder(),
|
|
),
|
|
),
|
|
),
|
|
TextButton(
|
|
onPressed: () {
|
|
if (_textController.text.trim().isNotEmpty) {
|
|
selectedValue.value = _textController.text;
|
|
widget.onItemSelected(_textController.text);
|
|
}
|
|
},
|
|
child: const Text(
|
|
'OK',
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 16,
|
|
fontFamily: 'Helvetica',
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
sizedBoxHeight(10.h),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
return items;
|
|
}
|
|
|
|
@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,
|
|
height: 50.h,
|
|
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: Center(
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.start,
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
widget.leadingImage!,
|
|
SizedBox(width: 12.w),
|
|
Text(
|
|
selectedValue.value.isEmpty
|
|
? widget.header
|
|
: selectedValue.value,
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 16.sp,
|
|
fontFamily: 'Helvetica',
|
|
fontWeight: FontWeight.w400),
|
|
),
|
|
Spacer(),
|
|
onDropTap.value
|
|
? Image.asset('assets/images/png/arrowup.png')
|
|
: Image.asset('assets/images/png/arrowdown.png'),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
if (onDropTap.value)
|
|
Scrollbar(
|
|
// thumbVisibility: true,
|
|
child: Container(
|
|
width: double.infinity,
|
|
//height: widget.listData.length > 4 ? 250.h : null,
|
|
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: Column(
|
|
// shrinkWrap: true,
|
|
// reverse: true,
|
|
children: _buildDropdownMenuItems(),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class CustomDropDownCheckBox extends StatefulWidget {
|
|
const CustomDropDownCheckBox({
|
|
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(String) onItemSelected;
|
|
final List<String> images;
|
|
final Widget? leadingImage;
|
|
|
|
@override
|
|
State<CustomDropDownCheckBox> createState() => _CustomDropDownCheckBoxState();
|
|
}
|
|
|
|
class _CustomDropDownCheckBoxState extends State<CustomDropDownCheckBox> {
|
|
RxBool onDropTap = false.obs;
|
|
RxList<String> selectedValues = <String>[].obs;
|
|
|
|
@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(
|
|
selectedValues.isEmpty
|
|
? widget.header
|
|
: selectedValues.join(', '),
|
|
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,
|
|
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: ListView.builder(
|
|
shrinkWrap: true,
|
|
itemCount: widget.listData.length,
|
|
itemBuilder: (context, index) {
|
|
String item = widget.listData[index];
|
|
String image = widget.images[index];
|
|
return InkWell(
|
|
onTap: () {
|
|
if (selectedValues.contains(item)) {
|
|
selectedValues.remove(item);
|
|
} else {
|
|
selectedValues.add(item);
|
|
}
|
|
widget.onItemSelected(selectedValues.join(', '));
|
|
},
|
|
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: DecorationImage(
|
|
image: AssetImage(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: selectedValues.contains(item),
|
|
activeColor: const Color(0xFF434A53),
|
|
checkColor: Colors.white,
|
|
onChanged: (bool? value) {
|
|
if (value == true) {
|
|
selectedValues.add(item);
|
|
} else {
|
|
selectedValues.remove(item);
|
|
}
|
|
widget.onItemSelected(
|
|
selectedValues.join(', '));
|
|
},
|
|
),
|
|
],
|
|
),
|
|
),
|
|
if (index != widget.listData.length - 1)
|
|
const Divider(thickness: 1, color: Color(0xFF434A53)),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|