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

WelkSticker

An image sticker with a true alpha-contoured outline rather than a rectangular border, optional fallback art and hover elevation.

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 WelkSticker(
  image: AssetImage(
    'assets/stickers/superman.png',
    package: 'welkui_flutter',
  ),
  alt: 'Superman sticker',
  width: 128,
  height: 128,
)

Same look as the React WelkSticker.

Variants and behavior

Configurable outline thickness and color
Retries a failed primary image once with fallbackImage
Bundled transparent superhero artwork

Usage notes and accessibility

Use transparent artwork to make the contoured outline visible.
Supply meaningful alt text; use empty alt for purely decorative stickers.
Width and height must be positive and finite; outlineThickness must be non-negative and finite.
onLoad and onError let your application observe image loading outcomes.

Constructor parameters

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

WelkSticker parameter reference
Parameter	Type	Default	Description
`image`	`ImageProvider`	Required	Primary sticker image.
`alt`	`String`	Required	Accessible image description.
`fallbackImage`	`ImageProvider?`	null	Image tried after primary loading fails.
`width`	`double`	160	Sticker width in logical pixels.
`height`	`double`	160	Sticker height in logical pixels.
`outlineThickness`	`double`	6	Width of the alpha-contoured outline.
`outlineColor`	`Color`	white	Color of the sticker outline.
`elevateOnHover`	`bool`	false	Adds hover elevation on pointer devices.
`onLoad`	`VoidCallback?`	null	Called when image loading succeeds.
`onError`	`ValueChanged<Object>?`	null	Receives image loading errors.

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