How to add Horizontal and Vertical Divider on Flutter

In this example, we are going to show you the easiest way to add a horizontal or vertical divider, change its color, thickness, and width in the Flutter app. See the example below:

Divider(
    color: Colors.redAccent, //color of divider
    height: 5, //height spacing of divider
    thickness: 3, //thickness of divier line
    indent: 25, //spacing at the start of divider
    endIndent: 25, //spacing at the end of divider
)

VerticalDivider(
  color: Colors.black,  //color of divider
  width: 10, //width space of divider
  thickness: 3, //thickness of divier line
  indent: 10, //Spacing at the top of divider.
  endIndent: 10, //Spacing at the bottom of divider.
)

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("Horizontal and Vertical Divider"),
              backgroundColor: Colors.deepPurpleAccent
          ),
          body: Container(
            padding: EdgeInsets.all(15),
             child: Column(children: [

                    Card(
                      child: Container(
                          height: 50,
                          color: Colors.black12,
                      ),
                    ),

                    Divider(
                       color: Colors.redAccent, //color of divider
                       height: 5, //height spacing of divider
                       thickness: 3, //thickness of divier line
                       indent: 25, //spacing at the start of divider
                       endIndent: 25, //spacing at the end of divider
                    ),

                    Card(
                      child: Container(
                          height: 50,
                          color: Colors.black12,
                      ),
                    ),

                    IntrinsicHeight( //wrap Row with this, otherwise, vertical divider will not display
                      child:Row(
                       children: [
                            Expanded(
                              child:Card(
                                  child: Container(
                                      height: 50,
                                      color: Colors.black12,
                                  ),
                                ),
                            ),

                            
                            VerticalDivider(
                              color: Colors.black,  //color of divider
                              width: 10, //width space of divider
                              thickness: 3, //thickness of divier line
                              indent: 10, //Spacing at the top of divider.
                              endIndent: 10, //Spacing at the bottom of divider.
                            ),
                          

                            Expanded(
                              child:Card(
                                child: Container(
                                    height: 50,
                                    color: Colors.black12,
                                ),
                              ),
                            )
                       ],
                    )
                  )
                  

             ],)
          )
      );
  }
}

If Vertical Divider is not displaying, then see this: How to Fix Vertical Divider Not Showing in Flutter App

In this way, you can add Vertical and Horizontal divider widgets in Flutter App.

No any Comments on this Article


Please Wait...