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

WelkDateInput

An editable date field with a dismissible mobile calendar dialog. Invalid text remains visible without changing the selected date.

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 DateInputExample extends StatefulWidget {
  const DateInputExample({super.key});

  @override
  State<DateInputExample> createState() => _DateInputExampleState();
}

class _DateInputExampleState extends State<DateInputExample> {
  DateTime? _date;

  @override
  Widget build(BuildContext context) {
    return WelkDateInput(
      label: 'Mission date',
      value: _date,
      minDate: DateTime(2026, 1, 1),
      maxDate: DateTime(2027, 12, 31),
      onChanged: (value) => setState(() => _date = value),
    );
  }
}

Same look as the React WelkDateInput.

Variants and behavior

Calendar opens from its button, not while typing
Inclusive minimum and maximum dates
Required-value and custom validation support

Usage notes and accessibility

Dates are local civil dates; time-of-day and UTC offsets are ignored.
Type YYYY-MM-DD. Invalid and out-of-range edits are not emitted.
Null onChanged disables both text editing and the calendar button.
Use WelkDatePicker when the calendar should stay inline.

Constructor parameters

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

WelkDateInput parameter reference
Parameter	Type	Default	Description
`label`	`String`	Required	Visible field label.
`value`	`DateTime?`	Required	Selected local date, or null when empty.
`onChanged`	`ValueChanged<DateTime?>?`	null	Receives valid dates or null when cleared. Null disables the control.
`minDate`	`DateTime?`	null	Earliest selectable date, inclusive.
`maxDate`	`DateTime?`	null	Latest selectable date, inclusive.
`initialDisplayDate`	`DateTime?`	null	Month displayed for an empty field; defaults to today.
`isRequired`	`bool`	false	Prevents clearing and validates an empty value.
`validator`	`String? Function(DateTime?)?`	null	Returns an error message, or null for a valid value.
`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,
  ),
)