Merge pull request #277 from Securrency-OSS/dv/wrap

feat: Add support to the Wrap widget
Securrency-OSS · Feb 29, 2024 · d5f7907 · d5f7907
2 parents 5dfa72c + 7c2c915
commit d5f7907
Show file tree

Hide file tree

Showing 9 changed files with 733 additions and 0 deletions.
diff --git a/examples/mirai_gallery/assets/json/home_screen.json b/examples/mirai_gallery/assets/json/home_screen.json
@@ -1145,6 +1145,40 @@
               "assetPath": "assets/json/chip_example.json"
             }
           }
+        },
+        {
+          "type": "listTile",
+          "leading": {
+            "type": "icon",
+            "iconType": "material",
+            "icon": "wrap_text"
+          },
+          "title": {
+            "type": "text",
+            "data": "Wrap",
+            "align": "center",
+            "style": {
+              "fontSize": 21
+            }
+          },
+          "subtitle": {
+            "type": "text",
+            "data": "A widget to creates a wrap layout",
+            "align": "center",
+            "style": {
+              "fontSize": 12
+            }
+          },
+          "isThreeLine": true,
+          "style": "list",
+          "onTap": {
+            "actionType": "navigate",
+            "navigationStyle": "push",
+            "widgetJson": {
+              "type": "exampleScreen",
+              "assetPath": "assets/json/wrap_example.json"
+            }
+          }
         }
       ]
     }

diff --git a/examples/mirai_gallery/assets/json/wrap_example.json b/examples/mirai_gallery/assets/json/wrap_example.json
@@ -0,0 +1,180 @@
+{
+  "type": "scaffold",
+  "appBar": {
+    "type": "appBar",
+    "title": {
+      "type": "text",
+      "data": "Wrap Demo"
+    }
+  },
+  "body": {
+    "type": "center",
+    "child": {
+      "type": "wrap",
+      "spacing": 8.0,
+      "runSpacing": 4.0,
+      "children": [
+        {
+          "type": "container",
+          "color": "#FFCDD2",
+          "width": 100,
+          "height": 100,
+          "child": {
+            "type": "center",
+            "child": {
+              "type": "text",
+              "data": "1",
+              "style": {
+                "color": "#FFFFFF"
+              }
+            }
+          }
+        },
+        {
+          "type": "container",
+          "color": "#F8BBD0",
+          "width": 100,
+          "height": 100,
+          "child": {
+            "type": "center",
+            "child": {
+              "type": "text",
+              "data": "2",
+              "style": {
+                "color": "#FFFFFF"
+              }
+            }
+          }
+        },
+        {
+          "type": "container",
+          "color": "#E1BEE7",
+          "width": 100,
+          "height": 100,
+          "child": {
+            "type": "center",
+            "child": {
+              "type": "text",
+              "data": "3",
+              "style": {
+                "color": "#FFFFFF"
+              }
+            }
+          }
+        },
+        {
+          "type": "container",
+          "color": "#D1C4E9",
+          "width": 100,
+          "height": 100,
+          "child": {
+            "type": "center",
+            "child": {
+              "type": "text",
+              "data": "4",
+              "style": {
+                "color": "#FFFFFF"
+              }
+            }
+          }
+        },
+        {
+          "type": "container",
+          "color": "#C5CAE9",
+          "width": 100,
+          "height": 100,
+          "child": {
+            "type": "center",
+            "child": {
+              "type": "text",
+              "data": "5",
+              "style": {
+                "color": "#FFFFFF"
+              }
+            }
+          }
+        },
+        {
+          "type": "container",
+          "color": "#BBDEFB",
+          "width": 100,
+          "height": 100,
+          "child": {
+            "type": "center",
+            "child": {
+              "type": "text",
+              "data": "6",
+              "style": {
+                "color": "#FFFFFF"
+              }
+            }
+          }
+        },
+        {
+          "type": "container",
+          "color": "#B3E5FC",
+          "width": 100,
+          "height": 100,
+          "child": {
+            "type": "center",
+            "child": {
+              "type": "text",
+              "data": "7",
+              "style": {
+                "color": "#FFFFFF"
+              }
+            }
+          }
+        },
+        {
+          "type": "container",
+          "color": "#B2EBF2",
+          "width": 100,
+          "height": 100,
+          "child": {
+            "type": "center",
+            "child": {
+              "type": "text",
+              "data": "8",
+              "style": {
+                "color": "#FFFFFF"
+              }
+            }
+          }
+        },
+        {
+          "type": "container",
+          "color": "#B2DFDB",
+          "width": 100,
+          "height": 100,
+          "child": {
+            "type": "center",
+            "child": {
+              "type": "text",
+              "data": "9",
+              "style": {
+                "color": "#FFFFFF"
+              }
+            }
+          }
+        },
+        {
+          "type": "container",
+          "color": "#C8E6C9",
+          "width": 100,
+          "height": 100,
+          "child": {
+            "type": "center",
+            "child": {
+              "type": "text",
+              "data": "10",
+              "style": {
+                "color": "#FFFFFF"
+              }
+            }
+          }
+        }
+      ]
+    }
+  }
+}
diff --git a/packages/mirai/lib/src/framework/mirai.dart b/packages/mirai/lib/src/framework/mirai.dart
@@ -7,6 +7,7 @@ import 'package:flutter/services.dart';
 import 'package:mirai/src/action_parsers/action_parsers.dart';
 import 'package:mirai/src/action_parsers/mirai_network_request/mirai_network_request_parser.dart';
 import 'package:mirai/src/framework/mirai_registry.dart';
+import 'package:mirai/src/parsers/mirai_wrap/mirai_wrap.dart';
 import 'package:mirai/src/parsers/parsers.dart';
 import 'package:mirai/src/services/mirai_network_service.dart';
 import 'package:mirai/src/utils/log.dart';
@@ -67,6 +68,7 @@ class Mirai {
     const MiraiGridViewParser(),
     const MiraiBottomNavigationViewParser(),
     const MiraiDefaultBottomNavigationControllerParser(),
+    const MiraiWrapParser(),
   ];
 
   static final _actionParsers = <MiraiActionParser>[

diff --git a/packages/mirai/lib/src/parsers/mirai_wrap/mirai_wrap.dart b/packages/mirai/lib/src/parsers/mirai_wrap/mirai_wrap.dart
@@ -0,0 +1,26 @@
+import 'package:flutter/material.dart';
+import 'package:freezed_annotation/freezed_annotation.dart';
+
+export 'mirai_wrap_parser.dart';
+
+part 'mirai_wrap.freezed.dart';
+part 'mirai_wrap.g.dart';
+
+@freezed
+class MiraiWrap with _$MiraiWrap {
+  const factory MiraiWrap({
+    @Default(Axis.horizontal) Axis direction,
+    @Default(WrapAlignment.start) WrapAlignment alignment,
+    @Default(0.0) double spacing,
+    @Default(WrapAlignment.start) WrapAlignment runAlignment,
+    @Default(0.0) double runSpacing,
+    @Default(WrapCrossAlignment.start) WrapCrossAlignment crossAxisAlignment,
+    TextDirection? textDirection,
+    @Default(VerticalDirection.down) VerticalDirection verticalDirection,
+    @Default(Clip.none) Clip clipBehavior,
+    @Default([]) List<Map<String, dynamic>> children,
+  }) = _MiraiWrap;
+
+  factory MiraiWrap.fromJson(Map<String, dynamic> json) =>
+      _$MiraiWrapFromJson(json);
+}