[Views] - Implement Shadow widget (resolves #31)

CHANGELOG.md

@@ -3,6 +3,8 @@
 - Added `HStack` widget.
 - Added `VStack` widget.
 - Added `Rectangle` widget.
+- Added `Ellipse` widget.
+- Added `Shadow` widget.
 
 ## 0.0.1 - Sept, 2023
 Setting up the project structure. This release is not usable.

doc_swift_ui_gallery/swift_ui_gallery/swift_ui_gallery.xcodeproj/project.pbxproj

@@ -9,6 +9,7 @@
 /* Begin PBXBuildFile section */
 		714951452C0EB31C00818B06 /* ShapesPage.swift in Sources */ = {isa = PBXBuildFile; fileRef = 714951442C0EB31C00818B06 /* ShapesPage.swift */; };
 		714951472C0EB52400818B06 /* RectangleExamples.swift in Sources */ = {isa = PBXBuildFile; fileRef = 714951462C0EB52400818B06 /* RectangleExamples.swift */; };
+		717523012C1D330600FB7CF3 /* ShadowExamples.swift in Sources */ = {isa = PBXBuildFile; fileRef = 717523002C1D330500FB7CF3 /* ShadowExamples.swift */; };
 		7179CF832B26DEB900C5927B /* TextTypographyPage.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7179CF822B26DEB900C5927B /* TextTypographyPage.swift */; };
 		7179CF852B26DEDD00C5927B /* TextAccessibilityPage.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7179CF842B26DEDD00C5927B /* TextAccessibilityPage.swift */; };
 		7179CF872B26DF0E00C5927B /* TextLocalizationPage.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7179CF862B26DF0E00C5927B /* TextLocalizationPage.swift */; };
@@ -56,6 +57,7 @@
 /* Begin PBXFileReference section */
 		714951442C0EB31C00818B06 /* ShapesPage.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShapesPage.swift; sourceTree = "<group>"; };
 		714951462C0EB52400818B06 /* RectangleExamples.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RectangleExamples.swift; sourceTree = "<group>"; };
+		717523002C1D330500FB7CF3 /* ShadowExamples.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShadowExamples.swift; sourceTree = "<group>"; };
 		7179CF822B26DEB900C5927B /* TextTypographyPage.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TextTypographyPage.swift; sourceTree = "<group>"; };
 		7179CF842B26DEDD00C5927B /* TextAccessibilityPage.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TextAccessibilityPage.swift; sourceTree = "<group>"; };
 		7179CF862B26DF0E00C5927B /* TextLocalizationPage.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TextLocalizationPage.swift; sourceTree = "<group>"; };
@@ -117,6 +119,7 @@
 				714951442C0EB31C00818B06 /* ShapesPage.swift */,
 				714951462C0EB52400818B06 /* RectangleExamples.swift */,
 				71C346EE2C1A7B580087A514 /* EllipseExamples.swift */,
+				717523002C1D330500FB7CF3 /* ShadowExamples.swift */,
 			);
 			path = shapes;
 			sourceTree = "<group>";
@@ -441,6 +444,7 @@
 				C9CAE2B32AE1066B0042DBC7 /* MotionPage.swift in Sources */,
 				B3DD96702B66513800F66E9F /* ImageLocalizationPage.swift in Sources */,
 				C9FB17562C0C4AB4004479AA /* HStackExamples.swift in Sources */,
+				717523012C1D330600FB7CF3 /* ShadowExamples.swift in Sources */,
 				C9CAE2812AC23AB40042DBC7 /* swift_ui_galleryApp.swift in Sources */,
 				C902DDE52AE38C8A00242DBA /* VStackExamples.swift in Sources */,
 				C9CAE2AF2AE106540042DBC7 /* ScaffoldsPage.swift in Sources */,

doc_swift_ui_gallery/swift_ui_gallery/swift_ui_gallery/shapes/EllipseExamples.swift

@@ -23,6 +23,7 @@ struct EllipsePage: View {
                 Ellipse()
                     .stroke(LinearGradient(gradient: Gradient(colors: [.yellow, .blue]), startPoint: .leading, endPoint: .trailing), lineWidth: 14)
                     .frame(width: 200, height: 100)
+
             }.frame(width: 300)
         }
     }

doc_swift_ui_gallery/swift_ui_gallery/swift_ui_gallery/shapes/RectangleExamples.swift

