Merge pull request #7 from BuildMirai/dv/carousel-view

feat: Add Mirai carousel view with example
BuildMirai · Dec 24, 2024 · 9ccc88d · 9ccc88d
2 parents 20b99aa + a5fdd3c
commit 9ccc88d
Show file tree

Hide file tree

Showing 9 changed files with 826 additions and 0 deletions.
diff --git a/examples/mirai_gallery/assets/json/carousel_view_example.json b/examples/mirai_gallery/assets/json/carousel_view_example.json
@@ -0,0 +1,127 @@
+{
+  "type": "scaffold",
+  "appBar": {
+    "type": "appBar",
+    "title": {"type": "text", "data": "Carousel View"}
+  },
+  "body": {
+    "type": "listView",
+    "children": [
+      {
+        "type": "container",
+        "height": 400,
+        "child": {
+          "type": "carouselView",
+          "padding": 12,
+          "carouselType": "weighted",
+          "itemSnapping": true,
+          "flexWeights": [1, 7, 1],
+          "children": [
+            {
+              "type": "image",
+              "height": 400,
+              "fit": "cover",
+              "src":
+              "https://flutter.github.io/assets-for-api-docs/assets/material/content_based_color_scheme_1.png"
+            },
+            {
+              "type": "image",
+              "height": 400,
+              "fit": "cover",
+              "src":
+              "https://flutter.github.io/assets-for-api-docs/assets/material/content_based_color_scheme_2.png"
+            },
+            {
+              "type": "image",
+              "height": 400,
+              "fit": "cover",
+              "src":
+              "https://flutter.github.io/assets-for-api-docs/assets/material/content_based_color_scheme_3.png"
+            },
+            {
+              "type": "image",
+              "height": 400,
+              "fit": "cover",
+              "src":
+              "https://flutter.github.io/assets-for-api-docs/assets/material/content_based_color_scheme_4.png"
+            },
+            {
+              "type": "image",
+              "height": 400,
+              "fit": "cover",
+              "src":
+              "https://flutter.github.io/assets-for-api-docs/assets/material/content_based_color_scheme_5.png"
+            },
+            {
+              "type": "image",
+              "height": 400,
+              "fit": "cover",
+              "src":
+              "https://flutter.github.io/assets-for-api-docs/assets/material/content_based_color_scheme_6.png"
+            }
+          ]
+        }
+      },
+      {
+        "type": "container",
+        "height": 200,
+        "child": {
+          "type": "carouselView",
+          "itemExtent": 300,
+          "shrinkExtent": 80,
+          "padding": 12,
+          "children": [
+            {
+              "type": "container",
+              "color": "#FFCDD2",
+              "child": {
+                "type": "center",
+                "child": {
+                  "type": "text",
+                  "data": "Show 0",
+                  "style": {
+                    "color": "#FFFFFF",
+                    "fontSize": 20,
+                    "fontWeight": "w400"
+                  }
+                }
+              }
+            },
+            {
+              "type": "container",
+              "color": "#C8E6C9",
+              "child": {
+                "type": "center",
+                "child": {
+                  "type": "text",
+                  "data": "Show 1",
+                  "style": {
+                    "color": "#FFFFFF",
+                    "fontSize": 20,
+                    "fontWeight": "w400"
+                  }
+                }
+              }
+            },
+            {
+              "type": "container",
+              "color": "#BBDEFB",
+              "child": {
+                "type": "center",
+                "child": {
+                  "type": "text",
+                  "data": "Show 2",
+                  "style": {
+                    "color": "#FFFFFF",
+                    "fontSize": 20,
+                    "fontWeight": "w400"
+                  }
+                }
+              }
+            }
+          ]
+        }
+      }
+    ]
+  }
+}
diff --git a/examples/mirai_gallery/assets/json/home_screen.json b/examples/mirai_gallery/assets/json/home_screen.json
@@ -154,6 +154,37 @@
       }
     }
   },
+  {
+    "type": "listTile",
+    "leading": {
+      "type": "icon",
+      "iconType": "material",
+      "icon": "view_carousel"
+    },
+    "title": {
+      "type": "text",
+      "data": "Mirai Carousel View",
+      "style": {
+        "fontSize": 21
+      }
+    },
+    "subtitle": {
+      "type": "text",
+      "data": "The CarouselView presents a scrollable list of items, each of which can dynamically change size based on the chosen layout.",
+      "style": {
+        "fontSize": 12
+      }
+    },
+    "isThreeLine": true,
+    "onTap": {
+      "actionType": "navigate",
+      "navigationStyle": "push",
+      "widgetJson": {
+        "type": "exampleScreen",
+        "assetPath": "assets/json/carousel_view_example.json"
+      }
+    }
+  },
   {
     "type": "listTile",
     "leading": {

diff --git a/packages/mirai/lib/src/framework/mirai.dart b/packages/mirai/lib/src/framework/mirai.dart
@@ -80,6 +80,7 @@ class Mirai {
     const MiraiAutoCompleteParser(),
     const MiraiTableParser(),
     const MiraiTableCellParser(),
+    const MiraiCarouselViewParser(),
   ];
 
   static final _actionParsers = <MiraiActionParser>[

diff --git a/packages/mirai/lib/src/parsers/mirai_carousel_view/mirai_carousel_view.dart b/packages/mirai/lib/src/parsers/mirai_carousel_view/mirai_carousel_view.dart
@@ -0,0 +1,36 @@
+import 'package:flutter/material.dart';
+import 'package:freezed_annotation/freezed_annotation.dart';
+import 'package:mirai/mirai.dart';
+
+export 'package:mirai/src/parsers/mirai_carousel_view/mirai_carousel_view_parser.dart';
+
+part 'mirai_carousel_view.freezed.dart';
+part 'mirai_carousel_view.g.dart';
+
+enum MiraiCarouselViewType {
+  regular,
+  weighted,
+}
+
+@freezed
+class MiraiCarouselView with _$MiraiCarouselView {
+  const factory MiraiCarouselView({
+    @Default(MiraiCarouselViewType.regular) MiraiCarouselViewType carouselType,
+    MiraiEdgeInsets? padding,
+    String? backgroundColor,
+    double? elevation,
+    String? overlayColor,
+    @Default(false) bool itemSnapping,
+    @Default(0.0) double shrinkExtent,
+    @Default(Axis.horizontal) Axis scrollDirection,
+    @Default(false) bool reverse,
+    Map<String, dynamic>? onTap,
+    @Default(true) bool enableSplash,
+    double? itemExtent,
+    List<int>? flexWeights,
+    required List<Map<String, dynamic>>? children,
+  }) = _MiraiCarouselView;
+
+  factory MiraiCarouselView.fromJson(Map<String, dynamic> json) =>
+      _$MiraiCarouselViewFromJson(json);
+}