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

WelkInput

A controlled single-line text editor with paper styling, input types, validation messages and an optional labelled trailing action.

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

  @override
  State<InputExample> createState() => _InputExampleState();
}

class _InputExampleState extends State<InputExample> {
  String _name = '';

  @override
  Widget build(BuildContext context) {
    return WelkInput(
      label: 'Hero name',
      placeholder: 'Your secret identity',
      value: _name,
      onChanged: (value) => setState(() => _name = value),
      endAction: WelkInputAction(
        icon: const Icon(Icons.close),
        label: 'Clear name',
        onPressed: () => setState(() => _name = ''),
      ),
    );
  }
}

Same look as the React WelkInput.

Variants and behavior

Types: text, email, password, search, tel and url
Disabled, read-only, required and invalid states
Native editing, autofill, input formatting and submission

Usage notes and accessibility

value is the source of truth; update it from onChanged to accept edits.
WelkInputAction requires icon, label and onPressed; disabled defaults to false.
Set invalid and errorText from your app's validation; this widget is not a FormField.
Use a visible label even when placeholder text is present.

Constructor parameters

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

WelkInput parameter reference
Parameter	Type	Default	Description
`label`	`String`	Required	Visible input label.
`value`	`String`	Required	Controlled text value.
`onChanged`	`ValueChanged<String>?`	null	Receives edited text.
`type`	`WelkInputType`	text	text, email, password, search, tel or url.
`placeholder`	`String?`	null	Hint shown in an empty editor.
`endAction`	`WelkInputAction?`	null	Independently labelled trailing action.
`disabled`	`bool`	false	Disables editing and actions.
`readOnly`	`bool`	false	Allows reading and selection without editing.
`invalid`	`bool`	false	Marks the field as invalid.
`errorText`	`String?`	null	Validation error message.
`isRequired`	`bool`	false	Marks the field as required.
`focusNode`	`FocusNode?`	null	Optional focus node to control focus.
`autofocus`	`bool`	false	Requests focus when first built.
`onSubmitted`	`ValueChanged<String>?`	null	Receives text when the keyboard action is submitted.
`textInputAction`	`TextInputAction?`	null	Native keyboard action.
`autofillHints`	`Iterable<String>?`	null	Native autofill hints.
`inputFormatters`	`List<TextInputFormatter>?`	null	Native editing filters; import flutter/services.dart for formatter classes.

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