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

WelkTimePicker

A controlled 24-hour time editor with scrollable time columns and optional independent seconds.

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

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

  @override
  State<TimePickerExample> createState() => _TimePickerExampleState();
}

class _TimePickerExampleState extends State<TimePickerExample> {
  WelkTime? _time = const WelkTime(hour: 9, minute: 30);

  @override
  Widget build(BuildContext context) {
    return WelkTimePicker(
      label: 'Launch time',
      value: _time,
      showSeconds: true,
      onChanged: (value) => setState(() => _time = value),
    );
  }
}

Same look as the React WelkTimePicker.

Variants and behavior

HH:mm or HH:mm:ss editing
WelkTime models wall-clock time without a date or time zone
Required-value and custom validation support

Usage notes and accessibility

WelkTime requires hour (0-23) and minute (0-59); second defaults to 0 (0-59).
Use WelkTime.fromTimeOfDay or toTimeOfDay to interoperate with Material time values.
Invalid drafts remain visible but are not emitted. Clearing emits null unless isRequired.
Hiding seconds preserves their value. Null onChanged disables editing and all columns.

Constructor parameters

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

WelkTimePicker parameter reference
Parameter	Type	Default	Description
`label`	`String`	Required	Visible editor label.
`value`	`WelkTime?`	Required	Controlled wall-clock time, or null.
`onChanged`	`ValueChanged<WelkTime?>?`	null	Receives valid time changes.
`showSeconds`	`bool`	false	Displays and edits independent seconds.
`isRequired`	`bool`	false	Requires a time and prevents clearing.
`validator`	`String? Function(WelkTime?)?`	null	Returns an error message or null.
`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,
  ),
)