Merge pull request #208 from StacDev/dv/api-component

[WIP] feat: Add StacDynamicView parser for fetching and rendering API data

Author: divyanshub024

examples/stac_gallery/assets/json/dynamic_list_view_example.json

@@ -0,0 +1,36 @@
+{
+  "type": "scaffold",
+  "appBar": {
+    "type": "appBar",
+    "title": {
+      "type": "text",
+      "data": "Users List"
+    }
+  },
+  "body": {
+    "type": "dynamicView",
+    "request": {
+      "url": "https://dummyjson.com/users",
+      "method": "get"
+    },
+    "targetPath": "users",
+    "template": {
+      "type": "listView",
+      "ItemTemplate": {
+        "type": "listTile",
+        "title": {
+          "type": "text",
+          "data": "{{firstName}} {{lastName}}"
+        },
+        "subtitle": {
+          "type": "text",
+          "data": "{{email}}"
+        },
+        "leading": {
+          "type": "circleAvatar",
+          "backgroundImage": "{{image}}"
+        }
+      }
+    }
+  }
+}

examples/stac_gallery/assets/json/dynamic_view_example.json

@@ -0,0 +1,74 @@
+{
+  "type": "scaffold",
+  "appBar": {
+    "type": "appBar",
+    "title": {
+      "type": "text",
+      "data": "User Profile"
+    }
+  },
+  "body": {
+    "type": "dynamicView",
+    "request": {
+      "url": "https://dummyjson.com/users/1",
+      "method": "get"
+    },
+    "template": {
+      "type": "column",
+      "children": [
+        {
+          "type": "container",
+          "padding": 16,
+          "child": {
+            "type": "column",
+            "crossAxisAlignment": "start",
+            "children": [
+              {
+                "type": "image",
+                "src": "{{image}}",
+                "width": 100,
+                "height": 100
+              },
+              {
+                "type": "text",
+                "style": {
+                  "fontSize": 24,
+                  "fontWeight": "w700"
+                },
+                "data": "{{firstName}} {{lastName}}"
+              },
+              {
+                "type": "sizedBox",
+                "height": 8
+              },
+              {
+                "type": "text",
+                "style": {
+                  "fontSize": 16,
+                  "color": "#666666"
+                },
+                "data": "Email: {{email}}"
+              },
+              {
+                "type": "text",
+                "style": {
+                  "fontSize": 16,
+                  "color": "#666666"
+                },
+                "data": "Phone: {{phone}}"
+              },
+              {
+                "type": "text",
+                "style": {
+                  "fontSize": 16,
+                  "color": "#666666"
+                },
+                "data": "Age: {{age}}"
+              }
+            ]
+          }
+        }
+      ]
+    }
+  }
+}

examples/stac_gallery/assets/json/home_screen.json

@@ -1564,7 +1564,6 @@
       "iconType": "material",
       "icon": "navigation"
     },
-
     "title": {
       "type": "text",
       "data": "Stac Opacity",
@@ -1589,15 +1588,13 @@
       }
     }
   },
-
   {
     "type": "listTile",
     "leading": {
       "type": "icon",
       "iconType": "material",
       "icon": "apartment"
     },
-
     "title": {
       "type": "text",
       "data": "Placeholder",
@@ -1622,8 +1619,6 @@
       }
     }
   },
-  
-
   {
     "type": "listTile",
     "leading": {
@@ -1663,15 +1658,13 @@
       "behavior": "floating"
     }
   },
-
   {
     "type": "listTile",
     "leading": {
       "type": "icon",
       "iconType": "material",
       "icon": "apartment"
     },
-
     "title": {
       "type": "text",
       "data": "Stac AspectRatio",
@@ -1696,15 +1689,13 @@
       }
     }
   },
-
   {
     "type": "listTile",
     "leading": {
       "type": "icon",
       "iconType": "material",
       "icon": "apartment"
     },
-
     "title": {
       "type": "text",
       "data": "Stac FittedBox",
@@ -1729,15 +1720,13 @@
       }
     }
   },
-
   {
     "type": "listTile",
     "leading": {
       "type": "icon",
       "iconType": "material",
       "icon": "apartment"
     },
-
     "title": {
       "type": "text",
       "data": "Stac LimitedBox",
@@ -1762,10 +1751,66 @@
       }
     }
   },
-  
-
   {
-    "type": "sizedBox",
-    "height": 24.0
+    "type": "listTile",
+    "leading": {
+      "type": "icon",
+      "iconType": "material",
+      "icon": "api"
+    },
+    "title": {
+      "type": "text",
+      "data": "Stac Dynamic View",
+      "style": {
+        "fontSize": 21
+      }
+    },
+    "subtitle": {
+      "type": "text",
+      "data": "Fetch data from APIs and render it using templates",
+      "style": {
+        "fontSize": 12
+      }
+    },
+    "isThreeLine": true,
+    "onTap": {
+      "actionType": "navigate",
+      "navigationStyle": "push",
+      "widgetJson": {
+        "type": "exampleScreen",
+        "assetPath": "assets/json/dynamic_view_example.json"
+      }
+    }
+  },
+  {
+    "type": "listTile",
+    "leading": {
+      "type": "icon",
+      "iconType": "material",
+      "icon": "api"
+    },
+    "title": {
+      "type": "text",
+      "data": "Stac Dynamic List View",
+      "style": {
+        "fontSize": 21
+      }
+    },
+    "subtitle": {
+      "type": "text",
+      "data": "Fetch data from APIs and render it using templates",
+      "style": {
+        "fontSize": 12
+      }
+    },
+    "isThreeLine": true,
+    "onTap": {
+      "actionType": "navigate",
+      "navigationStyle": "push",
+      "widgetJson": {
+        "type": "exampleScreen",
+        "assetPath": "assets/json/dynamic_list_view_example.json"
+      }
+    }
   }
-]
+]

packages/stac/lib/src/framework/stac.dart

@@ -98,6 +98,7 @@ class Stac {
     const StacAspectRatioParser(),
     const StacFittedBoxParser(),
     const StacLimitedBoxParser(),
+    const StacDynamicViewParser(),
   ];
 
   static final _actionParsers = <StacActionParser>[

packages/stac/lib/src/parsers/parsers.dart

@@ -92,3 +92,4 @@ export 'package:stac/src/parsers/stac_text_form_field/stac_text_form_field.dart'
 export 'package:stac/src/parsers/stac_text_style/stac_text_style.dart';
 export 'package:stac/src/parsers/stac_theme/stac_theme.dart';
 export 'package:stac/src/parsers/stac_wrap/stac_wrap.dart';
+export 'package:stac/src/parsers/stac_dynamic_view/stac_dynamic_view.dart';

packages/stac/lib/src/parsers/stac_dynamic_view/stac_dynamic_view.dart

@@ -0,0 +1,21 @@
+import 'package:freezed_annotation/freezed_annotation.dart';
+import 'package:stac/src/action_parsers/stac_network_request/stac_network_request.dart';
+
+export 'stac_dynamic_view_parser.dart';
+
+part 'stac_dynamic_view.freezed.dart';
+part 'stac_dynamic_view.g.dart';
+
+/// A model class for the StacDynamicView parser.
+/// This parser fetches data dynamically and renders it using a template.
+@freezed
+class StacDynamicView with _$StacDynamicView {
+  const factory StacDynamicView({
+    required StacNetworkRequest request,
+    @Default('') String targetPath,
+    required Map<String, dynamic> template,
+  }) = _StacDynamicView;
+
+  factory StacDynamicView.fromJson(Map<String, dynamic> json) =>
+      _$StacDynamicViewFromJson(json);
+}