expansion only on clicking icon

This commit is contained in:
hannathkadher
2024-10-11 13:21:30 +04:00
parent cd957ed1c7
commit 56c4c858be
4 changed files with 83 additions and 66 deletions

View File

@ -5,8 +5,10 @@ class CustomExpansionTile extends StatefulWidget {
final String title;
final List<Widget>? children;
final bool initiallyExpanded;
final bool isSelected; // Add this to track selection
final bool? isExpanded; // External control over expansion
final ValueChanged<bool>? onExpansionChanged; // Notify when expansion changes
final VoidCallback? onItemSelected; // Callback for selecting the item
CustomExpansionTile({
required this.title,
@ -14,6 +16,8 @@ class CustomExpansionTile extends StatefulWidget {
this.initiallyExpanded = false,
this.isExpanded, // Allow external control over expansion
this.onExpansionChanged, // Notify when expansion changes
this.onItemSelected, // Trigger item selection when name is tapped
required this.isSelected, // Add this to initialize selection state
});
@override
@ -22,7 +26,6 @@ class CustomExpansionTile extends StatefulWidget {
class CustomExpansionTileState extends State<CustomExpansionTile> {
bool _isExpanded = false; // Local expansion state
bool _isChecked = false; // Local checkbox state
@override
void initState() {
@ -51,57 +54,66 @@ class CustomExpansionTileState extends State<CustomExpansionTile> {
Widget build(BuildContext context) {
return Column(
children: [
// The main clickable row for the expansion tile
InkWell(
onTap: () {
setState(() {
_isExpanded = !_isExpanded;
widget.onExpansionChanged?.call(_isExpanded);
});
},
child: Row(
children: [
// Checkbox with independent state management
Checkbox(
value: _isChecked,
onChanged: (bool? value) {
Row(
children: [
// Checkbox with independent state management
Checkbox(
value: false,
onChanged: (bool? value) {
setState(() {});
},
side: WidgetStateBorderSide.resolveWith((states) {
return const BorderSide(color: ColorsManager.grayBorder);
}),
fillColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.selected)) {
return ColorsManager.grayBorder;
} else {
return ColorsManager.checkBoxFillColor;
}
}),
checkColor: ColorsManager.whiteColors,
),
// Expand/collapse icon, now wrapped in a GestureDetector for specific onTap
if (widget.children != null && widget.children!.isNotEmpty)
GestureDetector(
onTap: () {
setState(() {
_isChecked = value ?? false;
_isExpanded = !_isExpanded;
widget.onExpansionChanged?.call(_isExpanded);
});
},
side: MaterialStateBorderSide.resolveWith((states) {
return const BorderSide(color: ColorsManager.grayBorder);
}),
fillColor: MaterialStateProperty.resolveWith((states) {
if (states.contains(MaterialState.selected)) {
return ColorsManager.grayBorder;
} else {
return ColorsManager.checkBoxFillColor;
}
}),
checkColor: ColorsManager.whiteColors,
),
// Show the expand/collapse icon
if (widget.children != null && widget.children!.isNotEmpty)
Icon(
child: Icon(
_isExpanded
? Icons.keyboard_arrow_down
: Icons.keyboard_arrow_right,
color: Colors.grey,
size: 16.0, // Adjusted size for better alignment
),
// The title text with dynamic styling
Expanded(
),
// The title text, wrapped in GestureDetector to handle selection
Expanded(
child: GestureDetector(
onTap: () {
// Triggerxq the onItemSelected callback when the name is tapped
if (widget.onItemSelected != null) {
widget.onItemSelected!();
}
debugPrint('${widget.title} ${widget.isSelected} tapped for selection');
},
child: Text(
_capitalizeFirstLetter(widget.title),
style: TextStyle(
color:ColorsManager.lightGrayColor,
color: widget.isSelected
? Colors.black // Change color to black when selected
: ColorsManager
.lightGrayColor, // Gray when not selected
fontWeight: FontWeight.w400,
),
),
),
],
),
),
],
),
// The expanded section (children) that shows when the tile is expanded
if (_isExpanded &&