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

WelkTooltip

A collision-aware comic tooltip shown on long press, pointer hover or keyboard focus.

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

WelkTooltip(
  content: 'Save this mission for later',
  variant: WelkTooltipVariant.speech,
  child: WelkIconButton(
    icon: const Icon(Icons.bookmark),
    label: 'Save mission',
    onPressed: () {},
  ),
)

Same look as the React WelkTooltip.

Variants and behavior

Variants: bubble and speech
speach is a compatibility alias for speech
Escape and tap dismissal

Usage notes and accessibility

Use long press to try the tooltip in mobile previews.
Keep essential instructions visible rather than hiding them only in a tooltip.
The tooltip adds semantics but does not replace the accessible label of its interactive child.

Constructor parameters

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

WelkTooltip parameter reference
Parameter	Type	Default	Description
`content`	`String`	Required	Tooltip message.
`child`	`Widget`	Required	Trigger content.
`variant`	`WelkTooltipVariant`	bubble	bubble, speech or compatibility alias speach.

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