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

WelkIconButton

An icon action with a hard shadow, press feedback and a required accessible label. Its 44-pixel artwork has a 48-pixel touch target.

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

WelkIconButton(
  icon: const Icon(Icons.favorite),
  label: 'Save to favorites',
  onPressed: () {},
)

Same look as the React WelkIconButton.

Variants and behavior

Variants: standard and text
WelkIconButton.close provides the modal close treatment
Null onPressed disables the action

Usage notes and accessibility

label is the accessible action name, not visible button text.
WelkIconButton.close requires label and accepts onPressed, focusNode, autofocus and dialog (default false).
Use dialog: true only on the close constructor for the dialog-specific surface.

Constructor parameters

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

WelkIconButton parameter reference
Parameter	Type	Default	Description
`icon`	`Widget`	Required	Icon content; supplied automatically by the close constructor.
`label`	`String`	Required	Accessible action name.
`onPressed`	`VoidCallback?`	null	Tap callback. Null disables interaction.
`variant`	`WelkIconButtonVariant`	standard	standard or text; standard constructor only.
`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,
  ),
)