Skip to content

BorderRadius is now massively changed across the board #140118

@mark8044

Description

@mark8044

Is there an existing issue for this?

Steps to reproduce

It looks like in one of today's updates in master channel all the border radius have become significantly changed
Looks like it happened somewhere between these commits: 3b370c8539a4566d1ec1145000ebcd134c34552b and da202622763c4f25155784d066503b483eba92bc

Possible to do with flutter/engine#48919 ? I only mention it because I see the word round in the title?

Is this intended or a break? It seems like people will have to make significant changes across the board to their code, so its important to know if this is intended and then we can make changes

The change:
Previously (in all versions of flutter I can remember), borderRadius on a corner was set on a per corner basis, so that we would get pill shaped object. Overrunning (setting border radius way way to high) would still goto an absolute limit on any given corner. This is logical and is how CSS works when defining a set pixel/em border-radius.

NOW, borderRadius seems to calculate based on the size of the entire Container or element. Oversiing a border radius will no longer result in a pill, but an oval type shape. CSS also works like this when using a % instead of a pixel count, such as border-radius:50%. This is fine and can be accounted for, assuming this was intended and not a mistake

All my designs and I bet most everyone else has accounted for a per corner border radius, so likely everyone will need to make changes, but before doing such will be good to see if its on purpose.

This is with using BorderRadius.circular, so I guess it kind of makes sense given the name, but it does not follow the previous way

Container(
     height:40,
     padding: const EdgeInsets.fromLTRB(20, 8, 20, 8),
     decoration:BoxDecoration(
     borderRadius: BorderRadius.circular(10),
     color: const Color.fromRGBO(0, 0, 0, 0.1)
    ),
    child: const Text('Retry'))

Example 1 - Previous

With all versions prior to today:

Flutter 3.18.0-11.0.pre.12 • channel master • https://github.com/flutter/flutter.git
Framework • revision 11a9cb7029 (22 hours ago) • 2023-12-12 20:09:13 -0800
Engine • revision 9039ac78cf
Tools • Dart 3.3.0 (build 3.3.0-219.0.dev) • DevTools 2.30.0

Screen Shot 2023-12-13 at 6 03 38 PM

Example 2 - New

NOW with

Flutter 3.18.0-11.0.pre.32 • channel master • https://github.com/flutter/flutter.git
Framework • revision 3b370c8539 (72 minutes ago) • 2023-12-14 01:55:57 +0100
Engine • revision 45b95f264d
Tools • Dart 3.3.0 (build 3.3.0-219.0.dev) • DevTools 2.30.0

Screen Shot 2023-12-13 at 6 09 57 PM

Expected results

BorderRadius follows the way it has been for a very long time

Actual results

Big change in the way borderRadius is computed

Code sample

Code sample
Container(
                                    height:30,
                                     padding: const EdgeInsets.fromLTRB(20, 8, 20, 8),
                                     decoration:BoxDecoration(
                                         borderRadius: BorderRadius.circular(10),
                                         color: const Color.fromRGBO(0, 0, 0, 0.1)
                                     ),
                                     child: const Text('Retry'))

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

Logs
[Paste your logs here]

Flutter Doctor output

Doctor output
[Paste your output here]

Metadata

Metadata

Assignees

No one assigned

    Labels

    c: regressionIt was better in the past than it is nowe: impellerImpeller rendering backend issues and features requestsengineflutter/engine related. See also e: labels.r: fixedIssue is closed as already fixed in a newer versionteam-engineOwned by Engine team

    Type

    No type

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions