-
Notifications
You must be signed in to change notification settings - Fork 29.7k
Description
Is there an existing issue for this?
- I have searched the existing issues
- I have read the guide to filing a bug
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
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
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]
