Implemented the selection behavior of the side tree

This commit is contained in:
Abdullah Alassaf
2025-01-30 04:03:54 +03:00
parent 2221d9ae7b
commit 43c17d1c18
14 changed files with 446 additions and 501 deletions

View File

@ -1,54 +1,26 @@
import 'package:flutter/material.dart';
import 'package:syncrow_web/utils/color_manager.dart';
class CustomExpansionTileSpaceTree extends StatefulWidget {
class CustomExpansionTileSpaceTree extends StatelessWidget {
final String? spaceId;
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
final bool isSelected;
final bool isSoldCheck;
final bool isExpanded;
final Function? onExpansionChanged;
final Function? onItemSelected;
CustomExpansionTileSpaceTree({
required this.title,
this.children,
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
CustomExpansionTileState createState() => CustomExpansionTileState();
}
class CustomExpansionTileState extends State<CustomExpansionTileSpaceTree> {
bool _isExpanded = false; // Local expansion state
@override
void initState() {
super.initState();
_isExpanded = widget.initiallyExpanded;
}
@override
void didUpdateWidget(CustomExpansionTileSpaceTree oldWidget) {
super.didUpdateWidget(oldWidget);
// Sync local state with external control of expansion state
if (widget.isExpanded != null && widget.isExpanded != _isExpanded) {
setState(() {
_isExpanded = widget.isExpanded!;
});
}
}
// Utility function to capitalize the first letter of the title
String _capitalizeFirstLetter(String text) {
if (text.isEmpty) return text;
return text[0].toUpperCase() + text.substring(1);
}
const CustomExpansionTileSpaceTree(
{super.key,
this.spaceId,
required this.title,
this.children,
this.isExpanded = false,
this.onExpansionChanged,
this.onItemSelected,
required this.isSelected,
this.isSoldCheck = false});
@override
Widget build(BuildContext context) {
@ -56,14 +28,14 @@ class CustomExpansionTileState extends State<CustomExpansionTileSpaceTree> {
children: [
Row(
children: [
// Checkbox with independent state management
Checkbox(
value: widget.isSelected,
value: isSoldCheck ? null : isSelected,
onChanged: (bool? value) {
if (widget.onItemSelected != null) {
widget.onItemSelected!();
if (onItemSelected != null) {
onItemSelected!();
}
},
tristate: true,
side: WidgetStateBorderSide.resolveWith((states) {
return const BorderSide(color: ColorsManager.grayBorder);
}),
@ -76,52 +48,52 @@ class CustomExpansionTileState extends State<CustomExpansionTileSpaceTree> {
}),
checkColor: ColorsManager.whiteColors,
),
// Expand/collapse icon, now wrapped in a GestureDetector for specific onTap
if (widget.children != null && widget.children!.isNotEmpty)
GestureDetector(
if (children != null && children!.isNotEmpty)
InkWell(
onTap: () {
setState(() {
_isExpanded = !_isExpanded;
widget.onExpansionChanged?.call(_isExpanded);
});
if (onExpansionChanged != null) {
onExpansionChanged!();
}
},
child: Icon(
_isExpanded ? Icons.keyboard_arrow_down : Icons.keyboard_arrow_right,
isExpanded ? Icons.keyboard_arrow_down : Icons.keyboard_arrow_right,
color: ColorsManager.lightGrayColor,
size: 16.0, // Adjusted size for better alignment
size: 16.0,
),
),
// The title text, wrapped in GestureDetector to handle selection
Expanded(
child: GestureDetector(
onTap: () {
if (widget.onItemSelected != null) {
widget.onItemSelected!();
if (onItemSelected != null) {
onItemSelected!();
}
},
child: Text(
_capitalizeFirstLetter(widget.title),
style: TextStyle(
color: widget.isSelected
? ColorsManager.blackColor // Change color to black when selected
: ColorsManager.lightGrayColor, // Gray when not selected
fontWeight: FontWeight.w400,
),
_capitalizeFirstLetter(title),
style: Theme.of(context).textTheme.bodySmall!.copyWith(
color: isSelected
? ColorsManager.blackColor // 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 && widget.children != null && widget.children!.isNotEmpty)
if (isExpanded && children != null && children!.isNotEmpty)
Padding(
padding: const EdgeInsets.only(left: 48.0), // Indented children
padding: const EdgeInsets.only(left: 48.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: widget.children!,
children: children ?? [],
),
),
],
);
}
String _capitalizeFirstLetter(String text) {
if (text.isEmpty) return text;
return text[0].toUpperCase() + text.substring(1);
}
}