From 12df07e681ad3aa6a480f058c9b58c856c370912 Mon Sep 17 00:00:00 2001 From: hannathkadher Date: Tue, 14 Jan 2025 12:14:48 +0400 Subject: [PATCH] changed chip to list --- .../view/link_space_model_dialog.dart | 2 +- .../space_model/view/space_model_page.dart | 2 +- .../widgets/dynamic_product_widget.dart | 66 +++++++++ .../widgets/dynamic_room_widget.dart | 58 ++++++++ .../widgets/ellipsis_item_widget.dart | 25 ++++ .../widgets/flexible_item_widget.dart | 44 ++++++ .../space_model/widgets/room_name_widget.dart | 27 ++++ .../widgets/space_model_card_widget.dart | 127 +++++++----------- .../widgets/subspace_chip_widget.dart | 30 +++-- 9 files changed, 288 insertions(+), 93 deletions(-) create mode 100644 lib/pages/spaces_management/space_model/widgets/dynamic_product_widget.dart create mode 100644 lib/pages/spaces_management/space_model/widgets/dynamic_room_widget.dart create mode 100644 lib/pages/spaces_management/space_model/widgets/ellipsis_item_widget.dart create mode 100644 lib/pages/spaces_management/space_model/widgets/flexible_item_widget.dart create mode 100644 lib/pages/spaces_management/space_model/widgets/room_name_widget.dart diff --git a/lib/pages/spaces_management/link_space_model/view/link_space_model_dialog.dart b/lib/pages/spaces_management/link_space_model/view/link_space_model_dialog.dart index 2ab969df..69023857 100644 --- a/lib/pages/spaces_management/link_space_model/view/link_space_model_dialog.dart +++ b/lib/pages/spaces_management/link_space_model/view/link_space_model_dialog.dart @@ -72,7 +72,7 @@ class LinkSpaceModelDialog extends StatelessWidget { ), borderRadius: BorderRadius.circular(8.0), ), - child: SpaceModelCardWidget(model: model), + child: SpaceModelCardWidget(model: model,), ), ); }, diff --git a/lib/pages/spaces_management/space_model/view/space_model_page.dart b/lib/pages/spaces_management/space_model/view/space_model_page.dart index a76543ae..eab43e08 100644 --- a/lib/pages/spaces_management/space_model/view/space_model_page.dart +++ b/lib/pages/spaces_management/space_model/view/space_model_page.dart @@ -69,7 +69,7 @@ class SpaceModelPage extends StatelessWidget { final model = spaceModels[index]; return Container( margin: const EdgeInsets.all(8.0), - child: SpaceModelCardWidget(model: model), + child: SpaceModelCardWidget(model:model), ); }, ), diff --git a/lib/pages/spaces_management/space_model/widgets/dynamic_product_widget.dart b/lib/pages/spaces_management/space_model/widgets/dynamic_product_widget.dart new file mode 100644 index 00000000..4f42e3bf --- /dev/null +++ b/lib/pages/spaces_management/space_model/widgets/dynamic_product_widget.dart @@ -0,0 +1,66 @@ +import 'package:flutter/material.dart'; +import 'package:syncrow_web/pages/spaces_management/space_model/widgets/ellipsis_item_widget.dart'; +import 'package:syncrow_web/pages/spaces_management/space_model/widgets/flexible_item_widget.dart'; + +import 'package:syncrow_web/utils/color_manager.dart'; + +class DynamicProductWidget extends StatelessWidget { + final Map productTagCount; + final double maxWidth; + final double maxHeight; + + const DynamicProductWidget({ + Key? key, + required this.productTagCount, + required this.maxWidth, + required this.maxHeight, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + const double itemSpacing = 8.0; + const double lineSpacing = 8.0; + const double textPadding = 16.0; + const double itemHeight = 40.0; + + List productWidgets = []; + double currentLineWidth = 0.0; + double currentHeight = itemHeight; + + for (final product in productTagCount.entries) { + final String prodType = product.key; + final int count = product.value; + + final TextPainter textPainter = TextPainter( + text: TextSpan( + text: 'x$count', + style: Theme.of(context) + .textTheme + .bodySmall + ?.copyWith(color: ColorsManager.spaceColor), + ), + textDirection: TextDirection.ltr, + )..layout(); + + final double itemWidth = textPainter.width + textPadding + 20; + + if (currentLineWidth + itemWidth + itemSpacing > maxWidth) { + currentHeight += itemHeight + lineSpacing; + if (currentHeight > maxHeight) { + productWidgets.add(const EllipsisItemWidget()); + break; + } + currentLineWidth = 0.0; + } + + productWidgets.add(FlexibleItemWidget(prodType: prodType, count: count)); + currentLineWidth += itemWidth + itemSpacing; + } + + return Wrap( + spacing: itemSpacing, + runSpacing: lineSpacing, + children: productWidgets, + ); + } +} diff --git a/lib/pages/spaces_management/space_model/widgets/dynamic_room_widget.dart b/lib/pages/spaces_management/space_model/widgets/dynamic_room_widget.dart new file mode 100644 index 00000000..e24c7704 --- /dev/null +++ b/lib/pages/spaces_management/space_model/widgets/dynamic_room_widget.dart @@ -0,0 +1,58 @@ +import 'package:flutter/material.dart'; +import 'package:syncrow_web/pages/spaces_management/space_model/models/subspace_template_model.dart'; +import 'package:syncrow_web/pages/spaces_management/space_model/widgets/room_name_widget.dart'; + +class DynamicRoomWidget extends StatelessWidget { + final List? subspaceModels; + final double maxWidth; + final double maxHeight; + + const DynamicRoomWidget({ + Key? key, + required this.subspaceModels, + required this.maxWidth, + required this.maxHeight, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + const double itemSpacing = 8.0; + const double lineSpacing = 8.0; + const double textPadding = 16.0; + const double itemHeight = 30.0; + + List roomWidgets = []; + double currentLineWidth = 0.0; + double currentHeight = itemHeight; + + for (final subspace in subspaceModels!) { + final TextPainter textPainter = TextPainter( + text: TextSpan( + text: subspace.subspaceName, + style: const TextStyle(fontSize: 16), + ), + textDirection: TextDirection.ltr, + )..layout(); + + final double itemWidth = textPainter.width + textPadding; + + if (currentLineWidth + itemWidth + itemSpacing > maxWidth) { + currentHeight += itemHeight + lineSpacing; + if (currentHeight > maxHeight) { + roomWidgets.add(const RoomNameWidget(name: "...")); + break; + } + currentLineWidth = 0.0; + } + + roomWidgets.add(RoomNameWidget(name: subspace.subspaceName)); + currentLineWidth += itemWidth + itemSpacing; + } + + return Wrap( + spacing: itemSpacing, + runSpacing: lineSpacing, + children: roomWidgets, + ); + } +} diff --git a/lib/pages/spaces_management/space_model/widgets/ellipsis_item_widget.dart b/lib/pages/spaces_management/space_model/widgets/ellipsis_item_widget.dart new file mode 100644 index 00000000..7ede09a7 --- /dev/null +++ b/lib/pages/spaces_management/space_model/widgets/ellipsis_item_widget.dart @@ -0,0 +1,25 @@ +import 'package:flutter/material.dart'; +import 'package:syncrow_web/utils/color_manager.dart'; + +class EllipsisItemWidget extends StatelessWidget { + const EllipsisItemWidget({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Container( + padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0), + decoration: BoxDecoration( + color: ColorsManager.textFieldGreyColor, + borderRadius: BorderRadius.circular(8), + border: Border.all(color: ColorsManager.transparentColor), + ), + child: Text( + "...", + style: Theme.of(context) + .textTheme + .bodySmall + ?.copyWith(color: ColorsManager.spaceColor), + ), + ); + } +} diff --git a/lib/pages/spaces_management/space_model/widgets/flexible_item_widget.dart b/lib/pages/spaces_management/space_model/widgets/flexible_item_widget.dart new file mode 100644 index 00000000..c28a82b8 --- /dev/null +++ b/lib/pages/spaces_management/space_model/widgets/flexible_item_widget.dart @@ -0,0 +1,44 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; +import 'package:syncrow_web/utils/color_manager.dart'; + +class FlexibleItemWidget extends StatelessWidget { + final String prodType; + final int count; + + const FlexibleItemWidget({ + Key? key, + required this.prodType, + required this.count, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return Container( + padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0), + decoration: BoxDecoration( + color: ColorsManager.textFieldGreyColor, + borderRadius: BorderRadius.circular(8), + border: Border.all(color: ColorsManager.transparentColor), + ), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + SvgPicture.asset( + prodType, + width: 15, + height: 16, + ), + const SizedBox(width: 4), + Text( + 'x$count', + style: Theme.of(context) + .textTheme + .bodySmall + ?.copyWith(color: ColorsManager.spaceColor), + ), + ], + ), + ); + } +} diff --git a/lib/pages/spaces_management/space_model/widgets/room_name_widget.dart b/lib/pages/spaces_management/space_model/widgets/room_name_widget.dart new file mode 100644 index 00000000..d59f8c1e --- /dev/null +++ b/lib/pages/spaces_management/space_model/widgets/room_name_widget.dart @@ -0,0 +1,27 @@ +import 'package:flutter/material.dart'; +import 'package:syncrow_web/utils/color_manager.dart'; + +class RoomNameWidget extends StatelessWidget { + final String name; + + const RoomNameWidget({Key? key, required this.name}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Container( + padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0), + decoration: BoxDecoration( + color: ColorsManager.textFieldGreyColor, + borderRadius: BorderRadius.circular(8), + border: Border.all(color: ColorsManager.transparentColor), + ), + child: Text( + name, + style: Theme.of(context) + .textTheme + .bodySmall + ?.copyWith(color: ColorsManager.spaceColor), + ), + ); + } +} diff --git a/lib/pages/spaces_management/space_model/widgets/space_model_card_widget.dart b/lib/pages/spaces_management/space_model/widgets/space_model_card_widget.dart index 4471743b..ac8b49d0 100644 --- a/lib/pages/spaces_management/space_model/widgets/space_model_card_widget.dart +++ b/lib/pages/spaces_management/space_model/widgets/space_model_card_widget.dart @@ -1,7 +1,8 @@ import 'package:flutter/material.dart'; -import 'package:flutter_svg/svg.dart'; import 'package:syncrow_web/pages/spaces_management/space_model/models/space_template_model.dart'; -import 'package:syncrow_web/pages/spaces_management/space_model/widgets/subspace_chip_widget.dart'; +import 'package:syncrow_web/pages/spaces_management/space_model/widgets/dynamic_product_widget.dart'; +import 'package:syncrow_web/pages/spaces_management/space_model/widgets/dynamic_room_widget.dart'; +import 'package:syncrow_web/pages/spaces_management/space_model/widgets/room_name_widget.dart'; import 'package:syncrow_web/utils/color_manager.dart'; class SpaceModelCardWidget extends StatelessWidget { @@ -32,111 +33,81 @@ class SpaceModelCardWidget extends StatelessWidget { } return Container( + padding: const EdgeInsets.all(16.0), decoration: BoxDecoration( - color: ColorsManager.whiteColors, + color: Colors.white, borderRadius: BorderRadius.circular(10), boxShadow: [ BoxShadow( - color: ColorsManager.lightGrayColor.withOpacity(0.5), + color: Colors.grey.withOpacity(0.5), spreadRadius: 2, blurRadius: 5, offset: const Offset(0, 3), ), ], ), - padding: const EdgeInsets.fromLTRB(16.0, 14.0, 8.0, 8.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - Flexible( - child: Text( - model.modelName, - style: Theme.of(context).textTheme.headlineMedium?.copyWith( - color: ColorsManager.blackColor, - fontWeight: FontWeight.bold, - ), - maxLines: 1, - overflow: TextOverflow.ellipsis, - ), + Text( + model.modelName, + style: Theme.of(context).textTheme.headlineMedium?.copyWith( + color: Colors.black, + fontWeight: FontWeight.bold, + ), + maxLines: 1, + overflow: TextOverflow.ellipsis, ), const SizedBox(height: 10), Expanded( child: Row( - crossAxisAlignment: CrossAxisAlignment.start, children: [ + // Left Container Expanded( - child: Wrap( - spacing: 3.0, - runSpacing: 3.0, - children: [ - for (var subspace in model.subspaceModels! - .take(calculateTakeCount(context))) - SubspaceChipWidget(subspace: subspace.subspaceName), - ], + flex: 1, // Distribute space proportionally + child: Container( + padding: const EdgeInsets.all(8.0), + child: LayoutBuilder( + builder: (context, constraints) { + return Align( + alignment: Alignment.topLeft, + child: DynamicRoomWidget( + subspaceModels: model.subspaceModels, + maxWidth: constraints.maxWidth, + maxHeight: constraints.maxHeight, + ), + ); + }, + ), ), ), - if (productTagCount.isNotEmpty) - Container( - width: 1, - height: double.infinity, - color: ColorsManager.softGray, - margin: const EdgeInsets.symmetric(horizontal: 4.0), - ), - const SizedBox(width: 7), + Container( + width: 1.0, // Thickness of the line + color: ColorsManager.softGray, // Subtle grey color + margin: const EdgeInsets.symmetric( + vertical: 6.0), // Top and bottom spacing + ), // Right Container Expanded( - child: Wrap( - spacing: 4.0, - runSpacing: 4.0, - children: productTagCount.entries.map((entry) { - final prodType = entry.key; - final count = entry.value; - - return Chip( - label: Row( - mainAxisSize: MainAxisSize.min, - children: [ - SvgPicture.asset( - prodType, - width: 15, - height: 16, - ), - const SizedBox(width: 4), - Text( - 'x$count', // Product count - style: const TextStyle(fontSize: 12), - ), - ], - ), - backgroundColor: ColorsManager.textFieldGreyColor, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(8), - side: const BorderSide( - color: ColorsManager.transparentColor, - width: 0, - ), - ), - ); - }).toList(), + flex: 1, // Distribute space proportionally + child: Container( + padding: const EdgeInsets.all(8.0), + child: LayoutBuilder( + builder: (context, constraints) { + return Align( + alignment: Alignment.topLeft, + child: DynamicProductWidget( + productTagCount: productTagCount, + maxWidth: constraints.maxWidth, + maxHeight: constraints.maxHeight)); + }, + ), ), ), ], ), ), - const SizedBox(height: 5), ], ), ); } - - int calculateTakeCount(BuildContext context) { - double screenWidth = MediaQuery.of(context).size.width; - // Adjust the count based on the screen width - if (screenWidth > 1500) { - return 3; // For large screens - } else if (screenWidth > 1200) { - return 2; - } else { - return 1; // For smaller screens - } - } } diff --git a/lib/pages/spaces_management/space_model/widgets/subspace_chip_widget.dart b/lib/pages/spaces_management/space_model/widgets/subspace_chip_widget.dart index 517448c8..8f987c51 100644 --- a/lib/pages/spaces_management/space_model/widgets/subspace_chip_widget.dart +++ b/lib/pages/spaces_management/space_model/widgets/subspace_chip_widget.dart @@ -1,6 +1,9 @@ import 'package:flutter/material.dart'; import 'package:syncrow_web/utils/color_manager.dart'; +import 'package:flutter/material.dart'; +import 'package:syncrow_web/utils/color_manager.dart'; + class SubspaceChipWidget extends StatelessWidget { final String subspace; @@ -11,24 +14,25 @@ class SubspaceChipWidget extends StatelessWidget { @override Widget build(BuildContext context) { - return Chip( - label: Text( - subspace, - overflow: TextOverflow.ellipsis, - maxLines: 1, - ), - backgroundColor: ColorsManager.textFieldGreyColor, - labelStyle: Theme.of(context) - .textTheme - .bodySmall - ?.copyWith(color: ColorsManager.spaceColor), - shape: RoundedRectangleBorder( + return Container( + padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6), + decoration: BoxDecoration( + color: ColorsManager.textFieldGreyColor, borderRadius: BorderRadius.circular(8), - side: const BorderSide( + border: Border.all( color: ColorsManager.transparentColor, width: 0, ), ), + child: Text( + subspace, + overflow: TextOverflow.ellipsis, + maxLines: 1, + style: Theme.of(context) + .textTheme + .bodySmall + ?.copyWith(color: ColorsManager.spaceColor), + ), ); } }