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

WelkBadge

A tilted, hard-shadowed status label with wrapping content, semantic colors and three sizes.

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 WelkBadge(
  variant: WelkBadgeVariant.success,
  semanticLabel: 'Mission status: complete',
  child: Text('Complete'),
)

Same look as the React WelkBadge.

Variants and behavior

Variants: defaultStyle, info, success, warning and error
Sizes: small, medium and large
Long labels wrap within the available width

Usage notes and accessibility

Use text as well as color to communicate status.
semanticLabel replaces child semantics, useful for counts or abbreviated labels.
Badges are informational rather than interactive buttons.

Constructor parameters

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

WelkBadge parameter reference
Parameter	Type	Default	Description
`child`	`Widget`	Required	Badge content.
`variant`	`WelkBadgeVariant`	defaultStyle	defaultStyle, info, success, warning or error.
`size`	`WelkBadgeSize`	medium	small, medium or large.
`semanticLabel`	`String?`	null	Accessible label replacing child semantics when supplied.

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,
  ),
)