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

WelkDrawer

A scrollable modal edge panel with a paper surface. Open it from any edge using showWelkDrawer.

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 showWelkDrawer<void>(
      context: context,
      position: WelkDrawerPosition.right,
      builder: (drawerContext) => const WelkDrawer(
        title: Text('Mission details'),
        child: Text('Everything your crew needs to know.'),
      ),
    );
  },
  child: const Text('Open drawer'),
)

Same look as the React WelkDrawer.

Variants and behavior

Positions: left, right, top and bottom
Modal focus handling, Android back and Escape dismissal
Slide and fade transitions respect reduced motion

Usage notes and accessibility

showWelkDrawer requires context and builder; position defaults to right, closeOnTapOutside to false and useRootNavigator to true.
Set position on the helper to choose the entrance edge; it supplies that placement to the drawer.
Custom onClose replaces Navigator.pop; dismiss the route yourself when overriding it.

Constructor parameters

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

WelkDrawer parameter reference
Parameter	Type	Default	Description
`title`	`Widget`	Required	Drawer heading.
`child`	`Widget`	Required	Scrollable drawer body.
`position`	`WelkDrawerPosition`	right	Inline placement; the showWelkDrawer helper supplies its position when presented modally.
`onClose`	`VoidCallback?`	null	Custom close behavior; defaults to Navigator.pop.
`closeLabel`	`String`	'Close drawer'	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,
  ),
)