CODEWITHSUNDEEP
flutterdartflutter-layout
kanwar manraj
kanwar manraj

Reputation: 552

How to draw a dynamic height line in flutter?

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.

Upvotes: 2

Views: 1498

Answers (1)

ronb
ronb

Reputation: 261

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.

Upvotes: 6

Related Questions