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

WelkOTPInput

A one-time-code editor with hand-drawn digit slots over one native text field, preserving paste, selection, backspace and autofill.

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

  @override
  State<OTPInputExample> createState() => _OTPInputExampleState();
}

class _OTPInputExampleState extends State<OTPInputExample> {
  String _code = '';

  @override
  Widget build(BuildContext context) {
    return WelkOTPInput(
      label: 'Verification code',
      value: _code,
      onChanged: (value) => setState(() => _code = value),
      onComplete: (value) => debugPrint('Code complete'),
    );
  }
}

Same look as the React WelkOTPInput.

Variants and behavior

Six digits by default; configurable positive length
Completion callback when all slots are filled
Disabled, read-only and invalid states

Usage notes and accessibility

value must contain only digits and must not exceed length.
Update value from onChanged; verify the code through your application's authentication flow.
Avoid logging real verification codes or treating onComplete as successful verification.

Constructor parameters

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

WelkOTPInput parameter reference
Parameter	Type	Default	Description
`label`	`String`	Required	Visible label and accessible editor name.
`value`	`String`	Required	Controlled digit string.
`length`	`int`	6	Positive number of digit slots.
`onChanged`	`ValueChanged<String>?`	null	Receives edited digits.
`onComplete`	`ValueChanged<String>?`	null	Receives a complete digit string.
`disabled`	`bool`	false	Disables editing.
`readOnly`	`bool`	false	Prevents editing without disabling the field.
`invalid`	`bool`	false	Marks the code as invalid.
`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,
  ),
)