Widget Field Guide

Explore Flutter widgets for Android and iOS. Pick a widget, run its live mobile preview, and copy the Dart code.

LIVE MOBILE PREVIEW

WelkDivider

A plain, dotted or dashed separator with horizontal and vertical orientations.

Install

Terminal

flutter pub add welkui_flutter

Latest release: welkui_flutter 0.1.5 on pub.dev. Requires Dart 3.13.4+ and Flutter 3.35.0+.

Usage

Dart

import 'package:flutter/material.dart';
import 'package:welkui_flutter/welkui_flutter.dart';

const WelkDivider(
  variant: WelkDividerVariant.dashed,
  thickness: 3,
  semanticLabel: 'End of mission details',
)

Same look as the React WelkDivider.

Variants and behavior

Variants: plain, dotted and dashed
Horizontal fills bounded width by default
Vertical defaults to 32 logical pixels long

Usage notes and accessibility

Use a positive, finite thickness and a non-negative, finite length.
Set length explicitly for vertical separators or unbounded horizontal layouts.
semanticLabel defaults to Separator when omitted.

Constructor parameters

Required parameters are marked in the default column. Other parameters are optional.

WelkDivider parameter reference
Parameter	Type	Default	Description
`orientation`	`Axis`	horizontal	horizontal or vertical.
`variant`	`WelkDividerVariant`	plain	plain, dotted or dashed.
`thickness`	`double`	2	Stroke thickness in logical pixels.
`length`	`double?`	null	Explicit extent along the divider axis.
`color`	`Color?`	null	Stroke color; defaults to theme ink.
`semanticLabel`	`String?`	null	Accessible separator description.

Project setup, theming and typography

WelkUI Flutter targets Android and iOS. It uses Dart widgets, not the React package or its CSS stylesheet. Defaults work without a theme wrapper.

Override shared colors and strokes with WelkTheme and immutable WelkThemeData:

Dart

WelkTheme(
  data: const WelkThemeData().copyWith(
    accent: const Color(0xFFFFD166),
    ink: const Color(0xFF202020),
    paper: const Color(0xFFFFFDF5),
  ),
  child: WelkButton(
    onPressed: () {},
    child: const Text('Your colors. WelkUI character.'),
  ),
)

The Short Stack font is bundled and registered by the package, so you don't need to declare font assets or download fonts at runtime. To use it outside the widgets:

Dart

const Text(
  'Made with WelkUI',
  style: TextStyle(
    fontFamily: 'ShortStack',
    package: 'welkui_flutter',
    fontSize: 20,
  ),
)