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

WelkMenu

Navigation with crisp separators, accent-filled active destinations and nested paper panels. Works with any router.

Install

Terminal

flutter pub add welkui_flutter

Latest release: welkui_flutter 0.0.8 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';

WelkMenu(
  items: const [
    WelkMenuItem(title: 'Home', route: '/'),
    WelkMenuItem(
      title: 'Workspace',
      route: '/workspace',
      children: [
        WelkMenuItem(title: 'Members', route: '/members'),
        WelkMenuItem(title: 'Settings', route: '/settings'),
      ],
    ),
  ],
  variant: WelkMenuVariant.nested,
  collapsible: true,
  activeRoute: '/members',
  onSelected: (route) => Navigator.of(context).pushNamed(route),
)

Same look as the React WelkMenu.

Variants and behavior

Standard (default): displays root destinations only
Nested: expandable branches with links to parent and child destinations
collapsible: true adds a menu toggle; initially expanded
activeRoute highlights the matching destination
288 logical pixels wide, capped by the available space

Usage notes and accessibility

The parent owns navigation and activeRoute. Register destinations with your app's navigator.
Routes must be unique within each menu. WelkMenuItem takes title, route and optional children.
Branches dismiss on outside interaction or selection.
Keyboard: Tab to move, Enter or Space to activate, Escape to dismiss.

Constructor parameters

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

WelkMenu parameter reference
Parameter	Type	Default	Description
`items`	`List<WelkMenuItem>`	Required	Destinations. Each has a title, a unique route and optional children.
`onSelected`	`ValueChanged<String>?`	Required	Called once with the selected route. Pass null to disable destinations.
`variant`	`WelkMenuVariant`	standard	standard or nested.
`activeRoute`	`String?`	null	Route of the highlighted destination.
`collapsible`	`bool`	false	Adds a toggle to collapse the menu.
`semanticLabel`	`String`	'Main navigation'	Accessible name of the navigation region.

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