diff --git a/assets/icons/rounded_add_icon.svg b/assets/icons/rounded_add_icon.svg
new file mode 100644
index 00000000..35068a99
--- /dev/null
+++ b/assets/icons/rounded_add_icon.svg
@@ -0,0 +1,4 @@
+
diff --git a/assets/icons/textfield_search_icon.svg b/assets/icons/textfield_search_icon.svg
new file mode 100644
index 00000000..143af01c
--- /dev/null
+++ b/assets/icons/textfield_search_icon.svg
@@ -0,0 +1,4 @@
+
diff --git a/lib/common/custom_expansion_tile.dart b/lib/common/custom_expansion_tile.dart
new file mode 100644
index 00000000..cc140263
--- /dev/null
+++ b/lib/common/custom_expansion_tile.dart
@@ -0,0 +1,104 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class CustomExpansionTile extends StatefulWidget {
+ final String title;
+ final List? children;
+ final bool initiallyExpanded;
+
+ CustomExpansionTile({
+ required this.title,
+ this.children,
+ this.initiallyExpanded = false,
+ });
+
+ @override
+ CustomExpansionTileState createState() => CustomExpansionTileState();
+}
+
+class CustomExpansionTileState extends State {
+ bool _isExpanded = false;
+ bool _isChecked = false;
+
+ @override
+ void initState() {
+ super.initState();
+ _isExpanded = widget.initiallyExpanded;
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Column(
+ children: [
+ InkWell(
+ onTap: () {
+ setState(() {
+ _isExpanded = !_isExpanded;
+ });
+ },
+ child: Row(
+ children: [
+ // Customizing the Checkbox
+ Checkbox(
+ value: _isChecked,
+ onChanged: (bool? value) {
+ setState(() {
+ _isChecked = value ?? false;
+ });
+ },
+ side: WidgetStateBorderSide.resolveWith((states) {
+ if (states.contains(WidgetState.selected)) {
+ return const BorderSide(color: ColorsManager.grayBorder);
+ }
+ return const BorderSide(color: ColorsManager.grayBorder);
+ }),
+ // Customize the color for different checkbox states
+ fillColor: WidgetStateProperty.resolveWith((states) {
+ if (states.contains(WidgetState.selected)) {
+ return ColorsManager.grayBorder; // Checked state color
+ }
+ return ColorsManager
+ .checkBoxFillColor; // Unchecked state color
+ }),
+ checkColor: ColorsManager.whiteColors, // Checkmark color
+ ),
+ // Expand/Collapse Icon with reduced size
+ if (widget.children != null && widget.children!.isNotEmpty)
+ Icon(
+ _isExpanded
+ ? Icons.keyboard_arrow_down // Upward arrow when expanded
+ : Icons
+ .keyboard_arrow_right, // Right arrow when collapsed
+ color: Colors.grey,
+ size: 16.0, // Reduced icon size
+ ),
+ // Title Text
+ Expanded(
+ child: Text(
+ widget.title,
+ style: TextStyle(
+ color: _isExpanded
+ ? ColorsManager.blackColor
+ : ColorsManager.lightGrayColor,
+ fontWeight: FontWeight.w400,
+ ),
+ ),
+ ),
+ ],
+ ),
+ ),
+ // Display children if available and expanded
+ if (_isExpanded &&
+ widget.children != null &&
+ widget.children!.isNotEmpty)
+ Padding(
+ padding: const EdgeInsets.only(left: 48.0), // Indent the children
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: widget.children!,
+ ),
+ ),
+ ],
+ );
+ }
+}
diff --git a/lib/pages/spaces_management/view/spaces_management_page.dart b/lib/pages/spaces_management/view/spaces_management_page.dart
index 8b992a0c..6a7f177e 100644
--- a/lib/pages/spaces_management/view/spaces_management_page.dart
+++ b/lib/pages/spaces_management/view/spaces_management_page.dart
@@ -1,8 +1,12 @@
+import 'dart:ui_web';
+
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
+import 'package:syncrow_web/common/custom_expansion_tile.dart';
import 'package:syncrow_web/pages/common/buttons/add_space_button.dart';
import 'package:syncrow_web/pages/spaces_management/view/dialogs/create_space_dialog.dart';
import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
class SpaceManagementPage extends StatefulWidget {
@override
@@ -25,17 +29,16 @@ class SpaceManagementPageState extends State {
),
body: Stack(
clipBehavior: Clip.none,
-
children: [
Row(
children: [
// Sidebar for navigation and community list
Container(
- width: 250, // Fixed width for sidebar
+ width: 300, // Fixed width for sidebar
decoration: BoxDecoration(
color: Colors.white, // No gradient inside
),
-
+
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
@@ -73,107 +76,104 @@ class SpaceManagementPageState extends State {
child: Container(
width: 30,
height: 30,
- decoration: BoxDecoration(
+ decoration: const BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
- boxShadow: [
- BoxShadow(
- color: Colors.black.withOpacity(0.1),
- blurRadius: 10,
- spreadRadius: 1,
- ),
- ],
),
child: Center(
- child: Icon(Icons.add,
- color: Colors.blue, size: 18),
+ child: SvgPicture.asset(
+ Assets
+ .roundedAddIcon, // Path to your SVG asset
+ width: 24, // Set the width
+ height: 24, // Set the height
+ ),
),
),
),
],
),
),
+
+ // Search bar
// Search bar
- SizedBox(height: 16),
Container(
decoration: BoxDecoration(
+ color: ColorsManager.whiteColors,
boxShadow: [
BoxShadow(
- color: Colors.black.withOpacity(0.1),
- blurRadius: 10,
- spreadRadius: 1,
- offset: Offset(0, 2), // Slight shadow offset
+ color:
+ Colors.black.withOpacity(0.2), // Subtle shadow
+ spreadRadius: 0, // No spread
+ blurRadius: 8, // Softer shadow edges
+ offset: Offset(0, 4), // Shadow only on the bottom
),
],
),
- child: Padding(
- padding: const EdgeInsets.symmetric(
- horizontal: 16.0), // Padding around the search bar
- child: Container(
- decoration: BoxDecoration(
- color: Colors.grey[
- 200], // Light background for the search bar
- borderRadius: BorderRadius.circular(10),
- boxShadow: [
- BoxShadow(
- color: Colors.black.withOpacity(0.05),
- blurRadius:
- 8, // Softer shadow for the search box
- ),
- ],
+ padding: const EdgeInsets.symmetric(horizontal: 16.0),
+ child: Container(
+ padding: const EdgeInsets.symmetric(vertical: 20.0),
+ width: double
+ .infinity, // Make the container take the full width of its parent
+ decoration: BoxDecoration(
+ borderRadius: BorderRadius.circular(
+ 12), // Smooth rounded corners
+ ),
+ child: TextField(
+ style: const TextStyle(
+ color: Colors.black, // Set the text color to black
),
- child: TextField(
- decoration: InputDecoration(
- hintText: 'Search',
- prefixIcon:
- Icon(Icons.search, color: Colors.grey),
- border: InputBorder.none, // No visible border
+ decoration: InputDecoration(
+ filled: true,
+ fillColor: ColorsManager
+ .textFieldGreyColor, // Background color for the text field itself
+ hintText: 'Search',
+ hintStyle: TextStyle(
+ color: Colors.grey[400], // Gray hint text color
),
+ suffixIcon: Padding(
+ padding: const EdgeInsets.only(
+ right:
+ 16), // Add padding to avoid icon sticking to the edge
+ child: SvgPicture.asset(
+ Assets
+ .textFieldSearch, // Path to your SVG asset
+ width: 24, // Set the width
+ height: 24, // Set the height
+ ),
+ ), // Search icon
+ border: OutlineInputBorder(
+ borderSide: BorderSide.none, // Remove border
+ borderRadius: BorderRadius.circular(
+ 12), // Rounded corners for text field
+ ),
+ contentPadding: const EdgeInsets.symmetric(
+ vertical:
+ 14, // Vertical padding for proper text alignment
+ horizontal:
+ 16, // Add space between the text and the left edge
+ ), // Proper padding for alignment
),
),
),
),
- SizedBox(height: 16),
+
+ const SizedBox(height: 16),
// Example of community list
Expanded(
child: ListView(
children: [
- ListTile(
- title: Text(
- 'Downtown Dubai',
- style: TextStyle(
- color: Colors.black87,
- fontWeight: FontWeight.w500,
- ),
- ),
+ CustomExpansionTile(
+ title: "Downtown Dubai",
),
- ListTile(
- title: Text(
- 'Dubai Creek Harbour',
- style: TextStyle(
- color: Colors.black87,
- fontWeight: FontWeight.w500,
- ),
- ),
+ CustomExpansionTile(
+ title: 'Dubai Creek Harbour',
),
- ExpansionTile(
- title: Text(
- 'Dubai Hills Estate',
- style: TextStyle(
- color: Colors.black87,
- fontWeight: FontWeight.w500,
- ),
- ),
+ CustomExpansionTile(
+ title: 'Dubai Hills Estate',
children: [
- ListTile(
- title: Text(
- 'South Side',
- style: TextStyle(
- color: Colors
- .black54, // Lighter text for nested
- ),
- ),
- ),
+ CustomExpansionTile(
+ title: 'South Side',
+ initiallyExpanded: false),
],
),
],
@@ -186,11 +186,11 @@ class SpaceManagementPageState extends State {
// Right Side: Community Structure Area
Expanded(
child: Container(
- decoration: BoxDecoration(
+ decoration: const BoxDecoration(
color: ColorsManager.whiteColors,
border: Border(
left: BorderSide(
- color: Colors.white!,
+ color: Colors.white,
width: 1.0), // Light left border to match
),
),
@@ -199,7 +199,8 @@ class SpaceManagementPageState extends State {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
- padding: const EdgeInsets.all(16.0),
+ padding:
+ const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 27.0),
width: double.infinity,
decoration: BoxDecoration(
color: ColorsManager.whiteColors,
@@ -273,15 +274,15 @@ class SpaceManagementPageState extends State {
Positioned(
top: 0,
bottom: 0,
- left: 250, // Align with the sidebar's width
- width: 6, // Width of the gradient border
+ left: 300, // Align with the sidebar's width
+ width: 8, // Width of the gradient border
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
- Color(0x3F000000).withOpacity(0.2), // Light gray
+ Color(0x3F000000).withOpacity(0.1), // Light gray
Colors.transparent, // Transparent fade
],
),
diff --git a/lib/utils/color_manager.dart b/lib/utils/color_manager.dart
index b62889d0..8f42e606 100644
--- a/lib/utils/color_manager.dart
+++ b/lib/utils/color_manager.dart
@@ -18,6 +18,7 @@ abstract class ColorsManager {
static const Color greyColor = Color(0xFFd5d5d5);
static const Color lightGreyColor = Color(0xFF999999);
static const Color backgroundColor = Color(0xFFececec);
+ static const Color textFieldGreyColor = Color(0xFFF4F4F4);
static const Color dozeColor = Color(0xFFFEC258);
static const Color relaxColor = Color(0xFFFBD288);
static const Color readingColor = Color(0xFFF7D69C);
@@ -31,6 +32,8 @@ abstract class ColorsManager {
static const Color grayColor = Color(0xFF999999);
static const Color red = Color(0xFFFF0000);
static const Color graysColor = Color(0xffEBEBEB);
+ static const Color lightGrayColor = Color(0xB2999999);
+ static const Color grayBorder = Color(0xFFCFCFCF);
static const Color textGray = Color(0xffD5D5D5);
static const Color btnColor = Color(0xFF00008B);
static const Color blueColor = Color(0xFF0036E6);
@@ -42,5 +45,6 @@ abstract class ColorsManager {
static const Color blue4 = Color(0xFF001E7E);
static const Color textGreen = Color(0xFF008905);
static const Color yaGreen = Color(0xFFFFBF44);
+ static const Color checkBoxFillColor = Color(0xFFF3F3F3);
}
//0036E6
\ No newline at end of file
diff --git a/lib/utils/constants/assets.dart b/lib/utils/constants/assets.dart
index 34b685d3..7c01ddb4 100644
--- a/lib/utils/constants/assets.dart
+++ b/lib/utils/constants/assets.dart
@@ -159,4 +159,7 @@ class Assets {
static const String unit = 'assets/icons/unit_icon.svg';
static const String villa = 'assets/icons/villa_icon.svg';
static const String iconEdit = 'assets/icons/icon_edit_icon.svg';
+ static const String textFieldSearch =
+ 'assets/icons/textfield_search_icon.svg';
+ static const String roundedAddIcon = 'assets/icons/rounded_add_icon.svg';
}