API docs for Container.color should have a "troubleshooting" section that talks about "mysterious dividers" #15035

Activity

1. cbracken

   added

   frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.

   f: scrollingViewports, list views, slivers, etc.Viewports, list views, slivers, etc.

   on Mar 1, 2018
2. cbracken commented on Mar 1, 2018

   

   cbracken

   on Mar 1, 2018

   Member

   More actions

   /cc @Hixie @HansMuller for their thoughts
3. HansMuller commented on Mar 1, 2018

   

   HansMuller

   on Mar 1, 2018

   Contributor

   More actions

   That's pretty strange: it's wrong but it looks sort-of attractive. Could you provide a small example that demos the problem?
4. cbracken

   added

   waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter respondsThe Flutter team cannot make further progress on this issue until the original reporter responds

   on Mar 2, 2018
5. cbracken

   added this to the 4: Next milestoneThis milestone has been deleted milestone on Mar 2, 2018
6. cbracken

   added

   a: qualityA truly polished experienceA truly polished experience

   on Mar 2, 2018
7. cbracken commented on Mar 2, 2018

   

   cbracken

   on Mar 2, 2018

   Member

   More actions

   @Hixie suggests setting the background colour for the entire Drawer to the colour you're using for the list tiles. It's likely this is a result of sub-pixel anti-aliasing.
8. itsJoKr commented on Mar 2, 2018

   

   itsJoKr

   on Mar 2, 2018

   Last edited by itsJoKr

   Author

   More actions

   @cbracken Yes, setting the background of the entire drawer "visually" fixes the issue, but there is still the issue.

   @HansMuller Doesn't matter if it looks better. I didn't write anything in the code that should display dividers, and that's why this is the issue.
9. itsJoKr commented on Mar 2, 2018

   

   itsJoKr

   on Mar 2, 2018

   Last edited by zoechi

   Author

   More actions

   I was able to reproduce this bug with very simple example:

   var putThisIntoScaffoldBody = new ListView.builder(itemBuilder: (BuildContext context, int index) {
           return new Container(
             decoration: new BoxDecoration(color: Colors.black),
             height: 30.0,
           );
         }, itemCount: 30,
       );

   Just put this widget into Scaffold body. On iOS I can see it when bouncing with the scroll. On Android, it's much easier to see it, you don't even need to scroll:

   

   You can also see that not every divider is same width.
10. HansMuller commented on Mar 2, 2018

    

    HansMuller

    on Mar 2, 2018

    Contributor

    More actions

    @HansMuller Doesn't matter if it looks better. I didn't write anything in the code that should display dividers, and that's why this is the issue.

    Understood. That was just my attempt at humor.
11. Hixie commented on Mar 2, 2018

    

    Hixie

    on Mar 2, 2018

    Contributor

    More actions

    @itsJoKr Yeah, that most recent screenshot shows that this is indeed what we suspected. You're drawing a series of rectangles adjacent to each other, on top of a different background color, but they don't quite line up with the physical pixel boundaries. This means we try to antialias the edges, and each one is painted on top of the background, so the background shows up in the antialiasing. This is working as intended; it's how graphics works.

    There's two basic ways to avoid this problem. The first is to do as suggested above -- if you want two adjacent boxes to have the same background and be adjacent, then draw the background once, e.g. by putting them into a single box with that background. The second is to wrap all those widgets with a RepaintBoundary, which will cause them to all be painted as one graphic which is then anti-aliased once with the parent. That might not solve the issue, depending on exactly what the alignment ends up being, but it should be better.

    In general though the right answer is the first suggestion here; don't put two adjacent boxes with the same background color, just put the background color on the common background.

    We should document this somewhere with diagrams to explain it better. Not sure where, maybe on Container.color?

    👍React with 👍10Reacted by Josip Krnjic, Simon Lightfoot, Boehrsi, droplet, Jerry Zhou, MarkXiu, Pedro Massango, Dominik Roszkowski, Bartek Pacia and Shannon Chen
12. Hixie

    added

    d: api docsIssues with https://api.flutter.dev/Issues with https://api.flutter.dev/

    and removed

    a: qualityA truly polished experienceA truly polished experience

    f: scrollingViewports, list views, slivers, etc.Viewports, list views, slivers, etc.

    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter respondsThe Flutter team cannot make further progress on this issue until the original reporter responds

    on Mar 2, 2018
13. itsJoKr commented on Mar 2, 2018

    

    itsJoKr

    on Mar 2, 2018

    Author

    More actions

    OK, I understand it now, thanks for the explanation.
14. Hixie

    changed the title [-]ListView shows dividers when scrolling[/-] [+]API docs for Container.color should have a "troubleshooting" section that talks about "mysterious dividers"[/+] on Mar 2, 2018
15. brianegan commented on Mar 15, 2018

    

    brianegan

    on Mar 15, 2018

    Last edited by brianegan

    Contributor

    More actions

    "In general though the right answer is the first suggestion here; don't put two adjacent boxes with the same background color, just put the background color on the common background."

    Is this always a viable solution? For example, I want my appBar to have the same background color as the first widget in the body of a Scaffold, but the rest needs to be a white BG.

    I've also fixed this by moving from a bottom padding of 5.0 to a SizedBox of 5.0 and it "Fixed" the problem, but felt a bit weird. The solution you propose sounds like creating a Stack with a Container + BG for the top part and a Scaffold for the rest.

    Would be cool if padding "Just Worked" for this use case
16. itsJoKr commented on Mar 15, 2018

    

    itsJoKr

    on Mar 15, 2018

    Author

    More actions

    My problem here is the line: "This is working as intended; it's how graphics works." Because I'm pretty sure I wouldn't see this issue in Android and iOS native.

    👍React with 👍13Reacted by Brian Egan, afedorychak, Simon Lightfoot, Fogel Artem, Jacky Chan, Pho Tran, Josip Krnjic, Omi231, Tommi Nikkanen, Lucas Antunes and 3 more
17. SteveAlexander commented on Sep 4, 2018

    

    SteveAlexander

    on Sep 4, 2018

    Last edited by zoechi

    More actions

    For a specific artistic layout I was having this "mystery thin divider" problems with, I wrote the following:

    class PixelRatioDivider {
      double quantizedUnit;
      double remainder;
    
      PixelRatioDivider(BuildContext context, pixels, divideBy) {
        final pixelRatio = MediaQuery.of(context).devicePixelRatio;
        quantizedUnit = (pixels * pixelRatio ~/ divideBy) / pixelRatio;
        remainder = pixels - (quantizedUnit * divideBy);
      }
    }

    Using whole multiples of the quantizedUnit, and filling in with the remainder, I was able to make my Mondriaan-esque layout work seamlessly.
18. Hixie commented on Sep 17, 2018

    

    Hixie

    on Sep 17, 2018

    Contributor

    More actions

    See also #17084
19. goderbauer commented on Dec 28, 2018

    

    goderbauer

    on Dec 28, 2018

    Member

    More actions

    Closing this as dupe of #17084.
20. goderbauer

    closed this as completedon Dec 28, 2018
21. github-actions commented on Aug 15, 2021

    

    github-actionsbot

    on Aug 15, 2021

    More actions

    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.
22. github-actions

    locked as resolved and limited conversation to collaborators on Aug 15, 2021