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

WelkSwitch

A compact switch with a visible label and a subtly asymmetric track. The parent owns the value.

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

class NotificationSetting extends StatefulWidget {
  const NotificationSetting({super.key});

  @override
  State<NotificationSetting> createState() => _NotificationSettingState();
}

class _NotificationSettingState extends State<NotificationSetting> {
  bool notificationsEnabled = false;

  @override
  Widget build(BuildContext context) {
    return WelkSwitch(
      value: notificationsEnabled,
      label: 'Notifications',
      onChanged: (value) => setState(() => notificationsEnabled = value),
    );
  }
}

Same look as the React WelkSwitch.

Variants and behavior

Muted track when off, accent track when on
Animated thumb; tapping the track or the label toggles once
onChanged: null disables the whole switch and label row
Supports right-to-left layouts

Usage notes and accessibility

Always pass a visible label; it is also the accessible name.
Exposes a single switch semantics node for TalkBack and VoiceOver.
The thumb animation respects the platform's reduced-motion setting.

Constructor parameters

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

WelkSwitch parameter reference
Parameter	Type	Default	Description
`value`	`bool`	Required	Whether the switch is on.
`label`	`String`	Required	Visible label and accessible name.
`onChanged`	`ValueChanged<bool>?`	null	Receives the new value. Null disables the switch and label.
`focusNode`	`FocusNode?`	null	Optional focus node to control focus.
`autofocus`	`bool`	false	Requests focus when first built.

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