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:

Inheritance

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 setterinherited
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.
finalinherited
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 setterinherited
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