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

WelkCard

A paper card with asymmetric corners, an optional icon and wrapping content. Add onPressed to make it actionable.

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';

WelkCard(
  title: 'Your workspace',
  subtitle: 'Manage members, projects, and settings in one place.',
  icon: const Icon(Icons.arrow_forward),
  onPressed: () {},
  enableFeedback: true,
)

Same look as the React WelkCard.

Variants and behavior

Informational: omit onPressed; stays fully opaque without button semantics
Actionable: provide onPressed; tap translates the card and compresses its shadow
Disabled action: provide onPressed and set enabled: false
No tap animation: set enableFeedback: false; the action still works

Usage notes and accessibility

Long titles and subtitles wrap instead of overflowing.
Actionable cards get button semantics and keyboard focus.
Tap feedback respects the platform's reduced-motion setting.

Constructor parameters

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

WelkCard parameter reference
Parameter	Type	Default	Description
`title`	`String`	Required	Bold card title.
`subtitle`	`String`	Required	Supporting text below the title.
`icon`	`Widget?`	null	Optional icon in the top trailing corner.
`onPressed`	`VoidCallback?`	null	Makes the card actionable. Omit for an informational card.
`enabled`	`bool`	true	Set to false together with onPressed to show a disabled action card.
`enableFeedback`	`bool`	true	Whether actionable cards animate down and compress their shadow on tap.
`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,
  ),
)