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

WelkBreadCrumbs

A wrapping navigation trail that marks its final item as the current page. The application owns navigation callbacks.

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

WelkBreadCrumbs(
  items: [
    WelkBreadCrumbItem(
      label: const Text('Home'),
      onPressed: () => Navigator.of(context).pushNamed('/'),
    ),
    const WelkBreadCrumbItem(label: Text('Workspace')),
  ],
)

Same look as the React WelkBreadCrumbs.

Variants and behavior

Wraps onto additional lines on narrow screens
Custom separators and disabled destinations
Final item represents the current page

Usage notes and accessibility

WelkBreadCrumbItem requires a Widget label; onPressed defaults to null and enabled to true.
Register destinations in your app before invoking Navigator.pushNamed.
Use semanticLabel to name the navigation trail for screen readers.

Constructor parameters

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

WelkBreadCrumbs parameter reference
Parameter	Type	Default	Description
`items`	`List<WelkBreadCrumbItem>`	Required	Navigation trail in ancestor-to-current order.
`separator`	`Widget`	Text('/')	Separator between destinations.
`semanticLabel`	`String`	'Breadcrumb'	Accessible name of the navigation region.

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