-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
- Loading branch information
Showing
8 changed files
with
296 additions
and
2 deletions.
There are no files selected for viewing
This file contains 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
36 changes: 36 additions & 0 deletions
36
doc_swift_ui_gallery/swift_ui_gallery/swift_ui_gallery/shapes/EllipseExamples.swift
This file contains 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,36 @@ | ||
| import SwiftUI | ||
|
|
||
| struct EllipsePage: View { | ||
| var body: some View { | ||
| ScrollView { | ||
| VStack(spacing: 20) { | ||
| // Ellipse with solid fill | ||
| Ellipse() | ||
| .fill(Color.blue) | ||
| .frame(width: 200, height: 100) | ||
|
|
||
| // Ellipse with gradient fill | ||
| Ellipse() | ||
| .fill(LinearGradient(gradient: Gradient(colors: [.yellow, .orange]), startPoint: .leading, endPoint: .trailing)) | ||
| .frame(width: 200, height: 100) | ||
|
|
||
| // Ellipse with solid stroke | ||
| Ellipse() | ||
| .stroke(Color.red, lineWidth: 4) | ||
| .frame(width: 200, height: 100) | ||
|
|
||
| // Ellipse with gradient stroke | ||
| Ellipse() | ||
| .stroke(LinearGradient(gradient: Gradient(colors: [.yellow, .blue]), startPoint: .leading, endPoint: .trailing), lineWidth: 14) | ||
| .frame(width: 200, height: 100) | ||
| }.frame(width: 300) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| struct EllipsePage_Previews: PreviewProvider { | ||
| static var previews: some View { | ||
| EllipsePage() | ||
| } | ||
| } | ||
|
|
This file contains 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 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,58 @@ | ||
| import 'package:flutter/widgets.dart'; | ||
| import 'package:swift_ui/swift_ui.dart'; | ||
|
|
||
| class EllipseDemo extends StatelessWidget { | ||
| const EllipseDemo({ | ||
| super.key, | ||
| }); | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return const VStack( | ||
| [ | ||
| // Ellipse with solid fill | ||
| Frame( | ||
| width: 200, | ||
| height: 100, | ||
| child: Ellipse( | ||
| fillColor: Colors.blue, | ||
| ), | ||
| ), | ||
|
|
||
| // Ellipse with gradient fill | ||
| Frame( | ||
| width: 200, | ||
| height: 100, | ||
| child: Ellipse( | ||
| fillGradient: LinearGradient( | ||
| colors: [Colors.yellow, Colors.orange], | ||
| ), | ||
| ), | ||
| ), | ||
|
|
||
| // Ellipse with solid stroke | ||
| Frame( | ||
| width: 200, | ||
| height: 100, | ||
| child: Ellipse( | ||
| strokeColor: Colors.red, | ||
| strokeLineWidth: 4.0, | ||
| ), | ||
| ), | ||
|
|
||
| // Ellipse with gradient stroke | ||
| Frame( | ||
| width: 200, | ||
| height: 100, | ||
| child: Ellipse( | ||
| strokeGradient: LinearGradient( | ||
| colors: [Colors.yellow, Colors.blue], | ||
| ), | ||
| strokeLineWidth: 14.0, | ||
| ), | ||
| ), | ||
| ], | ||
| spacing: 20, | ||
| ); | ||
| } | ||
| } |
This file contains 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 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 |
|---|---|---|
| @@ -1,10 +1,136 @@ | ||
| import 'package:flutter/widgets.dart'; | ||
|
|
||
| /// An elliptical shape whose width and height match size of the parent | ||
| class Ellipse extends StatelessWidget { | ||
| const Ellipse({super.key}); | ||
| const Ellipse({ | ||
| super.key, | ||
| this.fillColor, | ||
| this.fillGradient, | ||
| this.strokeColor, | ||
| this.strokeGradient, | ||
| this.strokeLineWidth = 1.0, | ||
| }); | ||
|
|
||
| /// A color used for painting the interior of the ellipse. | ||
| /// | ||
| /// This is an alternative to [fillGradient]. | ||
| final Color? fillColor; | ||
|
|
||
| /// A gradient used for painting the interior of the ellipse. | ||
| /// | ||
| /// This is an alternative to [fillColor]. | ||
| final Gradient? fillGradient; | ||
|
|
||
| /// A color used for painting the outline of the ellipse. | ||
| /// | ||
| /// This is an alternative to [strokeGradient]. | ||
| final Color? strokeColor; | ||
|
|
||
| /// A gradient used for painting the outline of the ellipse. | ||
| /// | ||
| /// This is an alternative to [strokeColor]. | ||
| final Gradient? strokeGradient; | ||
|
|
||
| /// The width of the stroke used to paint the outline of the ellipse. | ||
| /// | ||
| /// The stroke line is centered along the edge of the ellipse. Half of | ||
| /// [strokeLineWidth] is painted outside of the ellipse and half inside. | ||
| /// | ||
| /// The default is 1.0. | ||
| final double strokeLineWidth; | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return const Placeholder(); | ||
| return CustomPaint( | ||
| size: Size.infinite, | ||
| painter: _EllipsePainter( | ||
| fillColor: fillColor, | ||
| fillGradient: fillGradient, | ||
| strokeColor: strokeColor, | ||
| strokeGradient: strokeGradient, | ||
| strokeLineWidth: strokeLineWidth, | ||
| ), | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| class _EllipsePainter extends CustomPainter { | ||
| _EllipsePainter({ | ||
| required this.fillColor, | ||
| required this.fillGradient, | ||
| required this.strokeColor, | ||
| required this.strokeGradient, | ||
| required this.strokeLineWidth, | ||
| }); | ||
|
|
||
| final Color? fillColor; | ||
| final Gradient? fillGradient; | ||
| final Color? strokeColor; | ||
| final Gradient? strokeGradient; | ||
| final double strokeLineWidth; | ||
|
|
||
| @override | ||
| void paint(Canvas canvas, Size size) { | ||
| _paintFill(canvas, size); | ||
| _paintStroke(canvas, size); | ||
| } | ||
|
|
||
| void _paintFill(Canvas canvas, Size size) { | ||
| if (fillColor != null) { | ||
| _paintSolidFill(canvas, size); | ||
| } else if (fillGradient != null) { | ||
| _paintGradientFill(canvas, size); | ||
| } | ||
| } | ||
|
|
||
| void _paintSolidFill(Canvas canvas, Size size) { | ||
| final rect = Rect.fromLTWH(0, 0, size.width, size.height); | ||
| final paint = Paint() | ||
| ..style = PaintingStyle.fill | ||
| ..color = fillColor!; | ||
| canvas.drawOval(rect, paint); | ||
| } | ||
|
|
||
| void _paintGradientFill(Canvas canvas, Size size) { | ||
| final rect = Rect.fromLTWH(0, 0, size.width, size.height); | ||
| final paint = Paint() | ||
| ..style = PaintingStyle.fill | ||
| ..shader = fillGradient!.createShader(rect); | ||
| canvas.drawOval(rect, paint); | ||
| } | ||
|
|
||
| void _paintStroke(Canvas canvas, Size size) { | ||
| if (strokeColor != null) { | ||
| _paintSolidStroke(canvas, size); | ||
| } else if (strokeGradient != null) { | ||
| _paintGradientStroke(canvas, size); | ||
| } | ||
| } | ||
|
|
||
| void _paintSolidStroke(Canvas canvas, Size size) { | ||
| final rect = Rect.fromLTWH(0, 0, size.width, size.height); | ||
| final paint = Paint() | ||
| ..style = PaintingStyle.stroke | ||
| ..color = strokeColor! | ||
| ..strokeWidth = strokeLineWidth; | ||
| canvas.drawOval(rect, paint); | ||
| } | ||
|
|
||
| void _paintGradientStroke(Canvas canvas, Size size) { | ||
| final rect = Rect.fromLTWH(0, 0, size.width, size.height); | ||
| final paint = Paint() | ||
| ..style = PaintingStyle.stroke | ||
| ..shader = strokeGradient!.createShader(rect) | ||
| ..strokeWidth = strokeLineWidth; | ||
| canvas.drawOval(rect, paint); | ||
| } | ||
|
|
||
| @override | ||
| bool shouldRepaint(covariant _EllipsePainter oldDelegate) { | ||
| return oldDelegate.fillColor != fillColor || | ||
| oldDelegate.fillGradient != fillGradient || | ||
| oldDelegate.strokeColor != strokeColor || | ||
| oldDelegate.strokeGradient != strokeGradient || | ||
| oldDelegate.strokeLineWidth != strokeLineWidth; | ||
| } | ||
| } |
This file contains 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,58 @@ | ||
| import 'package:flutter/widgets.dart'; | ||
| import 'package:flutter_test/flutter_test.dart'; | ||
| import 'package:golden_toolkit/golden_toolkit.dart'; | ||
| import 'package:swift_ui/swift_ui.dart'; | ||
|
|
||
| void main() { | ||
| group("Shapes > Ellipse >", () { | ||
| testGoldens("smoke test", (widgetTester) async { | ||
| final builder = GoldenBuilder.grid(columns: 2, widthToHeightRatio: 1) | ||
| ..addScenario( | ||
| 'Solid fill', | ||
| const Frame( | ||
| width: 200, | ||
| height: 100, | ||
| child: Ellipse( | ||
| fillColor: Colors.blue, | ||
| ), | ||
| ), | ||
| ) | ||
| ..addScenario( | ||
| 'Gradient fill', | ||
| const Frame( | ||
| width: 200, | ||
| height: 100, | ||
| child: Ellipse( | ||
| fillGradient: LinearGradient( | ||
| colors: [Colors.yellow, Colors.orange], | ||
| ), | ||
| ), | ||
| ), | ||
| ) | ||
| ..addScenario( | ||
| 'Solid stroke', | ||
| const Frame( | ||
| width: 200, | ||
| height: 100, | ||
| child: Ellipse( | ||
| strokeColor: Colors.blue, | ||
| ), | ||
| ), | ||
| ) | ||
| ..addScenario( | ||
| 'Gradient stroke', | ||
| const Frame( | ||
| width: 200, | ||
| height: 100, | ||
| child: Ellipse( | ||
| strokeGradient: LinearGradient( | ||
| colors: [Colors.yellow, Colors.orange], | ||
| ), | ||
| ), | ||
| ), | ||
| ); | ||
| await widgetTester.pumpWidgetBuilder(builder.build()); | ||
| await screenMatchesGolden(widgetTester, 'ellipse_smoke-test'); | ||
| }); | ||
| }); | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.