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

WelkDropDown

A controlled select with a dismissible, viewport-clamped popup, optional local search and disabled options.

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

  @override
  State<DropDownExample> createState() => _DropDownExampleState();
}

class _DropDownExampleState extends State<DropDownExample> {
  String? _role;

  @override
  Widget build(BuildContext context) {
    return WelkDropDown(
      label: 'Mission role',
      value: _role,
      searchable: true,
      options: const [
        WelkDropDownOption(value: 'hero', label: 'Hero'),
        WelkDropDownOption(value: 'sidekick', label: 'Sidekick'),
      ],
      onChanged: (value) => setState(() => _role = value),
    );
  }
}

Same look as the React WelkDropDown.

Variants and behavior

Standard and searchable option lists
Popup stays inside the viewport
Disabled options are skipped during keyboard navigation

Usage notes and accessibility

WelkDropDownOption requires String value and label; disabled defaults to false.
Keep option values unique and update value from onChanged.
Changing options, selection or availability closes an open popup.
Null onChanged or disabled: true disables selection.

Constructor parameters

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

WelkDropDown parameter reference
Parameter	Type	Default	Description
`label`	`String`	Required	Visible label.
`options`	`List<WelkDropDownOption>`	Required	Selectable options.
`value`	`String?`	Required	Selected option value, or null.
`onChanged`	`ValueChanged<String>?`	null	Receives the selected option value.
`searchable`	`bool`	false	Enables local option filtering.
`placeholder`	`String`	'Select an option'	Text when no option is selected.
`disabled`	`bool`	false	Disables the select.
`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.

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