Layout

Divider

Visually or semantically separates content.

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  mainAxisSize: MainAxisSize.min,
  children: [
    Text(
      'Flutter Forui',
      style: context.theme.typography.xl2.copyWith(
        color: context.theme.colors.foreground,
        fontWeight: FontWeight.w600,
      ),
    ),
    Text(
      'An open-source widget library.',
      style: context.theme.typography.sm.copyWith(color: context.theme.colors.mutedForeground),
    ),
    const FDivider(),
    SizedBox(
      height: 30,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
          Text('Blog', style: context.theme.typography.sm.copyWith(color: context.theme.colors.foreground)),
          const FDivider(axis: Axis.vertical),
          Text('Docs', style: context.theme.typography.sm.copyWith(color: context.theme.colors.foreground)),
          const FDivider(axis: Axis.vertical),
          Text('Source', style: context.theme.typography.sm.copyWith(color: context.theme.colors.foreground)),
        ],
      ),
    ),
  ],
);

CLI

To generate and customize this style:

dart run forui style create dividers

Usage

FDivider(...)

FDivider(
  style: (style) => style.copyWith(...),
  axis: Axis.vertical,
);

On this page