How to add Vertical Divider on Grid View

Issue

For your reference vertical divider in grid view

How can we build UI like this on Grid View item with vertical divider.?? any suggestion will be greatly appreciated

Solution

Try below code hope its help to you.

IntrinsicHeight(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Expanded(
        child: Column(
          children: [
            ListTile(
              title: Text(
                'Sole Material',
              ),
              subtitle: Text('Rubber'),
            ),
            ListTile(
              title: Text(
                'Material',
              ),
              subtitle: Text('Synthetic'),
            ),
            ListTile(
              title: Text(
                'Toe Shape',
              ),
              subtitle: Text('Round Toe'),
            ),
          ],
        ),
      ),
      Expanded(
        child: VerticalDivider(
          //width: 5,
          color: Colors.black,
        ),
      ),
      Expanded(
        child: Column(
          children: [
            ListTile(
              title: Text(
                'Pattern',
              ),
              subtitle: Text('Textured'),
            ),
            ListTile(
              title: Text(
                'Occasion',
              ),
              subtitle: Text('Day'),
            ),
          ],
        ),
      ),
    ],
  ),
),

Result Screen-> image

Answered By – Ravindra S. Patil

Answer Checked By – Mary Flores (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *