Flutter-Bounty-Hunters / swift_ui

Flutter port of Swift UI
MIT License
63 stars 4 forks source link

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

Open suragch opened 3 months ago

suragch commented 3 months ago

This PR adds a Shadow widget to mimic the behavior of the SwiftUI .shadow modifier method. The reason for implementing Shadow as a composable Widget rather than a property on a shape is that SwiftUI's shadow is a View modifier method. You can add a shadow to anything in SwiftUI, not just a shape.

You can see the results below. SwiftUI is first and Flutter second:

Screenshot 2024-06-15 at 17 16 10 Screenshot 2024-06-15 at 17 16 22

Because non-rectangular shapes can have shadows, I wasn't able to use Flutter's BoxShadow.

Shadow itself is a composite of a few new widgets:

I haven't exported those widgets yet, but tint is another SwiftUI property, so we may want to export this widget as well in the future.

I discovered I had made a mistake on the Rectangle stroke. It actually is centered on the edge line, not contained completely within the rectangle. I had missed that before because of SwiftUI's clipping behavior. This means that Ellipse and Rectangle have the same stroke behavior. I snuck this fix into this PR since it related to drawing shadows. You can see the width of the rectangle with the thick stroke is wider than the other rectangles. This is the proper behavior:

Screenshot 2024-06-15 at 09 22 02
suragch commented 3 months ago

@matthew-carroll Pinging you on this in case you didn't see it earlier.

suragch commented 2 months ago

@matthew-carroll Ready for another review.