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

WelkCheckBox

A controlled checkbox with a visible label, a mixed selection state and a comfortable mobile touch target.

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

  @override
  State<CheckBoxExample> createState() => _CheckBoxExampleState();
}

class _CheckBoxExampleState extends State<CheckBoxExample> {
  bool _included = false;

  @override
  Widget build(BuildContext context) {
    return WelkCheckBox(
      label: 'Count me in',
      value: _included,
      onChanged: (value) => setState(() => _included = value),
    );
  }
}

Same look as the React WelkCheckBox.

Variants and behavior

Unchecked, checked and indeterminate states
Null onChanged or disabled: true disables interaction
Tapping a mixed checkbox requests true

Usage notes and accessibility

The parent must update value when onChanged fires.
indeterminate is a visual mixed state separate from value.
Keep the label descriptive; the label and control form one accessible interaction.

Constructor parameters

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

WelkCheckBox parameter reference
Parameter	Type	Default	Description
`value`	`bool`	Required	Controlled checked state.
`label`	`String`	Required	Visible label and accessible name.
`onChanged`	`ValueChanged<bool>?`	null	Receives the requested value. Null disables interaction.
`indeterminate`	`bool`	false	Displays a mixed selection state.
`disabled`	`bool`	false	Disables the checkbox 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,
  ),
)