having problem displaying divider in my layout

Question

i am trying to add a horizontal divider to my current layout but for some reason the divider is not appearing.

below is my code i tried

 return Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        mainAxisSize: MainAxisSize.max,
        children: [
          Expanded(
              flex: 1,
              child: Column(children: <Widget>[
                Text('Total Outstanding', textAlign: TextAlign.center,),
                Padding(
                  padding: EdgeInsets.all(3.0),
                  child:  Text('\$345.55',textAlign: TextAlign.center, style: TextStyle(color: Colors.green,)),
                ),

              ])),
          VerticalDivider( width: 0.0, indent: 0.0, color: black),
          Expanded(
              flex: 1,
              child: Column(children: [
                Text('Total Received', textAlign: TextAlign.center,),
                Padding(
                  padding: EdgeInsets.all(3.0),
                  child:   Text('\$1806.50',textAlign: TextAlign.center, style: TextStyle(color: Colors.green)),
                ),

              ],
              )
          ),Divider(color: Colors.black54),
        ],
    );

i am expecting Divider(color: Colors.black54), in my code will draw the divider. see the picture below. the red line i drew should be where the divider should appear. can someone help me modify my code so that the horizontal divider can appear where the red line is? also there should be some padding on the start of the screen and the end of the screen. thanks in advance

Answer 1

Column(
  children: <Widget>[
    SizedBox(
      height: 56,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'Total Outstanding',
                  textAlign: TextAlign.center,
                ),
                Padding(
                  padding: EdgeInsets.all(3.0),
                  child: Text('\$345.55',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        color: Colors.green,
                      )),
                ),
              ],
            ),
          ),
          VerticalDivider(width: 1.0, color: Colors.black),
          Expanded(
            flex: 1,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'Total Received',
                  textAlign: TextAlign.center,
                ),
                Padding(
                  padding: EdgeInsets.all(3.0),
                  child: Text('\$1806.50', textAlign: TextAlign.center, style: TextStyle(color: Colors.green)),
                ),
              ],
            ),
          ),
        ],
      ),
    ),
    SizedBox(height: 12),
    Container(height: 2, color: Colors.black54),
  ],
),