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

WelkRadioGroup

A controlled, labelled group of radio options with wrapping arrow-key navigation and disabled-option skipping.

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

  @override
  State<RadioGroupExample> createState() => _RadioGroupExampleState();
}

class _RadioGroupExampleState extends State<RadioGroupExample> {
  String? _role;

  @override
  Widget build(BuildContext context) {
    return WelkRadioGroup(
      label: 'Choose your role',
      value: _role,
      options: const [
        WelkRadioOption(value: 'hero', label: 'Hero'),
        WelkRadioOption(value: 'sidekick', label: 'Sidekick'),
      ],
      onChanged: (value) => setState(() => _role = value),
    );
  }
}

Same look as the React WelkRadioGroup.

Variants and behavior

One shared String value for the group
Individual options or the entire group can be disabled
Required selection indicator

Usage notes and accessibility

WelkRadioOption requires String value and label; disabled defaults to false.
Option values must be unique; update value in onChanged.
Arrow keys wrap between enabled options; Home and End navigate to the edges.

Constructor parameters

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

WelkRadioGroup parameter reference
Parameter	Type	Default	Description
`label`	`String`	Required	Accessible and visible group label.
`options`	`List<WelkRadioOption>`	Required	Radio choices with unique values.
`value`	`String?`	Required	Selected option value, or null.
`onChanged`	`ValueChanged<String>?`	null	Receives the selected option value. Null disables the group.
`disabled`	`bool`	false	Disables all options.
`isRequired`	`bool`	false	Marks the group as required.

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