Flutter Layout: VerticalDividers not shown

Question

I have a simple layout that consists of one Column with few children. Some of these are Rows which contain children either. I've added Dividers between the children of the Column and VerticalDividers between the children of the Rows. The (horizontal) Dividers are shown fine. However the VerticalDividers are not shown in the app.

I have already tried wrapping the Rows children in some other layout widget like Container, but nothing seems to work.

Screenshot

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test App'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: Center(
              child: Text('Hello World'),
            ),
          ),
          Divider(height: 1),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(40.0),
                child: Text('Row 1.1'),
              ),
              VerticalDivider(width: 1),
              Padding(
                padding: const EdgeInsets.all(40.0),
                child: Text('Row 1.2'),
              ),
            ],
          ),
          Divider(height: 1),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(40.0),
                child: Text('Row 2.1'),
              ),
              VerticalDivider(width: 1),
              Padding(
                padding: const EdgeInsets.all(40.0),
                child: Text('Row 2.2'),
              ),
            ],
          )
        ],
      ),
    );
  }
}

score 4 · Accepted Answer · answered May 17 '19 at 12:17

just wrap Rows with IntrinsicHeight widget

your example will looks like

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test App'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: Center(
              child: Text('Hello World'),
            ),
          ),
          Divider(height: 1),
          IntrinsicHeight(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.all(40.0),
                  child: Text('Row 1.1'),
                ),
                VerticalDivider(width: 1),
                Padding(
                  padding: const EdgeInsets.all(40.0),
                  child: Text('Row 1.2'),
                ),
              ],
            ),
          ),
          Divider(height: 1),
          IntrinsicHeight(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.all(40.0),
                  child: Text('Row 2.1'),
                ),
                VerticalDivider(width: 1),
                Padding(
                  padding: const EdgeInsets.all(40.0),
                  child: Text('Row 2.2'),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

Although the documentation states to avoid this layout, it works for my purposes. Thanks. — Tidder, May 17 '19 at 16:39
If this is how you use VerticalDividers in Rows, VerticalDividers are almost useless. — Ray Li, Oct 11 '20 at 01:50

score 3 · Answer 2 · answered May 17 '19 at 11:03

3

Try this:

Container(
    height: 20,
    child: VerticalDivider(
       width: 20
       color: Colors.black,
    ),
),

It worked for me.

answered May 17 '19 at 11:03

Escobar

453
5
10

1

This solution kind of works, but the height of the VerticalDivider depends on the height of the container. I'd more likely have the VerticalDivider match the height of the Row, where the height of the Row itself depends on it's content. So the VerticalDivider should shrink/strech depending on the Row. – Tidder May 17 '19 at 11:12
That's the most specific and informative link I could see about what you're asking for, it might help you [How to get a widget's height](https://stackoverflow.com/questions/49307677/how-to-get-a-height-of-a-widget) – Escobar May 17 '19 at 12:04

Flutter Layout: VerticalDividers not shown

2 Answers2