@@ -23,7 +23,8 @@ struct RectanglePage: View {
                 Rectangle()
                     .stroke(LinearGradient(gradient: Gradient(colors: [.yellow, .blue]), startPoint: .leading, endPoint: .trailing), lineWidth: 14)
                     .frame(width: 200, height: 100)
-            }
+
+            }.frame(width: 300)
         }
     }
 }

doc_swift_ui_gallery/swift_ui_gallery/swift_ui_gallery/shapes/ShadowExamples.swift

@@ -0,0 +1,69 @@
+import SwiftUI
+
+struct ShadowPage: View {
+    var body: some View {
+        ScrollView {
+            VStack(spacing: 40) {
+
+                Rectangle()
+                    .fill(Color.purple)
+                    .shadow(color: .gray, radius: 10, x: 10, y: 10)
+                    .frame(width: 200, height: 100)
+
+                Ellipse()
+                    .fill(Color.yellow)
+                    .shadow(color: .gray, radius: 10, x: 10, y: 10)
+                    .frame(width: 200, height: 100)
+
+                Star(points: 5)
+                    .stroke(Color.blue, lineWidth: 5)
+                    .frame(width: 200, height: 200)
+                    .shadow(color: .gray, radius: 10, x: 10, y: 10)
+
+                Ellipse()
+                    .stroke(Color.red, lineWidth: 5)
+                    .shadow(color: .gray, radius: 10, x: 10, y: 10)
+                    .frame(width: 200, height: 100)
+
+            }.frame(width: 300)
+        }
+    }
+}
+
+struct Star: Shape {
+    let points: Int
+
+    func path(in rect: CGRect) -> Path {
+        var path = Path()
+
+        let starExtrusion: CGFloat = 0.5
+        let angle = .pi / Double(points)
+        let center = CGPoint(x: rect.width / 2, y: rect.height / 2)
+        let radius = min(rect.width, rect.height) / 2
+
+        for i in 0..<2 * points {
+            let rotation = Double(i) * angle
+            let position = CGPoint(
+                x: center.x + CGFloat(cos(rotation) * radius * (i % 2 == 0 ? 1 : starExtrusion)),
+                y: center.y + CGFloat(sin(rotation) * radius * (i % 2 == 0 ? 1 : starExtrusion))
+            )
+
+            if i == 0 {
+                path.move(to: position)
+            } else {
+                path.addLine(to: position)
+            }
+        }
+
+        path.closeSubpath()
+
+        return path
+    }
+}
+
+struct ShadowPage_Previews: PreviewProvider {
+    static var previews: some View {
+        ShadowPage()
+    }
+}
+

doc_swift_ui_gallery/swift_ui_gallery/swift_ui_gallery/shapes/ShapesPage.swift

@@ -4,17 +4,34 @@ struct ShapesPage: View {
     var body: some View {
         NavigationStack {
             List() {
-                NavigationLink {
-                    RectanglePage()
-                } label: {
-                    Text("Rectangle")
+                Section() {
+                    NavigationLink {
+                        RectanglePage()
+                    } label: {
+                        Text("Rectangle")
+                    }
+
+                    NavigationLink {
+                        EllipsePage()
+                    } label: {
+                        Text("Ellipse")
+                    }
+
+                } header: {
+                    Text("Shapes")
                 }
 
-                NavigationLink {
-                    EllipsePage()
-                } label: {
-                    Text("Ellipse")
+                Section() {
+                    NavigationLink {
+                        ShadowPage()
+                    } label: {
+                        Text("shadow")
+                    }
+                } header: {
+                    Text("View methods")
                 }
+
+
             }.navigationTitle("Shapes")
         }
     }

example/lib/shapes/rectangle.dart

@@ -52,6 +52,7 @@ class RectangleDemo extends StatelessWidget {
           ),
         ),
       ],
+      spacing: 20,
     );
   }
 }

example/lib/shapes/shadow.dart

