Closed sroddy closed 2 months ago
Yeah that's not good.
Btw, this issue is happening almost in the same way using native iOS Sdk. The reason there is because of anti-aliasing, I don't know if in this case it's the same.
Oh it's definitely just antialiasing. But we should do better. (For example, maybe we can shrink the background color paint by half the border width or something.)
@Hixie If you shrink the background color paint by half the border width, this will be visible when the border is semi-transparent. You should, instead, shrink it by a single real pixel. The antialias problem always happens within one single real pixel (real device pixel, not logical pixel). That's also why this problem is less visible when the device resolution is larger.
We can't really shrink by one pixel; we don't know what the transformation matrix is.
I see. We've been fixing antialias problems, usually gaps, in some places where there is no transformation, or where we know the transformation. That's not fixable then, since if you do what you said the shrinking of the background color will be visible when the border is semi-transparent. Or maybe you only do this if the border color is not transparent. Or you add a flag.
Yeah...
We might be able to improve this at a lower level maybe, too.
this issue still there, @Hixie did you guys find a fix?
Very annoying bug. I often want to do something like this in order to make circular button but cant do because of this problem with edges:
return InkWell(
onTap: callback,
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
child: Image.asset(
'assets/images/someimage.png',
fit: BoxFit.cover,
),
),
);
Similar thing happens if using flutter's CircleAvatar - there are still image leftovers over Container's border
CircleAvatar(
backgroundImage: AssetImage(
"assets/someimage.png"),
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.white,
width: 5.0,
),
),
),
)
@Hixie I have non-smooth round corners in Android Tablet is it the same issue or I need to open a different issue? Check "Continue button" and the CustomClipper for green arrow and red arrow Tablet Info: API 22, DPI 210, Width 800px, Height 1280
My button code:
RaisedButton(
padding: EdgeInsets.symmetric(
vertical: AppFonts.localePadding(context, 10),
horizontal: AppFonts.localePadding(context, 100)),
color: AppColors.primary,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
side: BorderSide(color: AppColors.textBlack, width: 1,style: BorderStyle.solid)),
child: Text(
'Continue',
style: TextStyle(
color: AppColors.textBlack,
fontSize: AppFonts.localeSize(context, 18),
fontFamily: AppFonts.localeFont(context)),
),
onPressed: () {},
)
Wow! 2 years and still no fix
@Omi231 They are working hard on stabilizing the system and they provide Flutter totally free. Try to investigate the issue and make a pull request you see how much the engine is complex.
I've just faced the same issue...
Easy workaround:
return Container(
width: 28,
height: 28,
decoration: BoxDecoration(
color: Colors.grey, // border color
shape: BoxShape.circle,
),
child: Padding(
padding: EdgeInsets.all(2), // border width
child: Container( // or ClipRRect if you need to clip the content
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.orange, // inner circle color
),
child: Container(), // inner content
),
),
);
Note: inner content won't be clipped. If you want to clip inner content, use ClipRRect
.
Glad to see there was a little activity here two weeks ago. I ran into this issue today while trying to make a simple color picker. Seeing the color outside the white border is kinda ugly. I know I could use the above workaround, but I would not have expected this to be an issue in the first place. I assume it's an anti-aliasing issue and I hope it gets some improvement soon!
Guys please give this issue some priority 😰 It screws almost every design which require rounded corners.
is there any solution?
Hitting this now as well and our "major fintech" app uses a lot of circles, do we know the status?
Hey, the issue still exists in version 2.2 Is there progress on this?
@naamapps check this little hack
Container(
width: 63.0,
height: 63.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Color(0xFFF1DEC1),
width: 3,
)),
child: Container(
width: 60.0,
height: 60.0,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fitWidth,
image: Image.asset(
"assets/images/sample.jpg",
).image),
shape: BoxShape.circle),
),
),
This issue also affects the CircularProgressIndicator
widget. I had to go at it in a different way, I placed a Stack and clipped the widget using a Container
to clip the inside shadow and another CircularProgressIndicator
to clip the outside shadow. It is a bit hard to explain and definitely not a robust way to handle it, but due to urgency, I had to go at it this way.
A couple of improvements that could be done would be to replace the CircularProgressIndicator
used for the outer shadow and the Container
used for the inner shadow with a CustomPaint
or even create a custom clipper for it.
Anyways, you can see a DartPad of the problem here and you can see the code in detail of how I solved it here.
Still exists in 2.5.3 😕 Flutter team, this issue exists for 4 years now. Please can someone take a look at this? Such a small thing but it degrades the UI and makes it unprofessional.
I know there are alternatives and hacks to prevent it from happening but it should anyway be fixed as part of the framework and behave as expected - without the color bleed beyond the borders.
Just had the same problem, with Flutter 2.5.3 Stable Container with a boarder showing a white outline
Shall try a work around!
4 Years, no fix! TY flutter.
wanted to bump this issue.
Container(
margin:
const EdgeInsets.symmetric(horizontal: 16.0),
width: 130,
height: 130,
decoration: BoxDecoration(
image: DecorationImage(
image: CachedNetworkImageProvider(
content.imageUrl),
fit: BoxFit.cover,
),
border: Border.all(width: 4.0),
shape: BoxShape.circle,
)),
I think I can solve this. As 100% of reported issues use no opacity, what if I made the background paint until 50% the side.width
? Is this a good solution? If there is opacity, it paints 100% like before, and the bug happens. But for 90% of people, the bug would be gone forever.
The new StrokeAlign property (the PR is open) would also help you, with a StrokeAlign value of -0.95.
Edit: solved. What do you think?
Edit 2: we might need to add isShadow
to getInnerPath
/getOuterPath
so the paint (color/gradient) gets reduced while the shadow doesn't. Slightly tricky, potentially breaking (goldens), but fairly doable.
Reproduces on the latest versions of flutter.
Almost 7 years have passed, any updates on this? i really love Flutter, but that weird outline makes the UI look so cheap
I made a PR but it broke internal Google stuff that I can't test because I don't have access and I never tried again. Right now with customer testing it would be waaay harder to land this change :(
2017-2024
Any updates?
I gave up because I don't have access to Google internal testing
Maybe SVG as alternative?
Well, 1) flutter doesn't support svg, 2) you don't want this to happen in basic shapes.
Right now with customer testing it would be waaay harder to land this change :(
FWIW I doubt customer testing will add much to the difficulty of fixing this.
Failures in Google internal tests are a bummer, though.
OTOH I took a look just now at the previous PR, and it reads like it got pretty close to merge — in particular it seems like the Google internal changes were deemed to be OK: https://github.com/flutter/flutter/pull/122317#issuecomment-1526027980
So for anyone who wants to try to further take this forward (whether @bernaferrari again or someone else), I think it may not be a lot of work to start from #122317, rebase it, handle the couple of nits starting at https://github.com/flutter/flutter/pull/122317#pullrequestreview-1489212518 , and get it merged.
The issue was that Google testing problem seemed bad (it was affecting some apparently unintended things) and I have no way to debug. I can submit again if you want to debug for me, or point me in the right direction.
The issue with customer testing is with super apps and Cupertino macOS testing that got a lot of bounding checks, so I think they might be affected and the only way to "solve" would be commenting the test, landing this, fixing the test. There is no partial migration.
For Google testing it is going to fail in 200 places, but as long as you are willing to update the hard coded values, it is not a problem.
My reading of the thread is that after spending a bit of time looking at the Google-internal changes, @gspencergoog concluded they were fine. He wrote:
They're pretty trivial, so as long as we can say that they are more correct now than they were, I'm OK with approving them.
The issue with customer testing is with super apps and Cupertino macOS testing that got a lot of bounding checks, so I think they might be affected and the only way to "solve" would be commenting the test, landing this, fixing the test. There is no partial migration.
Yeah, that sort of effect is possible. I think the usual solution is to temporarily disable the affected suite in flutter/tests
: rename the file registry/foo.test
to registry/foo.test.disabled
, then land the framework change, then land the test update downstream, then rename the file back.
If by "Cupertino macOS testing" you're referring to the suite registry/macos_ui.test
, you may be glad to hear that that one is disabled since last December: https://github.com/flutter/tests/pull/317 .
Greg said the changes were ok, but he manually checked some files and there were some small things that seemed "odd" and unintended, like Chips/Buttons were being affected somehow (possibly Material State, but I really don't know). They weren't supposed to be affected in the way he saw, but I was never able to reproduce locally, and I can't trigger the golden of what he saw, so it is hard.
Hmm, I see, dang. Did that discussion happen somewhere else, then (perhaps Discord)? It doesn't seem like any reference to it made it onto the PR thread.
I see. Well, that's the comment that was followed by this one:
They're pretty trivial, so as long as we can say that they are more correct now than they were, I'm OK with approving them.
So I think those (as well as the other changes like them) are the changes that he was referring to in that later comment.
If the reply to those changes is, "I tried and couldn't reproduce a change like those locally; but they are visually trivial, and the new versions don't look any worse to me than the old versions, and I think in principle they should be more correct because the new logic in the PR is more correct", then my guess based on the thread is that @gspencergoog (and any other Googlers involved) would have been happy with that answer.
Looking at those screenshots myself, I'd definitely say they're visually trivial and that the new versions don't look any worse than the old. I haven't closely read the logic in the PR, but presumably you think it is indeed more correct. So if you tried to reproduce similar changes and couldn't, then I think that's probably all the debugging that is needed.
The main issue is not that they look odd or wrong, just "are you sure your change should happen here?" and I'm not sure. I wish I could debug to be sure, there is a 75% chance that's a bug, but I can't debug it.
OK, I guess it comes down to that estimate of whether it's a bug. If you think it probably really is a bug in the PR, then I agree it should be fixed before merging, and it's frustrating that the repro case for the bug isn't accessible.
FWIW my guess would be that it's not a bug. Those three gray "1", "2", "3" boxes don't visibly have borders… but they might still have a _decoration.shape
that's an OutlinedBorder, say, just with a border that's the same color as the interior. Based on the code in the PR, it seems like something like that has to be the case in order for it to have an effect.
And then once the new logic gets involved, it's expected that it may cause small rounding differences that make visually imperceptible changes in the output.
We were actually pretty close, I was OK with just approving those diffs, I just wanted to make sure they were expected. If you want help with the Google testing side, I can look at them and approve if they're still trivial. I doubt many other customers do golden tests, but we can deal with them if they do (and if they do, you can reproduce it there).
Could be. If @gnprice thinks that's not a bug, I can resubmit the PR. My brain melted thinking "is that a bug or not?" and I couldn't find an answer, then I gave up.
Yeah, I can't claim to be sure of it, but my assessment is that it's probably not a bug. A resubmitted version of the PR sounds great!
If we want to get to a higher degree of certainty that those golden diffs aren't telling us about some way in which the code isn't behaving how it's intended to, then since you've already tried and been unable to reproduce the behavior locally, probably the most effective next step would be for @gspencergoog or another Googler to dig into one of those test cases that doesn't visually have a border and confirm that the widgets do express a border after all. (And the border is just very thin, or the same color as the interior or exterior, or for some other reason doesn't appear visually.) But personally I'd be comfortable skipping that step.
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v
and a minimal reproduction of the issue.
Steps to Reproduce
I'm getting visual glitches using this widget structure:
As you can notice, the background color of the decoration is slightly overflowing the circular border. I've tried in different ways (e.g. using ClipOval) but the result is always the same.
I think this behaviour, even if intended, is not what a developer/designer would expect.
Is there a way to properly achieve the expected result?
Thanks