changed ui for community list and view list

This commit is contained in:
hannathkadher
2024-09-10 21:22:43 +04:00
parent 7e6b0f33c8
commit b362029424
6 changed files with 199 additions and 79 deletions

View File

@ -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<SpaceManagementPage> {
),
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<SpaceManagementPage> {
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<SpaceManagementPage> {
// 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<SpaceManagementPage> {
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<SpaceManagementPage> {
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
],
),