How to Create a Vertical Line in Flutter

Dividers are used to distinguish different components used in your mobile app. In this blog post, let’s check how to create a vertical divider or vertical line in Flutter.

We use VerticalDivider widget to create vertical line in Flutter. The VerticalDivider has useful properties such as width, thickness, color, indent, endindent etc. You can use it simply as given in the snippet below.

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

Following is the complete example of using 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 example we use Row, Container and VerticalDivider widgets to create a vertical line between two containers. See the output of the Flutter example below.

vertical divider flutter example

I hope this flutter tutorial has helped you. Thank you for reading.

Leave a Comment

Your email address will not be published. Required fields are marked *