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

Flutter – Vertical divider does not show up

I am trying to recreate something like this photo below in Flutter

enter image description here

However I am stuck with the divider not showing up inside the main Row child and that is most likely because it does not have a height yet.
I have also tried to use a custom divider with Container yet nothing has showed till a height was given to the widget.

I would like to keep the widget dynamic and by that I mean I don’t want to, if possible, restrict its height, the texts inside the widget are going to have maxLines: 2 so they will not expand to infinity.

I know that using IntrinsicHeight would do the trick but it’s well known that this widget is expensive.

Is there a way to achieve this without explicitly giving it a height or without using IntrinsicHeight ?

ColoredBox(
  color: Colors.grey,
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      VerticalDivider(
        thickness: 4,
        color: Get.theme.colorScheme.primary, // should appear in blue
      ),
      const Flexible(
        child: ColoredBox(
          color: Colors.green,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Text('Title', maxLines: 2),
              Text('Description', maxLines: 2),
              Text('Made by', maxLines: 2),
            ],
          ),
        ),
      )
    ],
  ),
)

enter image description here

The main Row has the grey color and the Column has the green color and you can see the VeticalDivider is there but doesn’t ‘fully’ appear unless height is restricted by any means whether specifically for it or the whole widget

Tags:

2

Answers


  1. 0

    Just wrap the vertical divider wigdet into SizedBox with required height like below:

      SizedBox(
    height: 60,
    child: VerticalDivider(
    thickness: 4,
    color: Colors.blue,
   ),
  ),
    Login or Signup to reply.
  2. 0

    Try below code:

    Container(
      alignment: Alignment.center,
      margin: EdgeInsets.all(10),
      padding: EdgeInsets.all(5),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(5),
        border: Border(
          left: BorderSide(
            color: Colors.deepPurple,
            width: 5,
          ),
        ),
      ),
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('Task Type'),
            Text(
                'Task description here this one is really long and it goes over maybe? And goes to two lines.'),
            SizedBox(
              height: 3,
            ),
            Row(
              children: [
                Text('Due'),
                Text('Today,5.30 pm'),
                Spacer(),
                Container(
                  padding: EdgeInsets.all(8),
                  decoration: BoxDecoration(
                      color: Colors.deepPurple, shape: BoxShape.circle),
                  child: Text(
                    '1',
                    style: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                ),
                SizedBox(
                  width: 3,
                ),
                Text(
                  'Update',
                  style: TextStyle(
                    color: Colors.deepPurple,
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    ),

    Result Screen as per above image – image

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

Back To Top
Search