A study and comparison of different Squircle ShapeBorder options in Flutter, using a Flutter app to compare available Squircle shapes visually.
See CHANGELOG for a list of updates to this study and Flutter squircle demo app.
To run and build this demo you must use Flutter Channel stable, 3.32.0 or later.
A web version of the latest Squircle Study companion app can be found here https://rydmike.com/squircle/latest. Please note that the Flutter SDK RoundedSuperellipseBorder does not yet support WEB. If used on WEB it draws ordinary circular rounded corners instead.
Use the new RoundedSuperellipseBorder shape in Flutter SDK. It is the only super ellipse shape that matches the one used in iOS on UI elements. It is also the only known shape that can handle all edge cases correctly and supports all Flutter ShapeBorder features correctly.
The RoundedSuperellipseBorder landed in Flutter 3.32.0 stable. You can find Squircles and the new RoundedSuperellipseBorder mentioned in the Google I/O livestream here https://www.youtube.com/live/-IThZH0rStY?t=6752s. Where this study and its findings were mentioned, by referencing my X/Tweet thread https://x.com/RydMike/status/1909592718696644961 about it.
Now that it has landed in Flutter stable, please do not using other Flutter 3rd party squircle shape you may have used before. Consider migrating to RoundedSuperellipseBorder` as soon as possible. It is the only shape that has GPU implementation support in Flutter SDK, so it should not introduce any significant performance degradation when used. Plus it is the most accurate and functionally sound implementation of the iOS squircle shape in the Flutter world.
The new RoundedSuperellipseBorder shape still has a limitation, it does not work on WEB, it only support VM builds at this stage. On web builds it just draws a circular rounded rectangle, using RoundedRectangleBorder, nothing will break but your wont be getting a squircle shape . Hopefully this will be addressed later.
For years and years, there was no rounded rectangle in Flutter that would be verified to be a good match for the rounded rectangle shape created e.g., in Swift-UI with RoundedRectangle(cornerRadius: myRadius, style: .continuous) that would also be without issues in Flutter. This type of rounded rectangle with continuous curvature is also known as a super ellipse shape or a squircle.
Historically a package called figma_squircle was used as the reference Squircle shape in Flutter. This package was used and regarded by many as the best Flutter approximation of the iOS Squircle shape. To verify this, it should be compared with actual iOS SwiftUI produced shapes. As a starting point, it was used for comparisons and findings presented in this study.
With the Flutter squircle_study app in this repo used for this study, you can cross-compare any two selected shapes at different sizes and curvature, with or without border.
In the Flutter GitHub repo, the issue #91523 was used to track the implementation of an iOS matching continuously rounded rectangle. It is also stated in Flutter issue #13914 from January 5, 2018, that Flutter Cupertino button should use a squircle as its shape and not a circular rounded rectangle.
In RoundSuperellipse PR #164755, a squircle shape path landed in the Flutter engine. It is called "RoundSuperellipse". At first it was tested on clipping a Cupertino Dialog, by adding a clipper to Flutter and using it on the alert dialog. See PR# 161111 Add clipRSuperellipse, and use them for dialogs.
On April 8, 2025 the following PR was merged into the Flutter master channel: Add RoundedSuperellipseBorder and apply it to CupertinoActionSheet #166303. This PR adds a new ShapeBorder called RoundedSuperellipseBorder to the Flutter SDK. It is a new shape that implements the iOS super ellipse shape. Version 1.4.0 of this study adds it to this study and compares it with other shapes.
On May 21, 2025 the RoundedSuperellipseBorder was added to the Flutter stable channel in version 3.32.0. It is now available for all developers to use in their Flutter applications. The shape has also been added to Flutter's iOS Cupertino widget implementations where appropriate. The RoundedSuperellipseBorder is designed to provide a very accurate representation of the iOS squircle shape, allowing for better visual consistency across platforms. It is expected to enhance the UI experience in Flutter applications that require rounded shapes.
In this study we can observe that this new shape, thew RoundedSuperellipseBorder works correctly when the radius gets closer to the stadium radius for the shape, which is short side/2. As shown here, the FigmaSquircle shape changes to approach a circular border when the border radius exceeds 0.5x of the shape's stadium radius. And the SquircleBorder stops changing shape when the radius exceeds 0.65x of the shape's stadium radius. The new RoundedSuperellipseBorder is the only known shape to handle this correctly. It does not break down at all. It can be used for any shape aspect ratio and radius up to the shape's stadium radius and beyond it too, without any issues.
In previous versions of the study, only the SquircleStadiumBorder shape could handle drawing a continuous Stadium (pill) shape. All other shapes failed totally at this. As shown the new RoundedSuperellipseBorder excels at this too.
The SquircleStadiumBorder can actually only handle this well when the long/short side aspect ratio is > 1.4. Smaller than that, it starts showing edge artifacts. At ratio 1.26 it stops trying, it no longer uses the shortest side and locks it to whatever value it has at ratio 1.26, to keep a shape that can have stadium continuous curvature. As we are getting closer to AR 1, it should become a circle and not a squircle stadium shape, but the paint algo cannot handle that transition, so it just stops.
The new Flutter "RoundedSuperellipseBorder" handles all edge cases really well and draws a beautiful continuous super ellipse shape, at all aspect ratios.
The new RoundedSuperellipseBorder shape in Flutter SDK is the only super ellipse shape that is a match for the one used in iOS on UI elements. It is also the only known shape that can handle all edge cases correctly, implements ShapeBorder features correctly (copyWith, lerp and strokeAlign) and it has GPU implementation support in Flutter SDK to ensure good performance.
The ContinuousRectangleBorder in Flutter SDK is a super ellipses shape, but it is not a match for the one used in iOS on UI elements.
The package figma_squircle is an implementation of the squircle used in Figma. The Figma Squircle claims to be a match for the iOS shape when used with smoothing factor 0.6. It may be a good match when used border radius is lower than half of the shape's stadium radius, this should still be verified. At a higher radius than 0.5x of the shape's stadium radius, meaning shorter side/2, the shape starts to approach standard circular border curvature. At stadium (also sometimes referred to as capsule or pill) radius, it is identical to a circular stadium shape. Which is not a continuously rounded stadium shape. The shape also breaks down at border radius higher than the shape's stadium radius.
There is a less known package called smooth_corner, that produces identical shapes to figma_squircle. It does not break down at border radius higher than the shape's stadium radius. However, it does not lerp animate radius and border width changes.
The performance impact of using any other shape than RoundedRectangleBorder has been mentioned, at least in X/Twitter posts and comments. They typically mention the FigmaSquircle, but also the SDK ContinuousRectangleBorder, but more often the figma_squircle package. The performance impact of the shapes should be studied further. See Appendix A at the end of the study report for more info about reported performance issue.
Only shapes RoundedSuperellipseBorder (NEW) RoundedRectangleBorder, StadiumBorder, BeveledRectangleBorder and the updated SquircleBorder and SquircleStadiumBorder handle strokeAlign on the used BorderSide correctly.
Some shapes may not implement linear interpolation correctly, and none of them implement shape transform from one ShapeBorder to other Flutter SDK ShapeBorders, like most Flutter SDK ShapeBorders do. A proper Flutter iOS squircle shape should do all of these things correctly.
This demo allows you to visually compare the difference or similarity between different hyper ellipses, or so-called Squircle border rounding on rectangles.
The Shape options you can compare with this squircle_study app are:
- Circular aka RoundedRectangleBorder from: Flutter SDK
- RoundedSuperellipseBorder from Flutter SDK (master)
- ContinuousRectangleBorder from Flutter SDK
- ContinuousRectangleBorder x 2.3529 from Flutter SDK x factor
- SquircleBorder revived from Flutter rejected PR code
- FigmaSquircle from package figma_squircle
- SmoothCorner from package smooth_corner
- CupertinoSquircleBorder aka CupertinoCorners from package cupertino_rounded_corners
- SuperellipseShape from package superellipse_shape
- StadiumBorder from: Flutter SDK
- SquircleStadiumBorder revived from Flutter rejected PR
- SimonSquircleBorder from Slightfoot gist
- BeveledRectangleBorder from Flutter SDK
All are not hyper ellipses or squircles, but included for comparison reasons.
Studied Squircle like Flutter ShapeBorder implementations
Below we make quick overview of the different shapes and their curvature. The shapes are compared at different border radius, from very low to very high. The border radius is set as a percentage of the shape's stadium radius (shorter side/2).
At relatively very low border radius it can be difficult to visually see any difference between the shapes that tries to implement the iOS squircle and just a circular border radius.
As we increase the relative border radius, we can start to see a difference between the shapes that try to implement the iOS squircle and just circular rounded rectangle. The FigmaSquircle, SmoothCorner, SquircleBorder and the new RoundedSuperellipseBorder all look very similar and we can already see and often also somehow "feel" the difference to the just circular RoundedRectangleBorder.
As we increase the relative border radius even further, we can clearly see and feel the differences between the shapes that try to implement the iOS squircle and just circular rounded rectangle. The FigmaSquircle, SmoothCorner, SquircleBorder and the new RoundedSuperellipseBorder all still look very similar and we can clearly observe the difference to the circular RoundedRectangleBorder. The continuous curvature look softer and friendlier.
At the mid point to stadium radius we can clearly observe the differences between the shapes that try to implement the iOS squircle and just circular rounded rectangle. The FigmaSquircle, SmoothCorner, SquircleBorder and the new RoundedSuperellipseBorder all still look very similar and we can clearly observe the difference to the circular RoundedRectangleBorder. We can also observe that the new RoundedSuperellipseBorder seem to be a bit smoother than the others.
At a very high relative border radius we can see some interesting differences, the SquircleBorder has as later shown in study stopped responding to the additional curvature, while the FigmaSquircle and SmoothCorner are approaching a circular border. The RoundedSuperellipseBorder is the only one that keeps the continuous curvature correctly.
At the stadium radius, the FigmaSquircle and SmoothCorner are identical to a circular stadium shape. The SquircleBorder has stopped responding to the additional curvature at around 0.65 of the stadium radius. The RoundedSuperellipseBorder is the only one that keeps the continuous curvature correctly and becomes a stadium shape. The SquircleStadiumBorder is also a reasonably correct iOS stadium shape, but compared to the RoundedSuperellipseBorder it has some edge artifacts. There are also some other minor differences that we will look at closer further below.
Below we take a closer look at them all, comparing them all to the previous reference shape FigmaSquircle from the package figma_squircle. For the new RoundedSuperellipseBorder we add important reference comparisons and edge case demos.
The standard circular rounded rectangle border shape with an outline, provided by Flutter SDK.
- Name: RoundedRectangleBorder
- From Flutter SDK
- Outline border stroke align correct: YES
- Shape lerp animates correctly: YES
- Shape can break down: NO
- Correctly stays at circular stadium shape when radius exceeds its stadium radius.
The difference between Circular and FigmaSquircle is subtle, but still visible to a sharp and keen designer eye. At a border radius < 0.5 times (in the example 96 dp) of the stadium radius (stadium radius would be 200 in the example below), we can see a subtle but clear difference:
ShapeBorder RoundedRectangleBorder
It is more obvious when zoomed in:
ShapeBorder RoundedRectangleBorder, zoomed for a closer look
The difference between a standard circular border and the FigmaSquircle gets lower as the radius increases, and we get closer to the stadium radius.
ShapeBorder RoundedRectangleBorder at 0.75x of stadium radius
When zoomed, it is even more obvious that there is hardly any difference at 0.75 times what would be a stadium border.
ShapeBorder RoundedRectangleBorder at 0.75x of stadium radius, zoomed for a closer look
We will se this effect further when comparing with the circular StadiumBorder. It looks like the FigmaSquircle does not implement any continuous border effect the closer we get to the stadium radius, and none at all at stadium radius. It is unknown if this is correct behavior, compared to the desired actual iOS Squircle border, but it seems unlikely that it would be.
At a radius equal to or greater than the shape's stadium radius, the RoundedRectangleBorder produces a StadiumBorder:
ShapeBorder RoundedRectangleBorder when radius equals stadium radius is the same as a StadiumBorder
If FigmaSquircle at smoothing 0.6 is a correct representation of the iOS Swift-UI Squircle, then Circular RoundedRectangleBorder is NOT an acceptable compromise if high fidelity is desired at mid-border radius. For low fidelity it may be acceptable, but keen eyes will feel that something is off.
We also have a first indication that maybe the FigmaSquircle is not a correct representation of the Swift-UI squircle at border radius approaching or equal to stadium radius, since it then becomes equal to a circular stadium border.
The new RoundedSuperellipseBorder shape in Flutter SDK is the only super ellipse shape that is a very close match for the one used in iOS on UI elements. It is also the only known shape that can handle all edge cases correctly and supports all Flutter ShapeBorder features correctly.
- Name: RoundedSuperellipseBorder
- From Flutter SDK
- Outline border stroke align correct: YES
- Shape lerp animates correctly: YES
- Shape can break down: NO
- Handles any aspect ratio of the shape correctly
- Correctly stays at squircle stadium shape when radius exceeds its stadium radius.
Below we see that the RoundedSuperellipseBorder is pretty identical to the FigmaSquircle at border radius up to half of the stadium radius.
The same applies when comparing to SquircleBorder, which at this radius is pretty identical to the FigmaSquircle so it also matches the RoundedSuperellipseBorder.
When we increase the border radius to 80% (160dp in this case) we observe that the RoundedSuperellipseBorder maintains its shape integrity while the FigmaSquircle approaches the characteristics of a circular border.
We can also see that since we are at higher border radius than 0.65x of the stadium radius, where the SquircleBorder stopped responding to the additional curvature, that it no longer has the desired curvature.
When we use the stadium border radius, we can see that the RoundedSuperellipseBorder maintains its shape integrity while the FigmaSquircle is identical to circular stadium shape.
There is no point in comparing this to the SquircleBorder, since it has already been shown that it does not respond to the additional curvature at higher border radius.
It is however very interesting to compare the RoundedSuperellipseBorder to the SquircleStadiumBorder. We can see that both have squircle like stadium shape, but the RoundedSuperellipseBorder has a smoother and more continuous curvature. The SquircleStadiumBorder has some edge artifacts that are not present in the RoundedSuperellipseBorder.
Below we revert the filled and outline shape selections to take another view at the differences.
We can also check that the RoundedSuperellipseBorder does not break down at higher border radius. It handles any aspect ratio of the shape correctly and transitions smoothly via a circle shape, something that the SquircleStadiumBorder does not do.
superellipse_demo.mov
The RoundedSuperellipseBorder provides a new Flutter built-in approach to achieving the desired squircle shape, ensuring that all visual and functional aspects align with current iOS shape curvature standards.
The RoundedSuperellipseBorder is a significant advancement in achieving a true iOS like squircle shape in Flutter, making it the preferred and only relevant choice for developers aiming for high fidelity of iOS like shapes in their designs.
The continuous rounded rectangle border shape is provided by Flutter SDK. It was supposed to bring the iOS squircle border to Flutter, but the implementation is very far from it.
- Name: ContinuousRectangleBorder
- From Flutter SDK
- Outline border stroke align correct: NO
- ISSUE: Does center stroke align regardless of what BorderSide uses, that actually defaults to inside.
- TODO: Raise Flutter SDK issue.
- Shape lerp animates correctly: YES
- Shape can break down: YES
- ISSUE: The source code mentions limit checks to prevent the
ContinuousRectangleBorderto get what it calls a "TIE-fighter" shape. In this demo, we can still observe the TIE-fighter shape at higher border radius. The attempt to prevent this shape is thus not completely successful. - TODO: Maybe raise a Flutter SDK issue.
- ISSUE: The source code mentions limit checks to prevent the
- Other issues
- It does not have a Stadium border option.
The difference between ContinuousRectangleBorder and FigmaSquircle is very significant:
ShapeBorder ContinuousRectangleBorder
At high border radius, shown below, the ContinuousRectangleBorder creates a TIE-fighter shape. This is not desirable.
ShapeBorder ContinuousRectangleBorder getting TIE-fighter shape
If FigmaSquircle at smoothing 0.6 is a correct representation of the iOS Swift-UI Squircle, then ContinuousRectangleBorder is NOT at all an acceptable option.
The performance impact of the ContinuousRectangleBorder over RoundedRectangleBorder has also been mentioned as an issue. Performance impacts when using anything else than RoundedRectangleBorder should be studied further.
A Flutter continuous rounded rectangle border shape using radius multiplied with 2.3529. It is mentioned in a Flutter issue that a ContinuousRectangleBorder that has its border radius multiplied with 2.3529 becomes close to an iOS squircle.
The mentioned claim of fit with iOS border is in issue 91523 where it is said "Currently,
ContinuousRectangleBorderrequires aborderRadiusof ~24 to resemble theRoundedRectanglewith acornerRadiusof ~10.2". So basically 24/10.2 = 2.3529, as used here, should be a match.
- Name: ContinuousRectangleBorder x 2.3529
- From Flutter SDK x factor
- Outline border stroke align correct: NO
- ISSUE: Does center regardless of what BorderSide uses, that actually defaults to inside.
- TODO: Raise Flutter SDK issue.
- Shape lerp animates correctly: YES
- Shape can break down: YES
- ISSUE: The source code mentions limit checks to prevent the
ContinuousRectangleBorderto get what it calls a "TIE-fighter" shape. In this demo, we can still observe the TIE-fighter shape at higher border radius. The attempt to prevent this shape is thus not completely successful. The TIE fighter shape issue occurs earlier since the radiusContinuousRectangleBorderis multiplied by 2.3529. - TODO: Raise Flutter SDK issue.
- ISSUE: The source code mentions limit checks to prevent the
- Other issues
- It does not have a Stadium border option.
- Shape can break down: YES
The difference between ContinuousRectangleBorder x 2.3529 and FigmaSquircle is clear, but not so significant at border radius < 0.5x stadium border.
ShapeBorder ContinuousRectangleBorder x 2.3529 vs. FigmaSquircle at smoothing 0.6
Especially not if we change the smoothness of the FigmaSquircle from 0.6 to maximum 1.0. As shown below, it then becomes an almost perfect match:
ShapeBorder ContinuousRectangleBorder x 2.3529 vs. FigmaSquircle at smoothing 1.0
At higher border radius, e.g., at 0.75x of stadium radius, the gap in visuals becomes more significant and the smoothing factor on FigmaSquircle does not really matter anymore:
ShapeBorder ContinuousRectangleBorder x 2.3529, at 0.75x of its stadium border radius
At this border radius, it might also be the FigmaSquircle that is the poorer squircle shape.
The TIE fighter effect when using ContinuousRectangleBorder x 2.3529 starts already at 0.6 times the stadium radius.
If FigmaSquircle at smoothing 0.6 is a correct representation of the iOS Swift-UI Squircle, then ContinuousRectangleBorder x 2.3529 is NOT at an exact match for it, but it is not a bad Squircle shape.
At border radius of < 0.5 times the shape's stadium radius, and when using smoothness 1.0 for the FigmaSquircle, the ContinuousRectangleBorder x 2.3529 is for practical visual comparisons a fairly good fit.
This shape is based on a PR for a Squircle that was rejected in Flutter SDK. It was discussed here flutter/flutter#27523.
This is a @rydmike code revival of the PR with some minor modifications. Changes include adding BorderSide support, with strokeAlign and supporting slightly higher relative radius in relation to the shape's stadium radius, updated lerp overrides and migration to null-safe code.
- Name: SquircleBorder PR
- From Flutter rejected PR code
- Outline border stroke align correct: YES (in @rydmike version)
- Shape lerp animates correctly: YES (in @rydmike version)
- Shape can break down: YES
- The
SquircleBorderborder has poor behavior with higher border radius, it cannot become a stadium, it stops changing shape at higher relative border radius. Thus, it is on purpose limited to 0.65x of the shape's stadium radius (shorter side/2) in this version, since it breaks down after that. One solution might be to switch to a circular border radius like Figma Squircle and Smooth Corner both do at higher relative border radius.
- The
The difference between SquircleBorder PR and FigmaSquircle is none existing at border radius < 0.49 of the stadium radius, when using FigmaSquircle with smoothness 0.6.
ShapeBorder SquircleBorder PR at radius < 0.5x of its stadium radius
The SquircleBorder PR stops responding to border radius increases when the radius is >= 0.65x the stadium radius (shorter side/2) and can not be used for Squircle shapes where the radius is from 0.65x to 1x of the stadium radius. Up and until that radius, it works very well and matches the FigmaSquircle.
On the other hand, it has also been shown that for a radius range that exceeded 0.5x stadium radius, that the FigmaSquircle gets closer and closer to the plain circular border represented by the RoundedRectangleBorder.
ShapeBorder SquircleBorder PR at radius < 0.75x of its stadium radius
It could also be argued that the SquircleBorder PR refrains from drawing shapes for a radius for which it no longer produces a correct squircle result. Whereas, the FigmaSquircle then instead approaches a vanilla circular border, as the stadium radius is approached.
If FigmaSquircle at smoothing 0.6 is a correct representation of the iOS Swift-UI Squircle, then SquircleBorder PR is an acceptable option at lower radius than 0.65x Stadium radius. At higher border radius it visually stops changing it radius, since it cannot draw a squircle shape any higher radius than that.
A Flutter package implementation of Figma corner smoothing.
This package is used and regarded by many as one of the best approximations of the iOS squircle shape. It is an implementation of the FigmaSquircle shape. It has a smoothness factor from 0.0 to 1.0, at value 0.6 the Figma shape claims to be identical to the iOS squircle shape.
At same smoothness, this figma_squircle package should also then be identical to the iOS squircle. To verify this, it should be compared to actual iOS SwiftUI produced shapes.
In this study, we use it as a reference to show how others deviate from it.
- Name: FigmaSquircle
- From package figma_squircle
- Outline border stroke align correct: NO
- ISSUE: Does center regardless of what BorderSide uses, that actually defaults to inside.
- Shape lerp animates correctly: YES
- Shape can break down: NO
- The shape used to break down with border radius exceeding the shape stadium radius. But it no longer does, in at least version 0.6.3 and later.
The FigmaSquircle breaks down when set border radius exceeds its Stadium radius.
ShapeBorder FigmaSquircle (SmoothRectangleBorder) at radius > than its stadium radius, shape breaks down
For border radius > 0.6x and <= 1.0x of the shape's stadium radius (shorter side/2), the FigmaSquircle gets closer to an ordinary circular rounded rectangle border. At a border radius of > 0.9x and <= 1.0x of the shape's stadium radius, we can no longer observe any practical difference from a normal circular border made with RoundedRectangleBorder:
ShapeBorder FigmaSquircle (SmoothRectangleBorder) at radius 0.9x of its stadium radius, pretty identical to circular RoundedRectangleBorder
If FigmaSquircle at smoothing 0.6 is a correct representation of the iOS Swift-UI Squircle, then this is a good choice for fidelity with iOS shapes.
However, FigmaSquircle shape breaks down when the radius exceeds the shape's stadium radius. A good shape algorithm should stay at its equivalent stadium shaped when the stadium radius is exceeded.
It has also been observed that for border radius of > 0.5x and <= 1.0x of the shape's stadium radius (shorter side/2), that the FigmaSquircle shape starts to take the shape of just an ordinary circular rounded rectangle border. It is at this stage unknown if this is correct compared to how actual iOS stadium shapes look. Based on a quick look, it probably is not. This needs to be verified.
The performance impact of the FigmaSquircle has also been mentioned in issues. It should be studied further.
A rectangular border with variable smoothness imitated from Figma.
This is another implementation of the Figma squircle. It appears to be shape wise identical to above FigmaSquircle.
- Name: SmoothCorner
- From package smooth_corner
- Outline border stroke align correct: NO
- ISSUE: Does inside regardless of what BorderSide uses, that actually defaults to inside.
- Shape lerp animates correctly: NO
- ISSUE: The shape and border changes instantly, it appears it does not provide lerp overrides.
- Shape can break down: NO
- Stays correctly shaped when border radius exceeds its stadium radius.
The difference between SmoothCorner and FigmaSquircle appears to be negligible. Visually, the results appear to be identical when using the same smoothness factor. SmoothCorner also supports the smoothness factor that FigmaSquircle has.
ShapeBorder SmoothCorner and FigmaSquircle are visually identical
The SmoothCorner does not break down when border radius exceeds the shape Stadium radius.
ShapeBorder SmoothCorner does not break down like FigmaSquircle at radius > stadium radius
If FigmaSquircle at smoothing 0.6 is a correct representation of the iOS Swift-UI Squircle, then SmoothCorner is correct as well. Since they are identical, SmoothCorner has the same questionable stadium shape as FigmaSquircle.
SmoothCorner has one advantage over FigmaSquircle and that is that shape does not break down when the radius exceeds the shape's stadium radius. This is a nice and desired feature and matches how RoundedRectangleBorder behaves in relations to its StadiumBorder shape, it stays at stadium shape when the stadium radius is exceeded.
The performance of SmoothCorner has no known feedback, since it is not used as much as the FigmaSquircle. Its performance impact should be studied as well.
A widget and border used to make cupertino rounded corners also referred to as squircle, using a bezier path and having the two points in the corners.
- Name: CupertinoSquircleBorder
- From package cupertino_rounded_corners
- Outline border stroke align correct: NO
- ISSUE: Does inside regardless of what BorderSide uses, that actually defaults to inside.
- Shape lerp animates correctly: NO
- ISSUE: The shape and border changes instantly, it appears it does not provide lerp overrides.
- Shape can break down: YES
- ISSUE: Gets same "TIE-fighter" shape as the
ContinuousRectangleBorder. It gets even more pronounced at large border radius. It lacks the attempt of a limiter that theContinuousRectangleBorderhas.
- ISSUE: Gets same "TIE-fighter" shape as the
The CupertinoCorners appears to be visually pretty identical to ContinuousRectangleBorder.
ShapeBorder CupertinoCorners and ContinuousRectangleBorder are visually identical
It has the same TIE-fighter issue too:
ShapeBorder CupertinoCorners has the same TIE-fighter shape breakdown as ContinuousRectangleBorder
At a border radius larger than the shortest side, the TIE-fighter shapes do diverge. The ContinuousRectangleBorder stops taking on increased TIE-fighter shape, but with the CupertinoCorners it becomes even more pronounced and doubled:
ShapeBorder CupertinoCorners TIE-fighter shape gets more aggressive than ContinuousRectangleBorder
There is no reason to use CupertinoCorners over the ContinuousRectangleBorder that exists in the Flutter SDK. It is also as a poor match for the FigmaSquircle as the ContinuousRectangleBorder.
The SuperEllipse is a package for creating superellipse shapes in flutter. A superellipse is a shape constituting a transition between a rectangle and a circle.
- Name: SuperellipseShape
- From package superellipse_shape
- Outline border stroke align correct: NO
- ISSUE: Does center regardless of what BorderSide uses, that defaults to inside.
- Shape lerp animates correctly: NO
- ISSUE: The shape and border changes instantly, it appears it does not provide lerp overrides.
- Shape can break down: YES
- ISSUE: Gets same "TIE-fighter" shape as the
ContinuousRectangleBorder.
- ISSUE: Gets same "TIE-fighter" shape as the
The SuperEllipse appears to be visually pretty identical to ContinuousRectangleBorder.
ShapeBorder SuperEllipse and ContinuousRectangleBorder are visually identical
It has the same TIE-fighter issue too, but unlike CupertinoCorners it is identical to ContinuousRectangleBorder at any given border radius, also very high ones.
ShapeBorder CupertinoSuperEllipse has the same TIE-fighter shape breakdown as ContinuousRectangleBorder
There is no reason to use SuperEllipse over the ContinuousRectangleBorder that exists in the Flutter SDK. It is also as a poor match for the FigmaSquircle as the ContinuousRectangleBorder.
The Flutter standard circular stadium border. It fits a stadium-shaped border, a box with semicircles on the ends, within the rectangle of the widget it is applied to.
- Name: StadiumBorder
- From Flutter SDK
- Outline border stroke align correct: YES
- Shape lerp animates correctly: YES
- Shape can break down: NO
There is NO visible difference between a FigmaSquircle and the standard Flutter SDK circular StadiumBorder when using a border radius that equals the shape's stadium radius.
ShapeBorder StadiumBorder and FigmaSquircle are visually identical
The smoothness factor also has no impact on the FigmaSquircle when the border radius equals the stadium radius.
ShapeBorder StadiumBorder and FigmaSquircle are visually identical, also when taking a zoomed in look
There is no point in using the FigmaSquircle for a stadium shape, it is identical to StadiumBorder at any radius that equals the shape's stadium radius. Already at a radius about 0.6x of the stadium radius, we are beginning to look at negligible visual differences between FigmaSquircle and circular RoundedRectangleBorder.
A PR for a Stadium Squircle that was rejected in Flutter SDK. It was discussed here flutter/flutter#27523. This is a @rydmike code revival of the PR with some modifications. Changes include correct strokeAlign implementation, updated lerp overrides and migration to null-safe code.
- Name: SquircleStadiumBorder
- From Flutter rejected PR
- Outline border stroke align correct: YES (in @rydmike version)
- Shape lerp animates correctly: YES (in @rydmike version)
- Shape can break down: YES
- The shape shrinks its height when width approaches height, and wise versa. This is NOT a desired behavior. An attempt to increase the short/long side ratio at which this starts to happen is made in this modified version, we can go to aspect ratio 0.79. It is not ideal. While we can now approach less rectangular squircle stadium shapes, meaning approach a circular shape, it slightly breaks down and gets a bit skewed at higher aspect ratios. One solution could be to switch to use a circular stadium border at close to equal height and width values. A circle is a continuous curvature, and we are approaching that, which is why the squircle shaped one breaks down. It needs to transition to circular.
The SquircleStadiumBorder PR looks better than FigmaSquircle, when width / height is 1.5 or more.
ShapeBorder SquircleStadiumBorder is a nice looking stadium Squircle than FigmaSquircle
There is a clear difference between SquircleStadiumBorder PR and FigmaSquircle when zoomed:
ShapeBorder SquircleStadiumBorder and FigmaSquircle zoomed in for a closer look
The FigmaSquircle at stadium border is just equal to StadiumBorder. Comparing SquircleStadiumBorder PR to a StadiumBorder is thus the same as comparing it to FigmaSquircle:
ShapeBorder SquircleStadiumBorder vs StadiumBorder is same as comparing to FigmaSquircle
The SquircleStadiumBorder behaves differently for the StadiumBorder when the longer side approaches the same width as the shorter side. The width shrinks, before the shortest and longest sides change, and thus on which edges the stadium curve is drawn on, is swapped. This behavior is not desired, it should behave as the StadiumBorder does.
ShapeBorder SquircleStadiumBorder vs StadiumBorder when edge length changes
The SquircleStadiumBorder PR appears to be the only stadium shape that has a nice looking squircle shape. It may be more correct for an iOS stadium squircle shape, than the FigmaSquircle. This is based on that the FigmaSquircle is just identical to a normal circular stadium border, which an iOS squircle stadium shape may not be.
A squircle implementation by Simon Lightfoot provided in a Gist.
- Name: SimonSquircleBorder
- From Slightfoot gist
- Outline border stroke align correct: NO
- ISSUE: Does center regardless of what BorderSide uses, that defaults to inside.
- Shape lerp animates correctly: YES
- Shape can break down: YES
- ISSUE: The shape cannot handle border radius from 0 to less than 1.0, it draws very odd shapes then.
Draws strange shapes for border radius from 0 to less than 1. The shape is not an iOS squircle, it is entirely different. Examples of produced shapes at different border radius are shown below.
ShapeBorder SimonSquircle at border radius 0.57
ShapeBorder SimonSquircle at border radius 1.36
ShapeBorder SimonSquircle at border radius 2.62
ShapeBorder SimonSquircle at border radius 26
ShapeBorder SimonSquircle at border radius 80
ShapeBorder SimonSquircle at border radius 133
Do not use this shape for iOS squircle shapes, it is not a match.
A rectangular border with flattened or "beveled" corners.
- Name: BeveledRectangleBorder
- From Flutter SDK
- Outline border stroke align correct: NO
- ISSUE: Tries to compensate and adjust for used
strokeAlignbut fails. It draws two joined outlined borders, and the border becomes too thick. The result is that it draws an incorrect border in relation to what is asked in itsborderSide. - TODO: Raise a Flutter SDK issue!.
- ISSUE: Tries to compensate and adjust for used
- Shape lerp animates correctly: YES
- Shape can break down: NO
For obvious reasons, this shape is not compared. It is only included in the study app to show an alternative corner shape that exists, but is rarely used in the Flutter SDK.
Some links to Tweets about performance issues when using Figma Squircle and ContinuousRectangleBorder.
- https://twitter.com/lets4r/status/1630843536739295232?s=20
- https://twitter.com/lets4r/status/1668240937225539586?s=20
- https://twitter.com/andrewpmoore/status/1668223930878836738?s=20
- https://twitter.com/andrewpmoore/status/1668243655314882567?s=20
- https://twitter.com/RydMike/status/1668275006919278592?s=20 Contains a performance comparison recording and link to repo used for it.