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

WelkAvatar

A circular portrait with an ink outline and hard shadow. Choose bundled character art, a custom image or an icon.

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 WelkAvatar(
  alt: 'Workspace administrator',
  variant: WelkAvatarVariant.femaleAdmin,
  size: WelkAvatarSize.large,
)

Same look as the React WelkAvatar.

Variants and behavior

Portraits: user, maleUser, femaleUser, maleAdmin and femaleAdmin
Sizes: small (32), medium (48) and large (64 logical pixels)
Optional background color and hover growth

Usage notes and accessibility

Provide meaningful alt text for the person or role.
Bundled portraits need no asset registration in your app.
Use image for an ImageProvider or icon for custom widget content.

Constructor parameters

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

WelkAvatar parameter reference
Parameter	Type	Default	Description
`alt`	`String`	Required	Accessible image description.
`image`	`ImageProvider?`	null	Custom portrait image.
`icon`	`Widget?`	null	Custom icon content.
`variant`	`WelkAvatarVariant`	user	Bundled portrait when no custom content is supplied.
`size`	`WelkAvatarSize`	medium	small, medium or large.
`color`	`Color?`	null	Background color override.
`growOnHover`	`bool`	false	Enables hover growth on pointer devices.

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