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

WelkAccordion

A paper disclosure with vertical, horizontal and nested layouts. Manage expansion locally or control it from your app.

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';

const WelkAccordion(
  title: Text('What is inside?'),
  initiallyExpanded: true,
  child: Text('A little comic magic for your mobile app.'),
)

Same look as the React WelkAccordion.

Variants and behavior

Variants: vertical, horizontal and nested
Omit expanded to use initiallyExpanded and local state
Set expanded and onChanged for controlled expansion
Optional outside-click dismissal and fixed panel width

Usage notes and accessibility

Use a descriptive title; the disclosure exposes its expanded state to assistive technology.
Nest another WelkAccordion in child for multi-level disclosures.
fixedWidth must be positive and finite. Test horizontal panels in narrow layouts.

Constructor parameters

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

WelkAccordion parameter reference
Parameter	Type	Default	Description
`title`	`Widget`	Required	Content of the disclosure header.
`child`	`Widget`	Required	Content shown while expanded.
`variant`	`WelkAccordionVariant`	vertical	vertical, horizontal or nested.
`expanded`	`bool?`	null	Controlled expansion state; null uses local state.
`initiallyExpanded`	`bool`	false	Initial state in uncontrolled mode.
`onChanged`	`ValueChanged<bool>?`	null	Receives the requested expansion state.
`enabled`	`bool`	true	Whether the disclosure can be toggled.
`closeOnOutsideClick`	`bool`	false	Closes on interaction outside the disclosure.
`fixedWidth`	`double?`	null	Optional positive, finite panel width.
`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,
  ),
)