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

WelkDialog

A paper modal surface for alerts and confirmations. Present it with showWelkDialog for modal focus handling and dismissal.

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

WelkButton(
  onPressed: () async {
    await showWelkDialog<void>(
      context: context,
      builder: (dialogContext) => const WelkDialog(
        title: Text('Mission complete'),
        variant: WelkDialogVariant.success,
        child: Text('Your changes have been saved.'),
      ),
    );
  },
  child: const Text('Show dialog'),
)

Same look as the React WelkDialog.

Variants and behavior

Variants: alert, info, warning, error and success
Types: standard and confirmation
Custom close, primary, yes and no actions

Usage notes and accessibility

showWelkDialog requires context and builder; closeOnTapOutside defaults to false and useRootNavigator to true.
Custom action callbacks replace automatic dismissal. Pop the dialog navigator yourself when an action should close it.
The helper traps modal focus and restores it after dismissal; test Android back and screen-reader navigation.

Constructor parameters

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

WelkDialog parameter reference
Parameter	Type	Default	Description
`title`	`Widget`	Required	Dialog heading.
`child`	`Widget?`	null	Dialog body.
`variant`	`WelkDialogVariant`	alert	alert, info, warning, error or success.
`type`	`WelkDialogType`	standard	standard or confirmation.
`onClose`	`VoidCallback?`	null	Custom close behavior; defaults to Navigator.pop.
`closeLabel`	`String`	'Close dialog'	Accessible name of the close action.
`buttonText`	`String`	'Okay'	Standard action label.
`onPressed`	`VoidCallback?`	null	Standard action override; defaults to closing.
`yesText`	`String`	'Yes'	Confirmation positive label.
`noText`	`String`	'No'	Confirmation negative label.
`onYesPressed`	`VoidCallback?`	null	Positive action override.
`onNoPressed`	`VoidCallback?`	null	Negative action override.

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