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

WelkQRCode

A locally encoded, scannable QR code for HTTP(S) URLs, with a four-module quiet zone and optional comic card treatment.

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 WelkQRCode(
  url: 'https://ui.welkdock.com/flutter/',
  variant: WelkQRCodeVariant.card,
  title: 'Scan for comic magic',
  subtitle: 'Explore WelkUI Flutter',
  size: 192,
)

Same look as the React WelkQRCode.

Variants and behavior

Variants: standard and card
Rounded modules by default; originalCode uses square modules
Invalid or oversized URLs display a validation message

Usage notes and accessibility

Encoding happens locally with the Dart qr package, without a remote QR service.
Only HTTP and HTTPS URLs are accepted; invalid input produces a visible error instead of an unscannable pattern.
Preserve the quiet zone and test scanning at the size used in your app.

Constructor parameters

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

WelkQRCode parameter reference
Parameter	Type	Default	Description
`url`	`String`	Required	HTTP(S) URL to encode.
`variant`	`WelkQRCodeVariant`	standard	standard or card.
`title`	`String?`	null	Optional card heading.
`subtitle`	`String?`	null	Optional card supporting text.
`cardColor`	`Color?`	null	Card background override.
`originalCode`	`bool`	false	Uses square rather than rounded QR modules.
`size`	`double`	192	Positive, finite QR size in logical pixels.

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