Merge pull request #143 from SyncrowIOT/SP-1189-Rework-Add-Button-Not-clickable-Opening-Pop-up-in-Community-Screen

Sp 1189 rework add button not clickable opening pop up in community screen

lib/pages/routines/widgets/dialog_footer.dart

@@ -8,12 +8,12 @@ class DialogFooter extends StatelessWidget {
   final int? dialogWidth;
 
   const DialogFooter({
-    Key? key,
+    super.key,
     required this.onCancel,
     required this.onConfirm,
     required this.isConfirmEnabled,
     this.dialogWidth,
-  }) : super(key: key);
+  });
 
   @override
   Widget build(BuildContext context) {
@@ -28,21 +28,19 @@ class DialogFooter extends StatelessWidget {
       child: Row(
         mainAxisAlignment: MainAxisAlignment.spaceEvenly,
         children: [
-          Expanded(
+          _buildFooterButton(
-            child: _buildFooterButton(
+            context: context,
-              context,
+            text: 'Cancel',
-              'Cancel',
+            onTap: onCancel,
-              onCancel,
-            ),
           ),
           if (isConfirmEnabled) ...[
             Container(width: 1, height: 50, color: ColorsManager.greyColor),
-            Expanded(
+            _buildFooterButton(
-              child: _buildFooterButton(
+              context: context,
-                context,
+              text: 'Confirm',
-                'Confirm',
+              onTap: onConfirm,
-                onConfirm,
+              textColor:
-              ),
+                  isConfirmEnabled ? ColorsManager.primaryColorWithOpacity : Colors.red,
             ),
           ],
         ],
@@ -50,24 +48,24 @@ class DialogFooter extends StatelessWidget {
     );
   }
 
-  Widget _buildFooterButton(
+  Widget _buildFooterButton({
-    BuildContext context,
+    required BuildContext context,
-    String text,
+    required String text,
-    VoidCallback? onTap,
+    required VoidCallback? onTap,
-  ) {
+    Color? textColor,
-    return GestureDetector(
+  }) {
-      onTap: onTap,
+    return Expanded(
-      child: SizedBox(
+      child: TextButton(
-        height: 50,
+        style: TextButton.styleFrom(
-        child: Center(
+          foregroundColor: ColorsManager.primaryColorWithOpacity,
-          child: Text(
+          disabledForegroundColor: ColorsManager.primaryColor,
-            text,
+        ),
-            style: Theme.of(context).textTheme.bodyMedium!.copyWith(
+        onPressed: onTap,
-                  color: text == 'Confirm'
+        child: Text(
-                      ? ColorsManager.primaryColorWithOpacity
+          text,
-                      : ColorsManager.textGray,
+          style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                ),
+                color: textColor ?? ColorsManager.textGray,
-          ),
+              ),
         ),
       ),
     );

lib/pages/spaces_management/all_spaces/widgets/loaded_space_widget.dart

@@ -2,6 +2,8 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
 import 'package:syncrow_web/pages/space_tree/view/space_tree_view.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/bloc/space_management_bloc.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/bloc/space_management_event.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/model/community_model.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/model/product_model.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/model/space_model.dart';
@@ -107,6 +109,11 @@ class _LoadedSpaceViewState extends State<LoadedSpaceView> {
                     selectedSpaceUuid: widget.selectedSpace?.uuid ??
                         widget.selectedCommunity?.uuid ??
                         '',
+                    onCreateCommunity: (name, description) {
+                      context.read<SpaceManagementBloc>().add(
+                            CreateCommunityEvent(name, description, context),
+                          );
+                    },
                   ),
                   CommunityStructureArea(
                     selectedCommunity: widget.selectedCommunity,

lib/pages/spaces_management/all_spaces/widgets/sidebar_add_community_button.dart

@@ -1,19 +1,15 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_svg/svg.dart';
-import 'package:syncrow_web/pages/spaces_management/all_spaces/bloc/space_management_bloc.dart';
-import 'package:syncrow_web/pages/spaces_management/all_spaces/bloc/space_management_event.dart';
-import 'package:syncrow_web/pages/spaces_management/create_community/view/create_community_dialog.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 
 class SidebarAddCommunityButton extends StatelessWidget {
   const SidebarAddCommunityButton({
-    required this.existingCommunityNames,
+    required this.onTap,
     super.key,
   });
 
-  final List<String> existingCommunityNames;
+  final void Function() onTap;
 
   @override
   Widget build(BuildContext context) {
@@ -30,22 +26,9 @@ class SidebarAddCommunityButton extends StatelessWidget {
             ),
           ),
         ),
-        onPressed: () => _showCreateCommunityDialog(context),
+        onPressed: onTap,
         icon: SvgPicture.asset(Assets.addIcon),
       ),
     );
   }
-
-  void _showCreateCommunityDialog(BuildContext context) => showDialog<void>(
-        context: context,
-        builder: (context) => CreateCommunityDialog(
-          isEditMode: false,
-          existingCommunityNames: existingCommunityNames,
-          onCreateCommunity: (name, description) {
-            context.read<SpaceManagementBloc>().add(
-                  CreateCommunityEvent(name, description, context),
-                );
-          },
-        ),
-      );
 }

lib/pages/spaces_management/all_spaces/widgets/sidebar_header.dart

@@ -5,9 +5,12 @@ import 'package:syncrow_web/utils/extension/build_context_x.dart';
 import 'package:syncrow_web/utils/style.dart';
 
 class SidebarHeader extends StatelessWidget {
-  const SidebarHeader({required this.existingCommunityNames, super.key});
+  const SidebarHeader({
+    required this.onAddCommunity,
+    super.key,
+  });
 
-  final List<String> existingCommunityNames;
+  final void Function() onAddCommunity;
 
   @override
   Widget build(BuildContext context) {
@@ -23,7 +26,9 @@ class SidebarHeader extends StatelessWidget {
               color: ColorsManager.blackColor,
             ),
           ),
-          SidebarAddCommunityButton(existingCommunityNames: existingCommunityNames),
+          SidebarAddCommunityButton(
+            onTap: onAddCommunity,
+          ),
         ],
       ),
     );

lib/pages/spaces_management/all_spaces/widgets/sidebar_widget.dart

@@ -8,6 +8,7 @@ import 'package:syncrow_web/pages/spaces_management/all_spaces/model/space_model
 import 'package:syncrow_web/pages/spaces_management/all_spaces/widgets/community_tile.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/widgets/sidebar_header.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/widgets/space_tile_widget.dart';
+import 'package:syncrow_web/pages/spaces_management/create_community/view/create_community_dialog.dart';
 import 'package:syncrow_web/pages/spaces_management/structure_selector/bloc/center_body_bloc.dart';
 import 'package:syncrow_web/pages/spaces_management/structure_selector/bloc/center_body_event.dart';
 import 'package:syncrow_web/utils/style.dart';
@@ -15,9 +16,11 @@ import 'package:syncrow_web/utils/style.dart';
 class SidebarWidget extends StatefulWidget {
   final List<CommunityModel> communities;
   final String? selectedSpaceUuid;
+  final void Function(String name, String description) onCreateCommunity;
 
   const SidebarWidget({
     required this.communities,
+    required this.onCreateCommunity,
     this.selectedSpaceUuid,
     super.key,
   });
@@ -94,10 +97,7 @@ class _SidebarWidgetState extends State<SidebarWidget> {
         mainAxisSize: MainAxisSize.min,
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          SidebarHeader(
+          SidebarHeader(onAddCommunity: _onAddCommunity),
-            existingCommunityNames:
-                widget.communities.map((community) => community.name).toList(),
-          ),
           CustomSearchBar(
             onSearchChanged: (query) => setState(() => _searchQuery = query),
           ),
@@ -179,4 +179,26 @@ class _SidebarWidgetState extends State<SidebarWidget> {
       ),
     );
   }
+
+  void _onAddCommunity() => _selectedId?.isNotEmpty ?? true
+      ? _clearSelection()
+      : _showCreateCommunityDialog();
+
+  void _clearSelection() {
+    setState(() => _selectedId = '');
+    context.read<SpaceManagementBloc>().add(
+          NewCommunityEvent(communities: widget.communities),
+        );
+  }
+
+  void _showCreateCommunityDialog() {
+    showDialog<void>(
+      context: context,
+      builder: (context) => CreateCommunityDialog(
+        isEditMode: false,
+        existingCommunityNames: widget.communities.map((e) => e.name).toList(),
+        onCreateCommunity: widget.onCreateCommunity,
+      ),
+    );
+  }
 }

lib/pages/spaces_management/create_subspace_model/views/create_subspace_model_dialog.dart

@@ -1,12 +1,13 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:syncrow_web/pages/common/buttons/cancel_button.dart';
-import 'package:syncrow_web/pages/common/buttons/default_button.dart';
 import 'package:syncrow_web/pages/spaces_management/create_subspace_model/bloc/subspace_model_bloc.dart';
 import 'package:syncrow_web/pages/spaces_management/create_subspace_model/bloc/subspace_model_event.dart';
 import 'package:syncrow_web/pages/spaces_management/create_subspace_model/bloc/subspace_model_state.dart';
+import 'package:syncrow_web/pages/spaces_management/create_subspace_model/widgets/create_subspace_model_chips_box.dart';
+import 'package:syncrow_web/pages/spaces_management/create_subspace_model/widgets/create_subspace_model_footer_buttons.dart';
 import 'package:syncrow_web/pages/spaces_management/space_model/models/subspace_template_model.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
 class CreateSubSpaceModelDialog extends StatelessWidget {
   final bool isEdit;
@@ -14,211 +15,67 @@ class CreateSubSpaceModelDialog extends StatelessWidget {
   final List<SubspaceTemplateModel>? existingSubSpaces;
   final void Function(List<SubspaceTemplateModel> newSubspaces)? onUpdate;
 
-  const CreateSubSpaceModelDialog(
+  const CreateSubSpaceModelDialog({
-      {Key? key,
+    required this.isEdit,
-      required this.isEdit,
+    required this.dialogTitle,
-      required this.dialogTitle,
+    this.existingSubSpaces,
-      this.existingSubSpaces,
+    this.onUpdate,
-      this.onUpdate})
+    super.key,
-      : super(key: key);
+  });
 
   @override
   Widget build(BuildContext context) {
     final screenWidth = MediaQuery.of(context).size.width;
-    final textController = TextEditingController();
 
     return Dialog(
       shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.circular(20),
       ),
       child: BlocProvider(
-        create: (_) {
+        create: (context) {
           final bloc = SubSpaceModelBloc();
           if (existingSubSpaces != null) {
-            for (var subSpace in existingSubSpaces!) {
+            for (final subSpace in existingSubSpaces ?? []) {
               bloc.add(AddSubSpaceModel(subSpace));
             }
           }
           return bloc;
         },
         child: BlocBuilder<SubSpaceModelBloc, SubSpaceModelState>(
-          builder: (context, state) {
+          builder: (context, state) => Container(
-            return Container(
+            color: ColorsManager.whiteColors,
-                color: ColorsManager.whiteColors,
+            width: screenWidth * 0.3,
-                child: SizedBox(
+            padding: const EdgeInsets.all(16),
-                  width: screenWidth * 0.3,
+            child: Column(
-                  child: Padding(
+              crossAxisAlignment: CrossAxisAlignment.start,
-                    padding: const EdgeInsets.all(16.0),
+              mainAxisSize: MainAxisSize.min,
-                    child: Column(
+              children: [
-                      crossAxisAlignment: CrossAxisAlignment.start,
+                Text(
-                      mainAxisSize: MainAxisSize.min,
+                  dialogTitle,
-                      children: [
+                  style: context.textTheme.headlineLarge?.copyWith(
-                        Text(
+                    color: ColorsManager.blackColor,
-                          dialogTitle,
+                  ),
-                          style: Theme.of(context)
+                ),
-                              .textTheme
+                const SizedBox(height: 16),
-                              .headlineLarge
+                CreateSubspaceModelChipsBox(subSpaces: state.subSpaces),
-                              ?.copyWith(color: ColorsManager.blackColor),
+                if (state.errorMessage.isNotEmpty)
-                        ),
+                  Padding(
-                        const SizedBox(height: 16),
+                    padding: const EdgeInsets.only(bottom: 16),
-                        Container(
+                    child: Text(
-                          width: screenWidth * 0.35,
+                      state.errorMessage,
-                          padding: const EdgeInsets.symmetric(
+                      style: context.textTheme.bodySmall?.copyWith(
-                              vertical: 10.0, horizontal: 16.0),
+                        color: ColorsManager.red,
-                          decoration: BoxDecoration(
+                      ),
-                            color: ColorsManager.boxColor,
-                            borderRadius: BorderRadius.circular(10),
-                          ),
-                          child: Wrap(
-                            spacing: 8.0,
-                            runSpacing: 8.0,
-                            children: [
-                              ...state.subSpaces.asMap().entries.map(
-                                (entry) {
-                                  final index = entry.key;
-                                  final subSpace = entry.value;
-
-                                  final lowerName =
-                                      subSpace.subspaceName.toLowerCase();
-
-                                  final duplicateIndices = state.subSpaces
-                                      .asMap()
-                                      .entries
-                                      .where((e) =>
-                                          e.value.subspaceName.toLowerCase() ==
-                                          lowerName)
-                                      .map((e) => e.key)
-                                      .toList();
-                                  final isDuplicate =
-                                      duplicateIndices.length > 1 &&
-                                          duplicateIndices.indexOf(index) != 0;
-
-                                  return Chip(
-                                    label: Text(subSpace.subspaceName,
-                                        style: Theme.of(context)
-                                            .textTheme
-                                            .bodySmall
-                                            ?.copyWith(
-                                              color: ColorsManager.spaceColor,
-                                            )),
-                                    backgroundColor: ColorsManager.whiteColors,
-                                    shape: RoundedRectangleBorder(
-                                      borderRadius: BorderRadius.circular(10),
-                                      side: BorderSide(
-                                        color: isDuplicate
-                                            ? ColorsManager.red
-                                            : ColorsManager.transparentColor,
-                                        width: 0,
-                                      ),
-                                    ),
-                                    deleteIcon: Container(
-                                      width: 24,
-                                      height: 24,
-                                      decoration: BoxDecoration(
-                                        shape: BoxShape.circle,
-                                        border: Border.all(
-                                          color: ColorsManager.lightGrayColor,
-                                          width: 1.5,
-                                        ),
-                                      ),
-                                      child: const Icon(
-                                        Icons.close,
-                                        size: 16,
-                                        color: ColorsManager.lightGrayColor,
-                                      ),
-                                    ),
-                                    onDeleted: () => context
-                                        .read<SubSpaceModelBloc>()
-                                        .add(RemoveSubSpaceModel(subSpace)),
-                                  );
-                                },
-                              ),
-                              SizedBox(
-                                width: 200,
-                                child: TextField(
-                                    controller: textController,
-                                    decoration: InputDecoration(
-                                        border: InputBorder.none,
-                                        hintText: state.subSpaces.isEmpty
-                                            ? 'Please enter the name'
-                                            : null,
-                                        hintStyle: Theme.of(context)
-                                            .textTheme
-                                            .bodySmall!
-                                            .copyWith(
-                                                color: ColorsManager
-                                                    .lightGrayColor)),
-                                    onSubmitted: (value) {
-                                      if (value.trim().isNotEmpty) {
-                                        context.read<SubSpaceModelBloc>().add(
-                                            AddSubSpaceModel(
-                                                SubspaceTemplateModel(
-                                                    subspaceName: value.trim(),
-                                                    disabled: false)));
-                                        textController.clear();
-                                      }
-                                    },
-                                    style: Theme.of(context)
-                                        .textTheme
-                                        .bodyMedium
-                                        ?.copyWith(
-                                            color: ColorsManager.blackColor)),
-                              ),
-                            ],
-                          ),
-                        ),
-                        if (state.errorMessage.isNotEmpty)
-                          Padding(
-                            padding: const EdgeInsets.only(bottom: 16.0),
-                            child: Text(state.errorMessage,
-                                style: Theme.of(context)
-                                    .textTheme
-                                    .bodySmall
-                                    ?.copyWith(
-                                      color: ColorsManager.red,
-                                    )),
-                          ),
-                        const SizedBox(height: 16),
-                        Row(
-                          children: [
-                            Expanded(
-                              child: CancelButton(
-                                label: 'Cancel',
-                                onPressed: () async {
-                                  Navigator.of(context).pop();
-                                },
-                              ),
-                            ),
-                            const SizedBox(width: 10),
-                            Expanded(
-                              child: DefaultButton(
-                                onPressed: (state.errorMessage.isNotEmpty)
-                                    ? null
-                                    : () async {
-                                        final subSpaces = context
-                                            .read<SubSpaceModelBloc>()
-                                            .state
-                                            .subSpaces;
-                                        Navigator.of(context).pop();
-                                        if (onUpdate != null) {
-                                          onUpdate!(subSpaces);
-                                        }
-                                      },
-                                backgroundColor: ColorsManager.secondaryColor,
-                                borderRadius: 10,
-                                foregroundColor: state.errorMessage.isNotEmpty
-                                    ? ColorsManager.whiteColorsWithOpacity
-                                    : ColorsManager.whiteColors,
-                                child: const Text('OK'),
-                              ),
-                            ),
-                          ],
-                        ),
-                      ],
                     ),
                   ),
-                ));
+                const SizedBox(height: 16),
-          },
+                CreateSubspaceModelFooterButtons(
+                  onUpdate: onUpdate,
+                  errorMessage: state.errorMessage,
+                ),
+              ],
+            ),
+          ),
         ),
       ),
     );

lib/pages/spaces_management/create_subspace_model/widgets/create_subspace_model_chips_box.dart

@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/spaces_management/create_subspace_model/widgets/subspace_chip.dart';
+import 'package:syncrow_web/pages/spaces_management/create_subspace_model/widgets/subspaces_textfield.dart';
+import 'package:syncrow_web/pages/spaces_management/space_model/models/subspace_template_model.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class CreateSubspaceModelChipsBox extends StatelessWidget {
+  const CreateSubspaceModelChipsBox({
+    required this.subSpaces,
+    super.key,
+  });
+
+  final List<SubspaceTemplateModel> subSpaces;
+
+  @override
+  Widget build(BuildContext context) {
+    final screenWidth = MediaQuery.of(context).size.width;
+
+    return Container(
+      width: screenWidth * 0.35,
+      padding: const EdgeInsets.symmetric(
+        vertical: 10,
+        horizontal: 16,
+      ),
+      decoration: BoxDecoration(
+        color: ColorsManager.boxColor,
+        borderRadius: BorderRadius.circular(10),
+      ),
+      child: Wrap(
+        spacing: 8,
+        runSpacing: 8,
+        alignment: WrapAlignment.start,
+        crossAxisAlignment: WrapCrossAlignment.center,
+        children: [
+          ...subSpaces.asMap().entries.map(
+            (entry) {
+              final index = entry.key;
+              final subSpace = entry.value;
+
+              final lowerName = subSpace.subspaceName.toLowerCase();
+
+              final duplicateIndices = subSpaces
+                  .asMap()
+                  .entries
+                  .where((e) => e.value.subspaceName.toLowerCase() == lowerName)
+                  .map((e) => e.key)
+                  .toList();
+              final isDuplicate = duplicateIndices.length > 1 &&
+                  duplicateIndices.indexOf(index) != 0;
+
+              return SubspaceChip(
+                subSpace: subSpace,
+                isDuplicate: isDuplicate,
+              );
+            },
+          ),
+          SubspacesTextfield(
+            hintText: subSpaces.isEmpty ? 'Please enter the name' : null,
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/pages/spaces_management/create_subspace_model/widgets/create_subspace_model_footer_buttons.dart

@@ -0,0 +1,53 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/common/buttons/cancel_button.dart';
+import 'package:syncrow_web/pages/common/buttons/default_button.dart';
+import 'package:syncrow_web/pages/spaces_management/create_subspace_model/bloc/subspace_model_bloc.dart';
+import 'package:syncrow_web/pages/spaces_management/space_model/models/subspace_template_model.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class CreateSubspaceModelFooterButtons extends StatelessWidget {
+  const CreateSubspaceModelFooterButtons({
+    required this.onUpdate,
+    required this.errorMessage,
+    super.key,
+  });
+
+  final void Function(List<SubspaceTemplateModel> newSubspaces)? onUpdate;
+  final String errorMessage;
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        Expanded(
+          child: CancelButton(
+            label: 'Cancel',
+            onPressed: () => Navigator.of(context).pop(),
+          ),
+        ),
+        const SizedBox(width: 10),
+        Expanded(
+          child: DefaultButton(
+            onPressed: errorMessage.isEmpty
+                ? () {
+                    Navigator.of(context).pop();
+                    if (onUpdate != null) {
+                      final subSpaces =
+                          context.read<SubSpaceModelBloc>().state.subSpaces;
+                      onUpdate!(subSpaces);
+                    }
+                  }
+                : null,
+            backgroundColor: ColorsManager.secondaryColor,
+            borderRadius: 10,
+            foregroundColor: errorMessage.isNotEmpty
+                ? ColorsManager.whiteColorsWithOpacity
+                : ColorsManager.whiteColors,
+            child: const Text('OK'),
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/pages/spaces_management/create_subspace_model/widgets/subspace_chip.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/spaces_management/create_subspace_model/bloc/subspace_model_bloc.dart';
+import 'package:syncrow_web/pages/spaces_management/create_subspace_model/bloc/subspace_model_event.dart';
+import 'package:syncrow_web/pages/spaces_management/space_model/models/subspace_template_model.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class SubspaceChip extends StatelessWidget {
+  const SubspaceChip({
+    required this.subSpace,
+    required this.isDuplicate,
+    super.key,
+  });
+
+  final SubspaceTemplateModel subSpace;
+  final bool isDuplicate;
+
+  @override
+  Widget build(BuildContext context) {
+    return Chip(
+      label: Text(
+        subSpace.subspaceName,
+        style: context.textTheme.bodySmall?.copyWith(
+          color: isDuplicate ? ColorsManager.red : ColorsManager.spaceColor,
+        ),
+      ),
+      backgroundColor: ColorsManager.whiteColors,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(10),
+        side: BorderSide(
+          color: isDuplicate ? ColorsManager.red : ColorsManager.transparentColor,
+          width: 0,
+        ),
+      ),
+      deleteIcon: Container(
+        padding: const EdgeInsetsDirectional.all(1),
+        decoration: BoxDecoration(
+          shape: BoxShape.circle,
+          border: Border.all(
+            color: ColorsManager.lightGrayColor,
+            width: 1.5,
+          ),
+        ),
+        child: const FittedBox(
+          fit: BoxFit.scaleDown,
+          child: Icon(
+            Icons.close,
+            color: ColorsManager.lightGrayColor,
+          ),
+        ),
+      ),
+      onDeleted: () => context.read<SubSpaceModelBloc>().add(
+            RemoveSubSpaceModel(subSpace),
+          ),
+    );
+  }
+}

lib/pages/spaces_management/create_subspace_model/widgets/subspaces_textfield.dart

@@ -0,0 +1,68 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/spaces_management/create_subspace_model/bloc/subspace_model_bloc.dart';
+import 'package:syncrow_web/pages/spaces_management/create_subspace_model/bloc/subspace_model_event.dart';
+import 'package:syncrow_web/pages/spaces_management/space_model/models/subspace_template_model.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class SubspacesTextfield extends StatefulWidget {
+  const SubspacesTextfield({
+    required this.hintText,
+    super.key,
+  });
+
+  final String? hintText;
+
+  @override
+  State<SubspacesTextfield> createState() => _SubspacesTextfieldState();
+}
+
+class _SubspacesTextfieldState extends State<SubspacesTextfield> {
+  late final TextEditingController _controller;
+  @override
+  void initState() {
+    _controller = TextEditingController();
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: 100,
+      child: TextField(
+        controller: _controller,
+        decoration: InputDecoration(
+          border: InputBorder.none,
+          hintText: widget.hintText,
+          hintStyle: context.textTheme.bodySmall?.copyWith(
+            color: ColorsManager.lightGrayColor,
+          ),
+        ),
+        onSubmitted: (value) {
+          final trimmedValue = value.trim();
+          if (trimmedValue.isNotEmpty) {
+            context.read<SubSpaceModelBloc>().add(
+                  AddSubSpaceModel(
+                    SubspaceTemplateModel(
+                      subspaceName: trimmedValue,
+                      disabled: false,
+                    ),
+                  ),
+                );
+            _controller.clear();
+          }
+        },
+        style: context.textTheme.bodyMedium?.copyWith(
+          color: ColorsManager.blackColor,
+        ),
+      ),
+    );
+  }
+}