Skip to content

[Request] Add Oval / Ellipse support to Container #103829

@bernaferrari

Description

@bernaferrari

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:

image

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    c: new featureNothing broken; request for a new capabilityc: proposalA detailed proposal for a change to Flutterf: material designflutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions