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

WelkAttachment

File selection and validation UI with attachment previews. Connect your own mobile file picker without coupling the widget to a picker plugin.

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

WelkAttachment(
  label: const Text('Mission files'),
  accept: '.pdf,image/*',
  maxFileSize: 5 * 1024 * 1024,
  maxFiles: 3,
  initialFiles: const [
    WelkAttachmentFile(
      name: 'brief.pdf',
      size: 2048,
      mimeType: 'application/pdf',
    ),
  ],
  onFilesChange: (files) {
    debugPrint('Selected ${files.length} files');
  },
)

Same look as the React WelkAttachment.

Variants and behavior

Single or multiple file selection
Filter extensions or MIME types and limit file sizes or counts
Integrates with Flutter Form validation and saving
Accepts custom image, audio or video preview widgets

Usage notes and accessibility

The example displays an existing attachment. Supply onSelectFiles to enable adding files with your app's platform picker.
onSelectFiles returns Future<List<WelkAttachmentFile>?>; return null when the user cancels.
WelkAttachmentFile requires name and size in bytes, with optional mimeType (default empty) and preview.
This widget does not upload files. Keep file handles and uploads in your application.

Constructor parameters

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

WelkAttachment parameter reference
Parameter	Type	Default	Description
`label`	`Widget`	Required	Visible attachment field label.
`onSelectFiles`	`Future<List<WelkAttachmentFile>?> Function()?`	null	Opens your application's picker. Null disables file selection.
`onFilesChange`	`ValueChanged<List<WelkAttachmentFile>>?`	null	Receives the selected list after additions or removals.
`multiple`	`bool`	true	Allows multiple attachments.
`accept`	`String?`	null	Comma-separated extensions, MIME types or MIME wildcards.
`maxFileSize`	`int?`	null	Positive maximum size per file, in bytes.
`maxFiles`	`int?`	null	Positive maximum attachment count.
`disabled`	`bool`	false	Disables attachment interactions.
`isRequired`	`bool`	false	Requires at least one file during validation.
`initialFiles`	`List<WelkAttachmentFile>`	[]	Initial attachments; not a controlled value.
`validator`	`FormFieldValidator<List<WelkAttachmentFile>>?`	null	Additional Form validation.
`onSaved`	`FormFieldSetter<List<WelkAttachmentFile>>?`	null	Called when the enclosing Form is saved.
`autovalidateMode`	`AutovalidateMode`	disabled	When FormField validation runs.

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