VerticalDivider class

A thin vertical line, with padding on either side.

In the Material Design language, this represents a divider. Vertical dividers can be used in horizontally scrolling lists, such as a ListView with ListView.scrollDirection set to Axis.horizontal.

The box's total width is controlled by width. The appropriate padding is automatically computed from the width.

This sample shows how to display a VerticalDivider between a purple and orange box inside a Row. The VerticalDivider is 20 logical pixels in width and contains a horizontally centered black line that is 1 logical pixels thick. The grey line is indented by 20 logical pixels.

To see it in action, copy and run this code snippet on DartPad.

import 'package:material_ui/material_ui.dart';

/// Flutter code sample for [VerticalDivider].

void main() => runApp(const VerticalDividerExampleApp());

class VerticalDividerExampleApp extends StatelessWidget {
  const VerticalDividerExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('VerticalDivider Sample')),
        body: const DividerExample(),
      ),
    );
  }
}

class DividerExample extends StatelessWidget {
  const DividerExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const .all(10),
      child: Row(
        children: <Widget>[
          Expanded(
            child: Container(
              decoration: BoxDecoration(
                borderRadius: .circular(10),
                color: Colors.deepPurpleAccent,
              ),
            ),
          ),
          const VerticalDivider(
            width: 20,
            thickness: 1,
            indent: 20,
            endIndent: 0,
            color: Colors.grey,
          ),
          Expanded(
            child: Container(
              decoration: BoxDecoration(
                borderRadius: .circular(10),
                color: Colors.deepOrangeAccent,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

This sample shows the creation of VerticalDivider widget, as described in: https://m3.material.io/components/divider/overview

To see it in action, copy and run this code snippet on DartPad.

import 'package:material_ui/material_ui.dart';

/// Flutter code sample for [Divider].

void main() => runApp(const VerticalDividerExampleApp());

class VerticalDividerExampleApp extends StatelessWidget {
  const VerticalDividerExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(colorSchemeSeed: const Color(0xff6750a4)),
      home: Scaffold(
        appBar: AppBar(title: const Text('Divider Sample')),
        body: const DividerExample(),
      ),
    );
  }
}

class DividerExample extends StatelessWidget {
  const DividerExample({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Padding(
        padding: .all(16.0),
        child: Row(
          children: <Widget>[
            Expanded(child: Card(child: SizedBox.expand())),
            VerticalDivider(),
            Expanded(child: Card(child: SizedBox.expand())),
          ],
        ),
      ),
    );
  }
}

See also:

• ListView.separated, which can be used to generate vertical dividers.
• Divider, which is the horizontal analog of this widget.
• material.io/design/components/dividers.html

Inheritance

• Object
• DiagnosticableTree
• Widget
• StatelessWidget
• VerticalDivider

Constructors

VerticalDivider({Key? key, double? width, double? thickness, double? indent, double? endIndent, Color? color, BorderRadiusGeometry? radius})

Creates a Material Design vertical divider.

const

Properties

color → Color?

The color to use when painting the line.

final

endIndent → double?

The amount of empty space under the divider.

final

hashCode → int

The hash code for this object.

no setter, inherited

indent → double?

The amount of empty space on top of the divider.

final

key → Key?

Controls how one widget replaces another widget in the tree.

final, inherited

radius → BorderRadiusGeometry?

The amount of radius for the border of the divider.

final

runtimeType → Type

A representation of the runtime type of the object.

no setter, inherited

thickness → double?

The thickness of the line drawn within the divider.

final

width → double?

The divider's width.

final

Methods

build(BuildContext context) → Widget

Describes the part of the user interface represented by this widget.

override

createElement() → StatelessElement

Creates a StatelessElement to manage this widget's location in the tree.

inherited

debugDescribeChildren() → List<DiagnosticsNode>

Returns a list of DiagnosticsNode objects describing this node's children.

inherited

debugFillProperties(DiagnosticPropertiesBuilder properties) → void

Add additional properties associated with the node.

inherited

noSuchMethod(Invocation invocation) → dynamic

Invoked when a nonexistent method or property is accessed.

inherited

toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode

Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.

inherited

toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String

A string representation of this object.

inherited

toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String

Returns a string representation of this node and its descendants.

inherited

toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String

Returns a one-line detailed description of the object.

inherited

toStringShort() → String

A short, textual description of this widget.

inherited

Operators

operator ==(Object other) → bool

The equality operator.

inherited