Download StackFood Multi Restaurant, Food Delivery App with Laravel Admin and Restaurant Panel Buy Full App on $79
Download FlutKit - Flutter UI Kit Most beautiful Flutter UI Kit with 20+ Full App, 450+ Screens. Buy Full Kit on $39
Download Fluxstore Multi Vendor WooCommerce/Dokan Plugin compatible WordPress eCommerce Flutter App. Buy Full App on $79

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.

No any Comments on this Article


Please Wait...