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

WelkTabs

Accessible paper tabs with horizontal or vertical orientation, controlled or local selection and disabled-item skipping.

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

const WelkTabs(
  label: 'Workspace sections',
  defaultValue: 'overview',
  items: [
    WelkTabItem(
      label: Text('Overview'),
      value: 'overview',
      content: Text('Your mission at a glance.'),
    ),
    WelkTabItem(
      label: Text('Crew'),
      value: 'crew',
      content: Text('Meet the team.'),
    ),
  ],
)

Same look as the React WelkTabs.

Variants and behavior

Variants: defaultStyle and withBg
Controlled value or local defaultValue
Arrow-key activation with Home and End navigation

Usage notes and accessibility

WelkTabItem requires Widget label, String value and Widget content; disabled defaults to false.
Keep values unique. For controlled tabs, pass value and update it from onValueChange.
Horizontal arrow navigation respects text direction; disabled tabs are skipped.

Constructor parameters

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

WelkTabs parameter reference
Parameter	Type	Default	Description
`label`	`String`	Required	Accessible name of the tab group.
`items`	`List<WelkTabItem>`	Required	Tabs and their panels.
`value`	`String?`	null	Controlled selected tab value.
`defaultValue`	`String?`	null	Initial local selection; falls back to the first enabled tab.
`onValueChange`	`ValueChanged<String>?`	null	Receives selection changes.
`variant`	`WelkTabsVariant`	defaultStyle	defaultStyle or withBg.
`orientation`	`Axis`	horizontal	horizontal or vertical.

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