How to draw a dynamic height line in flutter?

user_13406343 0
Viewed 624

I wanted to draw a dynamic height line, as shown in the given picture below as shown here, grey line

I did something line this using a continer with one sided border

Container(
child:(content goes here....)
  margin: EdgeInsets.symmetric(horizontal:16+20.0),
   decoration: BoxDecoration(
          border: Border(
            left: BorderSide(width: 2.0, color: Colors.lightBlue.shade600),

                      ),
          color: Colors.white,
        ),
)

but the issue is the corners(top and below) of the line is not rounded.
I want to draw a vertical line on the left side of my post, and on the right side goes the content.

flutter-layout dart flutter
1 Answers

You could try something like this:

IntrinsicHeight(
  child: Row(
    children: [
      Container(
        width: 5,
        decoration: ShapeDecoration(
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
          color: const Color(0x7f9e9e9e),
        ),
      ),
      Expanded(child: **content goes here**),
    ],
  ),
)

And here's a DartPad example for you: Example

Which will produce something like this:

enter image description here

Where the bar on the left will size automatically with the contents on the right.

user_45773500
Related