[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,70 @@
+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)
+
+                Image("dash_hello")
+                    .resizable()
+                    .aspectRatio(contentMode: .fit)
+                    .shadow(color: .gray, radius: 10, x: 10, y: 10)
+                    .frame(width: 200, height: 200)
+
+            }.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/main.dart

@@ -34,7 +34,6 @@ class NavigationViewState extends State<NavigationView> {
           height: 54,
           color: const Color(0xFFFFFF00),
           child: Center(
-            // child: LateBoundBuilder(
             child: LateBoundBuild(
               builder: (context) {
                 final title = NavigationView.of(context).title ?? "DEFAULT TILE";

example/lib/shapes/ellipse.dart

@@ -14,7 +14,7 @@ class EllipseDemo extends StatelessWidget {
         Frame(
           width: 200,
           height: 100,
-          child: Ellipse(
+          Ellipse(
             fillColor: Colors.blue,
           ),
         ),
@@ -23,7 +23,7 @@ class EllipseDemo extends StatelessWidget {
         Frame(
           width: 200,
           height: 100,
-          child: Ellipse(
+          Ellipse(
             fillGradient: LinearGradient(
               colors: [Colors.yellow, Colors.orange],
             ),
@@ -34,7 +34,7 @@ class EllipseDemo extends StatelessWidget {
         Frame(
           width: 200,
           height: 100,
-          child: Ellipse(
+          Ellipse(
             strokeColor: Colors.red,
             strokeLineWidth: 4.0,
           ),
@@ -44,7 +44,7 @@ class EllipseDemo extends StatelessWidget {
         Frame(
           width: 200,
           height: 100,
-          child: Ellipse(
+          Ellipse(
             strokeGradient: LinearGradient(
               colors: [Colors.yellow, Colors.blue],
             ),

example/lib/shapes/rectangle.dart

@@ -14,7 +14,7 @@ class RectangleDemo extends StatelessWidget {
         Frame(
           width: 200,
           height: 100,
-          child: Rectangle(
+          Rectangle(
             fillColor: Colors.blue,
           ),
         ),
@@ -23,7 +23,7 @@ class RectangleDemo extends StatelessWidget {
         Frame(
           width: 200,
           height: 100,
-          child: Rectangle(
+          Rectangle(
             fillGradient: LinearGradient(
               colors: [Colors.yellow, Colors.orange],
             ),
@@ -34,7 +34,7 @@ class RectangleDemo extends StatelessWidget {
         Frame(
           width: 200,
           height: 100,
-          child: Rectangle(
+          Rectangle(
             strokeColor: Colors.red,
             strokeLineWidth: 4.0,
           ),
@@ -44,14 +44,15 @@ class RectangleDemo extends StatelessWidget {
         Frame(
           width: 200,
           height: 100,
-          child: Rectangle(
+          Rectangle(
             strokeGradient: LinearGradient(
               colors: [Colors.yellow, Colors.blue],
             ),
             strokeLineWidth: 14.0,
           ),
         ),
       ],
+      spacing: 20,
     );
   }
 }