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

WelkStickerCard

A responsive paper card with overhanging sticker art at its directional start. Add a callback to make the card actionable.

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

WelkStickerCard(
  title: 'Hello, hero.',
  subtitle: 'Your next great mission starts here.',
  sticker: const AssetImage(
    'assets/stickers/superman.png',
    package: 'welkui_flutter',
  ),
  onPressed: () {},
)

Same look as the React WelkStickerCard.

Variants and behavior

Informational or actionable cards
Art stacks in narrow layouts or at large text scales
Optional icon, custom outline and hover growth

Usage notes and accessibility

The sticker is decorative; communicate the card's meaning in title and subtitle.
Omit onPressed for informational content. Set enabled: false to disable an actionable card.
Test long content, RTL and large system text; layout adapts to available width.

Constructor parameters

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

WelkStickerCard parameter reference
Parameter	Type	Default	Description
`title`	`String`	Required	Card heading.
`subtitle`	`String`	Required	Supporting text.
`sticker`	`ImageProvider`	Required	Overhanging decorative artwork.
`fallbackImage`	`ImageProvider?`	null	Fallback sticker artwork.
`icon`	`Widget?`	null	Optional trailing card icon.
`onPressed`	`VoidCallback?`	null	Makes the card actionable.
`enabled`	`bool`	true	Enables the card action.
`growOnHover`	`bool`	true	Enables hover growth on pointer devices.
`outlineThickness`	`double`	6	Sticker outline width.
`outlineColor`	`Color`	white	Sticker outline color.
`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,
  ),
)