Виджет VerticalDivider

Виджет VerticalDivider делит Row на зоны тонкой линией. Ширину места задают в width, толщину штриха - в thickness, цвет - в color, отступы сверху и снизу - в indent и endIndent.

Синтаксис

VerticalDivider(
	width: 20,
	thickness: 2,
	color: Colors.blue,
)

Параметры

Параметр	Описание
`width`	Ширина колонки, которую занимает виджет.
`thickness`	Толщина вертикальной линии.
`color`	Цвет линии.

Пример

Давайте разделим два текста в Row:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: Row(
						mainAxisSize: MainAxisSize.min,
						children: [
							Text('abcde'),
							VerticalDivider(),
							Text('12345'),
						],
					),
				),
			),
		),
	);
}

Между строками стоит вертикальная черта.

Пример

Давайте растянем Row на всю ширину:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Row(
					children: [
						Expanded(child: Center(child: Text('abcde'))),
						VerticalDivider(width: 1),
						Expanded(child: Center(child: Text('12345'))),
					],
				),
			),
		),
	);
}

Экран поделен пополам вертикальной линией по центру.

Смотрите также

виджет Divider,
который рисует горизонтальную линию
виджет Row,
куда часто кладут VerticalDivider
виджет Expanded,
которым делят ширину между колонками
виджет NavigationRail,
рядом с которым иногда ставят разделитель