Question 234228 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter: Vertical Line between First letter of Text Widget Children in a ListView.builder()

I want to recreate a UI like the one below where the first character of every Text widget of the children in a Listview is connected by a verticle line. If the Items of that ListView have sub Children vertical line should be joined by a horizontal line as the image.

Sample Image

Tags:

2

Answers


  1. 0

    I’ve taken your image and added some lines to show you how you might think about breaking this UI down. See this blog post for more examples. I’ll describe afterwards some more specific Widget choices.

    Image of a fast food basket mobile view, with lines separating different UI components

    First, you may break it down into rows inside a ListView. This is the main red lines. Perhaps you would group together the heading and subrows – e.g. "BLT Sandwich" and the "With Remove" and "Note" rows may be grouped under one widget.

    Each row may then be split into three parts.

    • The left most part will either be used for the quantity of that item, or to display the custom grey lines for the sub-rows. The custom grey lines could be built with some Column and Divider widgets, or maybe with a CustomPaint widget.
    • The middle part will show the main content, either just some text or several grouped widgets in the case of "With Remove" and "Note" rows. These grouped ones could well be composed of Row and Column widgets.
    • The right most part then is either empty or shows the price

    Bear in mind this is just one option! Depending on what other formats of rows you have, and just personal choice, you could group different elements together differently.

    How you group will make certain changes and design options easier or harder, but something like this should be pretty flexible 🙂

    Login or Signup to reply.
  2. 0

    You can easily solve your problem by adding this module to the .yaml file.
    https://pub.dev/packages/animated_tree_view

    If you add the module here and take the example into your project, it outputs like this:

    enter image description here

    I hope I have helped. Enjoy your work.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search