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

WelkSnackBar

A non-modal comic notification. Use showWelkSnackBar for centered top or bottom overlays above content and the keyboard.

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: () {
    showWelkSnackBar(
      context: context,
      message: const Text('Changes saved'),
      variant: WelkSnackBarVariant.success,
      position: WelkSnackBarPosition.bottom,
      autoHideDuration: const Duration(seconds: 5),
    );
  },
  child: const Text('Show notification'),
)

Same look as the React WelkSnackBar.

Variants and behavior

Variants: standard, info, success, warning and error
Overlay positions: top and bottom
Manual dismissal or optional auto-hide duration

Usage notes and accessibility

showWelkSnackBar requires context and message and returns a WelkSnackBarController with close() and a closed future.
The helper accepts variant, position (bottom by default), autoHideDuration and closeLabel. Position belongs to the helper, not the widget constructor.
Duration.zero keeps the notification visible. Auto-hide pauses on hover or focus and is suppressed when accessible navigation is enabled.
For inline placement, render WelkSnackBar directly and remove it from your tree in onClose.

Constructor parameters

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

WelkSnackBar parameter reference
Parameter	Type	Default	Description
`message`	`Widget`	Required	Notification content.
`onClose`	`VoidCallback`	Required	Dismisses or removes the inline notification.
`variant`	`WelkSnackBarVariant`	standard	standard, info, success, warning or error.
`autoHideDuration`	`Duration`	Duration.zero	Non-negative duration; zero disables auto-hide.
`closeLabel`	`String`	'Dismiss notification'	Accessible name of the close action.

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