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

WelkRadio

A controlled labelled radio option with a hand-drawn circular control. Activating an already selected radio is a no-op.

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

  @override
  State<RadioExample> createState() => _RadioExampleState();
}

class _RadioExampleState extends State<RadioExample> {
  bool _selected = false;

  @override
  Widget build(BuildContext context) {
    return WelkRadio(
      label: 'Be a hero',
      selected: _selected,
      onChanged: (value) => setState(() => _selected = value),
    );
  }
}

Same look as the React WelkRadio.

Variants and behavior

Selected, unselected and disabled states
Parent owns selection across related options
Label and radio activate together

Usage notes and accessibility

Use WelkRadioGroup for a labelled set with shared value and arrow-key navigation.
Null onChanged or disabled: true disables interaction.
Selecting an option requests true; tapping it again does not deselect it.

Constructor parameters

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

WelkRadio parameter reference
Parameter	Type	Default	Description
`selected`	`bool`	Required	Controlled selection state.
`label`	`String`	Required	Visible option label.
`onChanged`	`ValueChanged<bool>?`	null	Receives the requested selection.
`disabled`	`bool`	false	Disables the radio and label.
`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,
  ),
)