Separator

A separator draws a one pixel line between sections. It runs horizontally by default, filling the width, and takes its color from the theme border token, so a global retheme restyles every rule at once.

import 'package:fossui/fossui.dart';

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: const [
    Text('Above'),
    FossSeparator(),
    Text('Below'),
  ],
);

Orientation

orientation picks the axis. The default horizontal fills the available width. vertical fills the parent's height instead, so it needs a bounded cross-axis height. A Row supplies that height, which makes it the usual place for a vertical rule.

Row(
  children: const [
    Text('Left'),
    SizedBox(
      height: 16,
      child: FossSeparator(orientation: FossSeparatorOrientation.vertical),
    ),
    Text('Right'),
  ],
);

Semantics

The rule is decorative by default and stays out of the semantics tree. Set decorative: false when the line marks a real content boundary, so assistive tech reaches it as a node.

const FossSeparator(decorative: false);

API

FossSeparator

FossSeparatorOrientation

horizontal (fills width, 1px tall), vertical (fills height, 1px wide).

Live demo

Open the interactive gallery to try every variant, size, and state with live knobs.