WIP

assets/images/persons.png:Zone.Identifier

@@ -1,4 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-ReferrerUrl=https://www.google.com/
-HostUrl=https://w7.pngwing.com/pngs/144/173/png-transparent-person-icon-illustration-computer-icons-icon-design-symbol-person-symbol-miscellaneous-monochrome-sticker.png

lib/components/templates_components/card_item_template_component/card_item_template_component_widget.dart

@@ -11,16 +11,14 @@ import 'card_item_template_component_model.dart';
 
 export 'card_item_template_component_model.dart';
 
-///
-
 class CardItemTemplateComponentWidget extends StatefulWidget {
   const CardItemTemplateComponentWidget({
-    super.key,
+    Key? key,
     required this.labelsHashMap,
     required this.statusHashMap,
     required this.imagePath,
     required this.onTapCardItemAction,
-  });
+  }) : super(key: key);
 
   final Map<String, String>? labelsHashMap;
   final List<Map<String, Color>?> statusHashMap;
@@ -35,23 +33,17 @@ class CardItemTemplateComponentWidget extends StatefulWidget {
 class _CardItemTemplateComponentWidgetState
     extends State<CardItemTemplateComponentWidget> {
   late CardItemTemplateComponentModel _model;
-  LinkedHashMap<String, String> get labelsLinkedHashMap =>
+  late LinkedHashMap<String, String> labelsLinkedHashMap;
-      LinkedHashMap.from(widget.labelsHashMap ?? {});
+  late List<LinkedHashMap<String, Color>> statusLinkedHashMap;
-  List<LinkedHashMap<String, Color>> get statusLinkedHashMap =>
-      widget.statusHashMap
-          .map((map) => LinkedHashMap<String, Color>.from(map ?? {}))
-          .toList();
-
-  @override
-  void setState(VoidCallback callback) {
-    super.setState(callback);
-    _model.onUpdate();
-  }
 
   @override
   void initState() {
     super.initState();
     _model = createModel(context, () => CardItemTemplateComponentModel());
+    labelsLinkedHashMap = LinkedHashMap.from(widget.labelsHashMap ?? {});
+    statusLinkedHashMap = widget.statusHashMap
+        .map((map) => LinkedHashMap<String, Color>.from(map ?? {}))
+        .toList();
   }
 
   @override
@@ -65,13 +57,13 @@ class _CardItemTemplateComponentWidgetState
   }
 
   List<Widget> _generateLabels() {
-    List<Widget> labels = [];
+    return labelsLinkedHashMap.entries.map((entry) {
-    double width = MediaQuery.of(context).size.width;
+      final key = entry.key;
+      final text = entry.value.toString();
 
-    for (var key in labelsLinkedHashMap.keys) {
+      return Container(
-      String text = labelsLinkedHashMap[key].toString();
+        color: FlutterFlowTheme.of(context).primary,
-
+        child: Row(
-      Widget widget = Row(
           children: [
             Text(
               key,
@@ -84,9 +76,7 @@ class _CardItemTemplateComponentWidgetState
                     color: FlutterFlowTheme.of(context).primaryText,
                   ),
             ),
-          const SizedBox(width: 2.5),
+            Expanded(
-          SizedBox(
-            width: 225,
               child: Text(
                 text,
                 overflow: TextOverflow.ellipsis,
@@ -100,22 +90,17 @@ class _CardItemTemplateComponentWidgetState
                     ),
               ),
             )
-        ],
+          ].divide(const Flexible(child: SizedBox(width: 25))),
+        ),
       );
-
+    }).toList();
-      labels.add(widget);
-    }
-
-    return labels;
   }
 
   Widget _generateImage() {
-    return Container(
+    return Flexible(
+      child: SizedBox(
         width: 100,
         height: 100,
-      decoration: BoxDecoration(
-        color: FlutterFlowTheme.of(context).primaryBackground,
-      ),
         child: ClipRRect(
           borderRadius: BorderRadius.circular(20),
           child: CachedNetworkImage(
@@ -125,45 +110,74 @@ class _CardItemTemplateComponentWidgetState
             fit: BoxFit.cover,
           ),
         ),
+      ),
     );
   }
 
   List<Widget> _generateStatus() {
-    List<Widget> status = [];
+    return statusLinkedHashMap.expand((statusLinked) {
+      return statusLinked.entries.map((entry) {
+        final text = entry.key;
+        final color = entry.value;
 
-    statusLinkedHashMap.expand((statusLinked) {
+        return Container(
-      statusLinked.forEach((text, color) {
-        Widget widget = Container(
           padding: const EdgeInsets.all(5),
           decoration: BoxDecoration(
-              color: color, borderRadius: BorderRadius.circular(5)),
+            color: color,
+            borderRadius: BorderRadius.circular(5),
+          ),
           child: Text(
             text,
             overflow: TextOverflow.ellipsis,
             style: TextStyle(
               color: FlutterFlowTheme.of(context).info,
               fontSize: 12,
-                fontWeight: FontWeight.bold),
+              fontWeight: FontWeight.bold,
+            ),
           ),
         );
-
-        status.add(widget);
-      });
-
-      return [];
       }).toList();
-
+    }).toList();
-    return status;
   }
 
-  Widget _smallScreen() {
+  Widget _buildContent() {
+    final screenWidth = MediaQuery.of(context).size.width;
+
+    if (screenWidth > 360) {
+      return Row(
+        mainAxisSize: MainAxisSize.max,
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Expanded(
+            child: Container(
+              color: FlutterFlowTheme.of(context).error,
+              child: Column(
+                mainAxisSize: MainAxisSize.max,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  ..._generateLabels(),
+                  const SizedBox(height: 5),
+                  Wrap(
+                    spacing: 8,
+                    runSpacing: 8,
+                    children: _generateStatus(),
+                  ),
+                ],
+              ),
+            ),
+          ),
+          _generateImage(),
+        ],
+      );
+    } else {
       return Column(
         mainAxisSize: MainAxisSize.max,
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: [
           _generateImage(),
           const SizedBox(height: 5),
-        Column(
+          Expanded(
+            child: Column(
               mainAxisSize: MainAxisSize.max,
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
@@ -173,39 +187,17 @@ class _CardItemTemplateComponentWidgetState
                   spacing: 8,
                   runSpacing: 8,
                   children: _generateStatus(),
-              )
+                ),
-            ]),
+              ],
+            ),
+          ),
         ],
       );
     }
