-
Notifications
You must be signed in to change notification settings - Fork 5
[Views] - Implement Shadow widget (resolves #31) #32
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
suragch
wants to merge
16
commits into
Flutter-Bounty-Hunters:main
Choose a base branch
from
suragch:i31_shadow
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from 8 commits
Commits
Show all changes
16 commits
Select commit
Hold shift + click to select a range
34cd533
create swiftui examples for shadow
suragch 41e2fb3
Rectangle stroke is centered on edge, not painted entirely within
suragch f29238e
implement Shadow widget
suragch b49be8e
add Shadow widget examples
suragch 7fee410
redo swiftui examples to demo shadow on arbitrary shapes
suragch cf85281
redo shadow examples for rectangle/ellipse/star (shadow not working o…
suragch 125f40c
fix shadow for non-rectangular shapes
suragch 6b9688f
add golden test for shadows
suragch fefb609
remove child named parameter requirement for swift_ui widgets
suragch 2659e24
remove constructor Dart Doc and improve class Dart Doc
suragch d734f28
fix properties, improve Dart Docs
suragch 8c28f2a
make widget alpha independent of shadow alpha
suragch 2d54b68
update grey and golden for shadow
suragch 1e265a3
add dash_hello image for shadow demos
suragch ae8e149
clarify how shadow is applied to non-rectangular shapes and images wi…
suragch 9583f3b
composable widgets of Shadow are private for now
suragch File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
69 changes: 69 additions & 0 deletions
69
doc_swift_ui_gallery/swift_ui_gallery/swift_ui_gallery/shapes/ShadowExamples.swift
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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() | ||
| } | ||
| } | ||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -52,6 +52,7 @@ class RectangleDemo extends StatelessWidget { | |
| ), | ||
| ), | ||
| ], | ||
| spacing: 20, | ||
| ); | ||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 { | ||
suragch marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| 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; | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.