'How to add Vertical Divider on Grid View

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 1:^[1]

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->

Solution 2:^[2]

Use Divider Widget and give the height

or Use this

VerticalDivider(
  color: Colors.black,
  thickness: 2,
)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Ravindra S. Patil
Solution 2

'How to add Vertical Divider on Grid View

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]