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

WelkButton

A slightly tilted, outlined button with a solid shadow that compresses on tap. Matches the WelkUI React button.

Install

Terminal

flutter pub add welkui_flutter

Latest release: welkui_flutter 0.0.8 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';

WelkButton(
  variant: WelkButtonVariant.primary,
  size: WelkButtonSize.medium,
  onPressed: () {},
  child: const Text('Save changes'),
)

Same look as the React WelkButton.

Variants and behavior

Variants: primary, secondary, error, warning, ghost, info and success
Sizes: small, medium and large
Tap: shifts down-right while its hard shadow compresses
Ghost keeps the WelkUI outline and hard shadow
A null onPressed disables interaction

Usage notes and accessibility

Use a short, action-focused label. Icon-only children need a Semantics label.
Touch targets are at least 48 logical pixels.
Supports keyboard focus, text scaling and reduced motion.

Constructor parameters

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

WelkButton parameter reference
Parameter	Type	Default	Description
`child`	`Widget`	Required	Button content: text, or an icon and text composition.
`onPressed`	`VoidCallback?`	null	Called on tap. Null disables the button.
`variant`	`WelkButtonVariant`	primary	primary, secondary, error, warning, ghost, info or success.
`size`	`WelkButtonSize`	medium	small, medium or large.
`focusNode`	`FocusNode?`	null	Optional focus node to control focus.
`autofocus`	`bool`	false	Requests focus when first built.

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