-
-  Widget _largeScreen() {
-    return Row(
-      mainAxisSize: MainAxisSize.max,
-      mainAxisAlignment: MainAxisAlignment.spaceBetween,
-      children: [
-        Column(
-            mainAxisSize: MainAxisSize.max,
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              ..._generateLabels(),
-              const SizedBox(height: 5),
-              Wrap(
-                spacing: 8,
-                runSpacing: 8,
-                children: _generateStatus(),
-              )
-            ]),
-        _generateImage()
-      ],
-    );
   }
 
   @override
   Widget build(BuildContext context) {
-    double screenWidth = MediaQuery.of(context).size.width;
-    double screenHeight = MediaQuery.of(context).size.height;
-
     context.watch<AppState>();
 
     return InkWell(
@@ -226,16 +218,10 @@ class _CardItemTemplateComponentWidgetState
           child: Container(
             width: double.infinity,
             decoration: BoxDecoration(
-              color: FlutterFlowTheme.of(context).primaryBackground,
+              color: FlutterFlowTheme.of(context).warning,
             ),
             padding: const EdgeInsets.all(8),
-            child: Column(
+            child: _buildContent(),
-              mainAxisSize: MainAxisSize.max,
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                screenWidth > 360 ? _largeScreen() : _smallScreen(),
-              ],
-            ),
           ),
         ),
       ),

lib/pages/home_page/home_page_widget.dart

@@ -166,12 +166,24 @@ class _HomePageWidgetState extends State<HomePageWidget> {
         color: Color(0xFF1AAB5F),
       ),
       child: Align(
-        alignment: AlignmentDirectional.bottomCenter,
+        alignment: AlignmentDirectional.center,
         child: Row(
           mainAxisSize: MainAxisSize.max,
-          mainAxisAlignment: MainAxisAlignment.spaceAround,
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: [
-            const SizedBox(),
+            Padding(
+              padding: const EdgeInsetsDirectional.fromSTEB(0.0, 0.0, 0.0, 0.0),
+              child: IconButton(
+                icon: const Icon(
+                  Icons.menu_rounded,
+                  color: Colors.white,
+                  size: 28.0,
+                ),
+                onPressed: () async {
+                  scaffoldKey.currentState!.openEndDrawer();
+                },
+              ),
+            ),
             Row(
               children: [
                 ClipRRect(
@@ -196,20 +208,7 @@ class _HomePageWidgetState extends State<HomePageWidget> {
                 ),
               ],
             ),
-            Padding(
+            const SizedBox(),
-              padding:
-                  const EdgeInsetsDirectional.fromSTEB(10.0, 0.0, 0.0, 0.0),
-              child: IconButton(
-                icon: const Icon(
-                  Icons.menu_rounded,
-                  color: Colors.white,
-                  size: 28.0,
-                ),
-                onPressed: () async {
-                  scaffoldKey.currentState!.openEndDrawer();
-                },
-              ),
-            ),
           ],
         ),
       ),