flutter – vertical divider

Dividers are utilized to recognize various parts utilized in your versatile application. In this blog entry, we should check how to make a vertical divider or vertical line in Flutter.

We use VerticalDivider gadget to make vertical line in Flutter. The VerticalDivider has helpful properties, for example, width, thickness, shading, indent, endindent and so forth You can utilize it basically as given in the bit beneath.

VerticalDivider(color: Colors.black,
          thickness: 2, width: 20,
          indent: 200,
          endIndent: 200,)

Following is the finished illustration of utilizing vertical divider in Flutter.

import 'package:flutter/material.dart';

class VerticleExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tutorials',
      home: MainScreen()
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Vertical Divider Example'),
      ),
      body: Center(child:Row(
        children: <Widget>[
          Container(
            color: Colors.red,
            height: 100,
            width: 100,
          ),
          VerticalDivider(color: Colors.black,
          thickness: 2, width: 20,
          indent: 200,
          endIndent: 200,),
          Container(
            color: Colors.blue,
            height: 100,
            width: 100,
          ),
        ],
      ),
      ),
    );
  }
}

In the above Flutter model we use Row, Container and VerticalDivider gadgets to make a vertical line between two holders. See the yield of the Flutter model underneath.

vertical divider flutter example

I trust this ripple instructional exercise has caused you. Much obliged to you for perusing.

Thanks for reading this article ❤
If I got something wrong, Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.

Leave a Comment