How to Fix Vertical Divider Not Showing in Flutter App

When you add Vertical Divider inside Row, Wrap widget, it may not display, or display with irregular height. The main reason of this reason is the unrestricted height of the parent widget of Row/Wrap widget. See the example below to solve this issue. 

Solution 1: Wrap Row() with IntrinsicHeight():

IntrinsicHeight(
    child:Row(
        children: [
              VerticalDivider(
                color: Colors.black,
                thickness: 3, //thickness of divier line
              ),
        ]
    )
)

Solution 2: Wrap Row() with Container and give Height:

Container(
    height:200, 
    child:Row(
        children: [
              VerticalDivider(
                color: Colors.black,
                thickness: 3, //thickness of divier line
              ),
        ]
    )
)

Full Code Example:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp( home: MyApp(),)
  );
}

class MyApp extends StatefulWidget{
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
          appBar: AppBar(
              title:Text("Vertical Divider Not Showing"),
              backgroundColor: Colors.deepPurpleAccent
          ),
          body: Container(
            padding: EdgeInsets.all(15),
             child: Column(
               children:[
                 IntrinsicHeight( 
                   child:Row(
                       children: [
                            Expanded(
                              child:Card(
                                  child: Container(
                                      height: 200,
                                      color: Colors.black12,
                                  ),
                                ),
                            ),

                            
                            VerticalDivider(
                              color: Colors.black,
                              thickness: 3, //thickness of divier line
                            ),
                          

                            Expanded(
                              child:Card(
                                child: Container(
                                    height: 200,
                                    color: Colors.black12,
                                ),
                              ),
                            )
                       ],
                    )
                 )
               ]
             )
          )
      );
  }
}

Output Screenshot:

When Row() is not wrapped	When Row() is wrapped

In this way, you can fix if the vertical divider is not showing in your app.