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

WelkImage

Network and asset images with asymmetric outlines and hard shadows. Failed network images use a stable comic fallback.

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 WelkImage.asset(
  'assets/fallbacks/comic_bg_02.jpg',
  package: 'welkui_flutter',
  width: 280,
  height: 210,
  semanticLabel: 'Comic-style mission artwork',
)

Same look as the React WelkImage.

Variants and behavior

WelkImage.network loads a URL; WelkImage.asset loads an asset
Defaults to a 4:3 frame unless both dimensions are supplied
Five bundled comic fallbacks or a custom fallback asset

Usage notes and accessibility

Both constructors take source as their first positional argument.
For network images, Android release apps need the INTERNET manifest permission.
A network fallback is selected once per failed source. Fallback asset errors are surfaced rather than replaced recursively.
App assets must be registered in your pubspec; use package for assets bundled in another package.

Constructor parameters

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

WelkImage parameter reference
Parameter	Type	Default	Description
`source`	`String (positional)`	Required	Network URL or asset path, depending on constructor.
`package`	`String?`	null	Asset constructor only: owning asset package.
`fallbackAsset`	`String?`	null	Network constructor only: custom failure asset.
`fallbackPackage`	`String?`	null	Network constructor only: package owning the fallback asset.
`width`	`double?`	null	Frame width in logical pixels.
`height`	`double?`	null	Frame height in logical pixels.
`fit`	`BoxFit`	cover	How the image fills its frame.
`alignment`	`AlignmentGeometry`	center	Alignment within the frame.
`semanticLabel`	`String?`	null	Accessible image description.
`excludeFromSemantics`	`bool`	false	Excludes decorative artwork from screen readers.

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