Styling
All styling is composable and immutable, inspired by Lipgloss. Compose a Style with colors, attributes, borders, padding, width and alignment, then .render(text).
A styled block
dart
// True-color foreground, bold, 40-char centered block
final title = const Style(
foregroundRgb: RgbColor(203, 166, 247), // Catppuccin Mauve
isBold: true,
width: 40,
align: Align.center,
).render('Hello, dart_tui!');
// Borders + padding + title
final box = const Style(
border: Border.rounded,
borderForeground: RgbColor(137, 180, 250),
borderTitle: ' My Box ',
borderTitleAlignment: Align.center,
padding: EdgeInsets.symmetric(vertical: 0, horizontal: 1),
width: 40,
).render(content);Border styles
Seven border variants, plus per-character coloring, an embedded title and per-side visibility flags:
dart
Border.box // ┌─┐ └─┘ │
Border.rounded // ╭─╮ ╰─╯ │
Border.thick // ┏━┓ ┗━┛ ┃
Border.double // ╔═╗ ╚═╝ ║
Border.normal // +--+ | (ASCII-only)
Border.hidden // space-padded (preserves geometry)
Border.none // no border
// Draw only specific sides
style.withBorderSides(top: true, bottom: true);
Border.rounded.topOnly;
Border.rounded.sidesOnly;SGR text attributes
dart
const Style(isBold: true) // bold
const Style(isDim: true) // dim / faint
const Style(isItalic: true) // italic
const Style(isUnderline: true) // underline
const Style(isStrikethrough: true) // strikethrough
const Style(isReverse: true) // swap fg/bg
const Style(isBlink: true) // blinking text
const Style(isOverline: true) // overline decoration
Style inheritance
child.inherit(parent) fills any unset fields on the child from the parent — set fields on the child win.
dart
const base = Style(
foregroundRgb: RgbColor(203, 166, 247),
isBold: true,
isItalic: true,
);
const child = Style(
foregroundRgb: RgbColor(166, 227, 161), // overrides fg
);
final resolved = child.inherit(base); // green + bold + italicLayout helpers
dart
final ui = joinHorizontal(AlignVertical.top, [leftPane, rightPane]);
final mid = place(termWidth, termHeight, Align.center, AlignVertical.middle, content);