How can I make a reddit style thread lines that connect replies (UI)

I tried like an elbow and stub method, has lots of bugs i can’t do it no more,

1 Like

I’m interested too, currently I just use some some decoration on the box widget itself, it’s not that flexible also it’s only on the individual widgets. Felt too complicated to implement lines for the threads too, so I didn’t do it.

1 Like

This looks like a job for a CustomPaint, or possibly leveraging Boxy’s layout system.

1 Like

Same here :sob:

What’s the blocker you ran into?

1 Like

The currently I’m trying to create an illusion of the cards being connected in the line(need to be aligned from wherever they are indented), and the lines of the parents should keep on aligning to the children)

I’m sorry if this doesn’t make sense it’s just the logic I was working with but what ever I did, I was able to achieve a great deal but then came a bug of showing a line in some of them that was not wanted …

Sorry this is just confusing I don’t have the image to show u but I will try to attach that

Again, look at this Boxy example, as it might inspire you for your layout: Example: Tree View - Boxy

1 Like

What exactly do you have problems with? The layout or the data structure?

Layout only

this is the closest I have gotten to perfection

the only error on this code is that of the extra line that is shown on the middle,
that spans across multiple children of reply cards

other than that it was good

I would say this is a case for a custom render object but you already made the most complex task (the line reaching over multiple widgets) without one i guess.

So however you achieved that, it looks more easy to exclude the case of the middle line than writing from scratch.

Up to here, we could only assist with looking at your code directly.

sorry for the late reply

I created a gist for the replies and its (original firebase services how I handle posts stuff like that, I only took out the replies extension of that firebase service and attached it for speedy replication)

the main one is the replies sheet private class ( _RepliesSheet ), if you set up the firebase stuff and be able to see the sheet, it should be easy to debug.

1 Like

Thank you, it looks like what we were talking about, it’s a lot more complex than I was ready to do. It was a while ago I did mine, but I think if you didn’t use a rounded widget, it might look better and needs some logic to not add widgets in some places.

Mine is just a DecoratedBox at line 147: snag/lib/views/comments/comment_message.dart at 3f7de1e8810a2c9f96d0315323d4984fb073b526 · mihalycsaba/snag · GitHub

edit: I just noticed it shouldn’t be a stateless widget :sweat_smile:

It’s not the best looking thing, I have only lines for replies and they’re not continuous, between widgets on the same level. I don’t know what’s the best approach, I wanted a line for each child comment, that comes from the users picture. Also I think I should move the box higher, so it includes pictures and buttons. I just don’t know how to get that reddit like rounded corner only(or some other type of line that connects to a child).

I also want to add comment collapsing at some point, seems easier with separate line. I have never did anything complex with custompainter.

This is how it looks:

You are right it’s kinda close, but my challenge was to keep the stub(curve) and be able to align it to the line, if I remove the stub, it would be very easy…but thank you I will work on it when I have time to focus on such stuff