-
Notifications
You must be signed in to change notification settings - Fork 29.7k
Description
Ellipses (Figma), Ellipitical (Pixelmator), Oval (Flutter) are not the most common feature in the world, but they are pretty useful now and then. There is no easy way to do that in Flutter, unfortunately. A StackOverflow question has 26k views and the official answer is to use ClipOval, which is unknown to many and doesn't play well with borders or other things. What if we could integrate ClipOval inside a Container?
The implementation for this feature is basically:
borderRadius: BorderRadius.all(Radius.elliptical(rect.width, rect.height)
What if you don't have the widget's width/height? Or you don't want to set that value manually always? Or you want the widget to be responsive and grow as other things grow keeping its elliptical shape? I think we could improve this. At first, I started playing with BorderRadius.oval(), but it is complicated as we don't have the width/height at compile time.
Example of the feature, on Figma:
By looking at Flutter source code, two places caught my eyes: BoxShape and ShapeBorder. There is a specific comment in BoxShape saying to not add more shapes to it (use ShapeBorder instead). I believe, however, that Oval could be an exception for that as it fits between Rectangle and Circle. ShapeBorder seems "too high-level", but BoxShape allows us to get the implementation done for everything we want. Container, for this specific feature, seems more important/frequent than Material or other widgets (but we could have ovals there too, why not), as Container is 'more raw' than other widgets.