@@ -0,0 +1,165 @@
+import 'dart:math';
+
+import 'package:flutter/widgets.dart';
+import 'package:swift_ui/swift_ui.dart';
+
+class ShadowDemo extends StatelessWidget {
+  const ShadowDemo({
+    super.key,
+  });
+
+  static const color = Colors.grey;
+  static const radius = 10.0;
+  static const x = 10.0;
+  static const y = 10.0;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: const VStack(
+        [
+          // Rectangle with shadow
+          Frame(
+            width: 200,
+            height: 100,
+            child: Shadow(
+              color: color,
+              radius: radius,
+              x: x,
+              y: y,
+              child: Rectangle(
+                fillColor: Colors.purple,
+              ),
+            ),
+          ),
+
+          // Ellipse with shadow
+          Frame(
+            width: 200,
+            height: 100,
+            child: Shadow(
+              color: color,
+              radius: radius,
+              x: x,
+              y: y,
+              child: Ellipse(
+                fillColor: Colors.yellow,
+              ),
+            ),
+          ),
+
+          // Star with shadow
+          Frame(
+            width: 200,
+            height: 200,
+            child: Shadow(
+              color: color,
+              radius: radius,
+              x: x,
+              y: y,
+              child: Star(
+                points: 5,
+                strokeLineWidth: 5,
+                strokeColor: Colors.blue,
+              ),
+            ),
+          ),
+
+          // stroked ellipse
+          Frame(
+            width: 200,
+            height: 100,
+            child: Shadow(
+              color: color,
+              radius: radius,
+              x: x,
+              y: y,
+              child: Ellipse(
+                strokeColor: Colors.red,
+                strokeLineWidth: 5,
+              ),
+            ),
+          ),
+        ],
+        spacing: 20,
+      ),
+    );
+  }
+}
+
+class Star extends StatelessWidget {
+  final int points;
+  final double strokeLineWidth;
+  final Color strokeColor;
+
+  const Star({
+    super.key,
+    required this.points,
+    required this.strokeLineWidth,
+    required this.strokeColor,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomPaint(
+      size: Size.infinite,
+      painter: _StarPainter(
+        points: points,
+        strokeLineWidth: strokeLineWidth,
+        strokeColor: strokeColor,
+      ),
+    );
+  }
+}
+
+class _StarPainter extends CustomPainter {
+  final int points;
+  final double strokeLineWidth;
+  final Color strokeColor;
+
+  _StarPainter({
+    required this.points,
+    required this.strokeLineWidth,
+    required this.strokeColor,
+  });
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final path = Path();
+
+    const starExtrusion = 0.5;
+    final angle = pi / points;
+    final center = Offset(size.width / 2, size.height / 2);
+    final radius = min(size.width, size.height) / 2;
+
+    for (int i = 0; i < 2 * points; i++) {
+      final rotation = i * angle;
+      final position = Offset(
+        center.dx + cos(rotation) * radius * (i % 2 == 0 ? 1 : starExtrusion),
+        center.dy + sin(rotation) * radius * (i % 2 == 0 ? 1 : starExtrusion),
+      );
+
+      if (i == 0) {
+        path.moveTo(position.dx, position.dy);
+      } else {
+        path.lineTo(position.dx, position.dy);
+      }
+    }
+
+    path.close();
+
+    final paint = Paint()
+      ..style = PaintingStyle.stroke
+      ..color = strokeColor
+      ..strokeWidth = strokeLineWidth;
+
+    canvas.drawPath(path, paint);
+  }
+
+  @override
+  bool shouldRepaint(_StarPainter oldDelegate) =>
+      oldDelegate.points != points ||
+      oldDelegate.strokeLineWidth != strokeLineWidth ||
+      oldDelegate.strokeColor != strokeColor;
+}

example/lib/shapes/shapes_examples.dart

@@ -4,6 +4,7 @@ import 'package:example/shapes/rectangle.dart';
 import 'package:flutter/cupertino.dart';
 
 import 'ellipse.dart';
+import 'shadow.dart';
 
 class ShapesPage extends StatelessWidget {
   const ShapesPage({super.key});
@@ -14,6 +15,7 @@ class ShapesPage extends StatelessWidget {
       title: "Shapes",
       groups: [
         InventoryGroup(
+          title: "SHAPES",
           items: [
             InventoryItem(
               label: "Rectangle",
@@ -25,6 +27,15 @@ class ShapesPage extends StatelessWidget {
             ),
           ],
         ),
+        InventoryGroup(
+          title: "MODIFIERS",
+          items: [
+            InventoryItem(
+              label: "Shadow",
+              pageBuilder: createDemo(const ShadowDemo()),
+            ),
+          ],
+        ),
       ],
     );
   }