vertical divider flutter example
In this post, you will learn how to make a vertical divider in Flutter.

let’s create a simple one.

Simple Vertical Divider Example

divider vertical flutter

If you check the code, you can find out that VerticalDivider is just a SizedBox. You can use Vertical Divider with horizontal ListView.

  • Align widget is used to align the Container to top of the App.
  • In this example, divider height depends on the Container height.
  • Here color of the divider is black.
  • Given 20 empty space above the divider.
  • Divider width is also 20.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Vertical Divider Example';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: MyStatelessWidget(),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.topCenter,
      child: Container(
        height: 80,
        padding: const EdgeInsets.all(10),
        child: VerticalDivider(
          color: Colors.black,
          thickness: 3,
          indent: 20,
          endIndent: 0,
          width: 20,
        ),
      ),
    );
  }
}


Properties

Color color : Color of the vertical divider line.

double endIndent: total empty space under the divider.

double indent: sum of empty space on top of the divider.

double thickness: Thickness of the divider

double width: Width of the divider.

Vertical Divider Example 2

divider vertical flutter

Let’s make a red color divider inside Row widget. Yes, just like above image.

  • Row widget aligns Text widgets.
  • Here VerticalDivider’s height depends on the SizedBox’s height.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Vertical Divider Example 2';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: MyStatelessWidget(),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(8.0),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('May 1, 2021'),
          SizedBox(
            height: 25,
            child: VerticalDivider(
              color: Colors.red,
              thickness: 2,
              indent: 5,
              endIndent: 0,
              width: 20,
            ),
          ),
          Text('Saturday'),
        ],
      ),
    );
  }
}


Vertical Divider Using Container

vertical divider using container
In this example, you will not use VerticalDivider() widget, but you will use Container. It’s really simple to make.

  • Here Align widget used to Align the Padding and VerticalDivider.
  • Depends on Container properties values, you can make your Divider.
  • You can also use other widgets, Just like Container

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  static const String _title = 'Vertical Divider Using Container';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: Align(
          alignment: Alignment.topCenter,
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: VerticalDividerWidget(),
          ),
        ),
      ),
    );
  }
}

class VerticalDividerWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 40,
      width: 3,
      color: Colors.brown,
    );
  }
}


That’s all for now. If you like this post, please share it with your family and Friends. If there is any doubts, please comment.

Thank you for scrolling.

Please disable your adblocker or whitelist this site!