mirror of
https://github.com/SyncrowIOT/web.git
synced 2025-07-15 17:47:53 +00:00
fixed border of the sidepanel
This commit is contained in:
hannathkadher
@ -19,45 +19,278 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
|
|||||||
Size screenSize = MediaQuery.of(context).size;
|
Size screenSize = MediaQuery.of(context).size;
|
||||||
|
|
||||||
return Scaffold(
|
return Scaffold(
|
||||||
backgroundColor: ColorsManager.whiteColors,
|
backgroundColor: ColorsManager.whiteColors,
|
||||||
appBar: AppBar(
|
appBar: AppBar(
|
||||||
title: const Text('Space Management'),
|
title: const Text('Space Management'),
|
||||||
),
|
),
|
||||||
body: InteractiveViewer(
|
body: Stack(
|
||||||
boundaryMargin: const EdgeInsets.all(
|
clipBehavior: Clip.none,
|
||||||
double.infinity), // Allow panning to any side
|
|
||||||
minScale: 0.5, // Minimum zoom scale
|
children: [
|
||||||
maxScale: 2.5, // Maximum zoom scale
|
Row(
|
||||||
panEnabled: true, // Enable panning (move left/right)
|
children: [
|
||||||
scaleEnabled: true, // Enable zooming
|
// Sidebar for navigation and community list
|
||||||
child: MouseRegion(
|
Container(
|
||||||
cursor: SystemMouseCursors.grab,
|
width: 250, // Fixed width for sidebar
|
||||||
child: Stack(
|
decoration: BoxDecoration(
|
||||||
children: [
|
color: Colors.white, // No gradient inside
|
||||||
// Draw lines using a CustomPaint widget
|
),
|
||||||
CustomPaint(
|
|
||||||
size: Size.infinite,
|
child: Column(
|
||||||
painter: CurvedLinePainter(connections),
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
),
|
children: [
|
||||||
Center(
|
// "Communities" title with the add button
|
||||||
child: spaces.isEmpty
|
Container(
|
||||||
? AddSpaceButton(
|
decoration: BoxDecoration(
|
||||||
onTap: () {
|
color: Colors.white, // Background color
|
||||||
_showCreateSpaceDialog(screenSize);
|
|
||||||
},
|
boxShadow: [
|
||||||
)
|
BoxShadow(
|
||||||
: Stack(
|
color: Colors.black.withOpacity(0.1),
|
||||||
children: spaces
|
blurRadius: 10,
|
||||||
.asMap()
|
spreadRadius: 1,
|
||||||
.entries
|
offset: Offset(0, 2), // Adjust the shadow position
|
||||||
.map((entry) =>
|
|
||||||
_buildSpaceCard(entry.key, screenSize))
|
|
||||||
.toList(),
|
|
||||||
),
|
),
|
||||||
),
|
],
|
||||||
],
|
),
|
||||||
|
padding: const EdgeInsets.all(
|
||||||
|
16.0), // Apply padding inside the container
|
||||||
|
child: Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||||
|
children: [
|
||||||
|
Text(
|
||||||
|
'Communities',
|
||||||
|
style: TextStyle(
|
||||||
|
fontSize: 22,
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
// Plus Button (+)
|
||||||
|
GestureDetector(
|
||||||
|
onTap: () {
|
||||||
|
// Handle the button tap action
|
||||||
|
},
|
||||||
|
child: Container(
|
||||||
|
width: 30,
|
||||||
|
height: 30,
|
||||||
|
decoration: 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),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
// Search bar
|
||||||
|
SizedBox(height: 16),
|
||||||
|
Container(
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
boxShadow: [
|
||||||
|
BoxShadow(
|
||||||
|
color: Colors.black.withOpacity(0.1),
|
||||||
|
blurRadius: 10,
|
||||||
|
spreadRadius: 1,
|
||||||
|
offset: Offset(0, 2), // Slight shadow offset
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
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
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
child: TextField(
|
||||||
|
decoration: InputDecoration(
|
||||||
|
hintText: 'Search',
|
||||||
|
prefixIcon:
|
||||||
|
Icon(Icons.search, color: Colors.grey),
|
||||||
|
border: InputBorder.none, // No visible border
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
SizedBox(height: 16),
|
||||||
|
// Example of community list
|
||||||
|
Expanded(
|
||||||
|
child: ListView(
|
||||||
|
children: [
|
||||||
|
ListTile(
|
||||||
|
title: Text(
|
||||||
|
'Downtown Dubai',
|
||||||
|
style: TextStyle(
|
||||||
|
color: Colors.black87,
|
||||||
|
fontWeight: FontWeight.w500,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
ListTile(
|
||||||
|
title: Text(
|
||||||
|
'Dubai Creek Harbour',
|
||||||
|
style: TextStyle(
|
||||||
|
color: Colors.black87,
|
||||||
|
fontWeight: FontWeight.w500,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
ExpansionTile(
|
||||||
|
title: Text(
|
||||||
|
'Dubai Hills Estate',
|
||||||
|
style: TextStyle(
|
||||||
|
color: Colors.black87,
|
||||||
|
fontWeight: FontWeight.w500,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
children: [
|
||||||
|
ListTile(
|
||||||
|
title: Text(
|
||||||
|
'South Side',
|
||||||
|
style: TextStyle(
|
||||||
|
color: Colors
|
||||||
|
.black54, // Lighter text for nested
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
),
|
),
|
||||||
)));
|
|
||||||
|
// Right Side: Community Structure Area
|
||||||
|
Expanded(
|
||||||
|
child: Container(
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: ColorsManager.whiteColors,
|
||||||
|
border: Border(
|
||||||
|
left: BorderSide(
|
||||||
|
color: Colors.white!,
|
||||||
|
width: 1.0), // Light left border to match
|
||||||
|
),
|
||||||
|
),
|
||||||
|
// Background color for canvas
|
||||||
|
child: Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: [
|
||||||
|
Container(
|
||||||
|
padding: const EdgeInsets.all(16.0),
|
||||||
|
width: double.infinity,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: ColorsManager.whiteColors,
|
||||||
|
boxShadow: [
|
||||||
|
BoxShadow(
|
||||||
|
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: Text(
|
||||||
|
'Community Structure',
|
||||||
|
style: TextStyle(
|
||||||
|
fontSize: 24,
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
// Use Expanded to ensure InteractiveViewer takes the available space
|
||||||
|
Expanded(
|
||||||
|
child: InteractiveViewer(
|
||||||
|
boundaryMargin:
|
||||||
|
const EdgeInsets.all(500), // Adjusted to 500
|
||||||
|
minScale: 0.5, // Minimum zoom scale
|
||||||
|
maxScale: 2.5, // Maximum zoom scale
|
||||||
|
panEnabled: true, // Enable panning
|
||||||
|
scaleEnabled: true, // Enable zooming
|
||||||
|
child: Container(
|
||||||
|
width: 2000, // Large canvas
|
||||||
|
height: 2000, // Large canvas
|
||||||
|
color: Colors.transparent, // Transparent background
|
||||||
|
child: Stack(
|
||||||
|
clipBehavior: Clip.none,
|
||||||
|
children: [
|
||||||
|
// Draw lines using a CustomPaint widget
|
||||||
|
CustomPaint(
|
||||||
|
size:
|
||||||
|
Size(2000, 2000), // Explicit canvas size
|
||||||
|
painter: CurvedLinePainter(connections),
|
||||||
|
),
|
||||||
|
Center(
|
||||||
|
child: spaces.isEmpty
|
||||||
|
? AddSpaceButton(
|
||||||
|
onTap: () {
|
||||||
|
_showCreateSpaceDialog(screenSize);
|
||||||
|
},
|
||||||
|
)
|
||||||
|
: Stack(
|
||||||
|
children: spaces
|
||||||
|
.asMap()
|
||||||
|
.entries
|
||||||
|
.map((entry) => _buildSpaceCard(
|
||||||
|
entry.key, screenSize))
|
||||||
|
.toList(),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
Positioned(
|
||||||
|
top: 0,
|
||||||
|
bottom: 0,
|
||||||
|
left: 250, // Align with the sidebar's width
|
||||||
|
width: 6, // 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
|
||||||
|
Colors.transparent, // Transparent fade
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Function to open the Create Space dialog
|
// Function to open the Create Space dialog
|
||||||
@ -272,13 +505,23 @@ class CurvedLinePainter extends CustomPainter {
|
|||||||
..strokeWidth = 2
|
..strokeWidth = 2
|
||||||
..style = PaintingStyle.stroke;
|
..style = PaintingStyle.stroke;
|
||||||
|
|
||||||
|
// Ensure connections exist before painting
|
||||||
|
if (connections.isEmpty) {
|
||||||
|
return; // Nothing to paint if there are no connections
|
||||||
|
}
|
||||||
|
|
||||||
for (var connection in connections) {
|
for (var connection in connections) {
|
||||||
|
// Ensure positions are valid before drawing lines
|
||||||
|
if (connection.startSpace.position == null ||
|
||||||
|
connection.endSpace.position == null) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
Offset start = connection.startSpace.position +
|
Offset start = connection.startSpace.position +
|
||||||
Offset(75, 60); // Center bottom of start space
|
Offset(75, 60); // Center bottom of start space
|
||||||
Offset end = connection.endSpace.position +
|
Offset end = connection.endSpace.position +
|
||||||
Offset(75, 0); // Center top of end space
|
Offset(75, 0); // Center top of end space
|
||||||
|
|
||||||
// Draw straight line for left/right connections and curved line for down connections
|
|
||||||
if (connection.direction == 'down') {
|
if (connection.direction == 'down') {
|
||||||
// Curved line for down connections
|
// Curved line for down connections
|
||||||
final controlPoint = Offset((start.dx + end.dx) / 2, start.dy + 50);
|
final controlPoint = Offset((start.dx + end.dx) / 2, start.dy + 50);
|
||||||
@ -286,32 +529,16 @@ class CurvedLinePainter extends CustomPainter {
|
|||||||
..moveTo(start.dx, start.dy)
|
..moveTo(start.dx, start.dy)
|
||||||
..quadraticBezierTo(controlPoint.dx, controlPoint.dy, end.dx, end.dy);
|
..quadraticBezierTo(controlPoint.dx, controlPoint.dy, end.dx, end.dy);
|
||||||
canvas.drawPath(path, paint);
|
canvas.drawPath(path, paint);
|
||||||
}
|
} else if (connection.direction == 'right') {
|
||||||
if (connection.direction == 'right') {
|
// Straight line for right connections
|
||||||
start = Offset(
|
|
||||||
connection.startSpace.position.dx + 150,
|
|
||||||
connection.startSpace.position.dy +
|
|
||||||
30); // Right center of the first space
|
|
||||||
end = Offset(
|
|
||||||
connection.endSpace.position.dx,
|
|
||||||
connection.endSpace.position.dy +
|
|
||||||
30); // Left center of the new space
|
|
||||||
canvas.drawLine(start, end, paint);
|
canvas.drawLine(start, end, paint);
|
||||||
} else if (connection.direction == 'left') {
|
} else if (connection.direction == 'left') {
|
||||||
// Straight line for left/right connections
|
// Straight line for left connections
|
||||||
start = Offset(
|
|
||||||
connection.startSpace.position.dx,
|
|
||||||
connection.startSpace.position.dy +
|
|
||||||
30); // Left center of the first space
|
|
||||||
end = Offset(
|
|
||||||
connection.endSpace.position.dx + 150,
|
|
||||||
connection.endSpace.position.dy +
|
|
||||||
30); // Right center of the new space
|
|
||||||
canvas.drawLine(start, end, paint);
|
canvas.drawLine(start, end, paint);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Draw small connection dots at the start and end points
|
// Draw small connection dots at the start and end points
|
||||||
final dotPaint = Paint()..color = ColorsManager.blackColor;
|
final dotPaint = Paint()..color = Colors.black;
|
||||||
canvas.drawCircle(start, 5, dotPaint); // Start dot
|
canvas.drawCircle(start, 5, dotPaint); // Start dot
|
||||||
canvas.drawCircle(end, 5, dotPaint); // End dot
|
canvas.drawCircle(end, 5, dotPaint); // End dot
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user