How to add Horizontal and Vertical Divider on Flutter

As a Flutter developer, you may often need to add horizontal and vertical dividers to your app’s UI. These dividers help to visually separate different sections of the UI and make it easier for the user to understand the layout. In this tutorial, we’ll learn how to add horizontal and vertical dividers in Flutter with complete examples.

Adding a Horizontal Divider

To add a horizontal divider in Flutter, you can use the Divider widget. Here’s an example code that demonstrates this:

Divider(
  thickness: 1,
  color: Colors.grey,
  indent: 20,
  endIndent: 20,
)

In this code, we’re using the Divider widget and setting its thickness property to 1 to set the thickness of the divider. We’re also setting the color property to Colors.grey to set the color of the divider, and indent and endIndent properties to 20 to set the padding of the divider from the start and end.

You can customize the appearance of the Divider using other properties such as height, thickness, color, indent, and endIndent.

Adding a Vertical Divider

To add a vertical divider in Flutter, you can use the VerticalDivider widget. Here’s an example code that demonstrates this:

VerticalDivider(
  thickness: 1,
  color: Colors.grey,
  indent: 20,
  endIndent: 20,
)

In this code, we’re using the VerticalDivider widget and setting its thickness property to 1 to set the thickness of the divider. We’re also setting the color property to Colors.grey to set the color of the divider, and indent and endIndent properties to 20 to set the padding of the divider from the start and end.

You can customize the appearance of the VerticalDivider using other properties such as width, thickness, color, indent, and endIndent.

Complete Example

Here’s a complete example that demonstrates how to add both horizontal and vertical dividers in Flutter:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Divider Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Divider Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Horizontal Divider'),
              Divider(
                thickness: 1,
                color: Colors.grey,
                indent: 20,
                endIndent: 20,
              ),
              Text('Vertical Divider'),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    width: 150,
                    child: Text('Left'),
                  ),
                  VerticalDivider(
                    thickness: 1,
                    color: Colors.grey,
                    indent: 20,
                    endIndent: 20,
                  ),
                  Container(
                    width: 150,
                    child: Text('Right'),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}


In this example, we’re using both Divider and VerticalDivider widgets to add horizontal and vertical dividers respectively. We’re also setting properties such as thickness, color, indent, and endIndent to customize the appearance of the dividers.

Conclusion

Adding horizontal and vertical dividers in Flutter is simple and easy. You can use the Divider widget for horizontal dividers and `VerticalDivider