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

WelkDatePicker

An inline calendar with an editable YYYY-MM-DD field, controlled selection and date bounds.

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

  @override
  State<DatePickerExample> createState() => _DatePickerExampleState();
}

class _DatePickerExampleState extends State<DatePickerExample> {
  DateTime? _date;

  @override
  Widget build(BuildContext context) {
    return WelkDatePicker(
      label: 'Departure date',
      value: _date,
      onChanged: (value) => setState(() => _date = value),
    );
  }
}

Same look as the React WelkDatePicker.

Variants and behavior

Calendar stays visible in the page
Month navigation and keyboard-operable date selection
Required-value and custom validation support

Usage notes and accessibility

Dates represent local civil days, not timestamps.
Invalid drafts and dates outside minDate/maxDate are never emitted.
Null onChanged disables text editing and calendar selection.
Use WelkDateInput for a compact field that opens a calendar dialog.

Constructor parameters

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

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