components library

Only the kit components, without AppTheme or AppColors. Use this import in apps that already have ThemeData itself: widgets do not require no theme configuration and use the default palette until you provide another via LumenScope or LumenThemeExt.

import 'package:lumen_kit/components.dart';

Classes

LumenActionContent
Default action content: spinner (when busy) or icon, followed by the label.
LumenAnimatedGridBackground
Decorative backdrop with futuristic grid, gradient and glow orbs.
LumenAppBar
AppBar with neon identity: transparent, with bottom gradient line and typography consistent with the theme.
LumenAvatar
Circular avatar with gradient border and optional glow.
LumenAvatarGroup
Stacked avatars with overlay and a "+N" for overflow.
LumenBadge
Small stamp (usually for accountants) that can be left free or anchored to child in the upper right corner.
LumenBanner
Inline alert that remains on the screen until someone closes. Unlike toast and snack bars, it doesn't disappear on its own. No onDismiss there is close button.
LumenBottomNavBar
Bottom bar with 3-5 items, selected item highlighted with glow pill.
LumenButton
Neon button with three variants: LumenButtonVariant.solid, LumenButtonVariant.outline and LumenButtonVariant.ghost. For primary CTA with full gradient, prefer LumenButtonVariant.solid (or the historical shortcut LumenCta).
LumenCard
Neon theme base container: subtle gradient + accent border + optional onTap.
LumenCarousel
PageView with rounded cards, the current page highlighted and a LumenPageIndicator below.
LumenCheckbox
Square checkbox with accent border and gradient marker when active.
LumenChip
Selectable chip: base of filters and choices.
LumenChipItem<T>
Option of LumenChoiceChips and LumenFilterChips.
LumenChoiceChips<T>
Group of single-choice chips (e.g.
LumenCircularProgress
Circular spinner with neon gradient.
LumenContextMenu<T>
Open a context menu with right click (desktop/web) or long press (mobile) on child, in the pointer position. It uses GestureDetector because it needs the position of the pointer, which the LumenPressable does not expose; Screen readers open the menu by swiping long press.
LumenCta
Primary CTA with neon gradient.
LumenDataTable
Themed wrapper about DataTable.
LumenDatePicker
Read-only field that opens showLumenDatePicker when touched.
LumenDecorations
Decorations shared by kit widgets.
LumenDialog
Stylized dialog with gradient surface, accent border and theme typography.
LumenDivider
Gradient accent divider that fades at the ends.
LumenDrawer
Side drawer with gradient background and vertical accent border. Use directly on Scaffold(drawer: LumenDrawer(...)). Children can be any widgets — usually a custom header followed by LumenDrawerItems.
LumenDrawerItem
Item defaults to LumenDrawer, with glow in the selected state.
LumenDropdown<T>
Stylized dropdown with theme border and glow.
LumenDropdownItem<T>
Item displayed on LumenDropdown.
LumenEmptyState
Block for when there is no data: icon, title, text and a CTA. Without onPressed, the button does not appear.
LumenExpansionTile
Expandable tile with surface header, icon with animated rotation and border accent when opened.
LumenFab
Floating Action Button in neon style.
LumenFilterChips<T>
Group of filter chips (several marked at the same time, with check).
LumenGlowOrbSpec
Configuration of a glow orb positioned in the background.
LumenIconButton
Circular/square button containing just one icon, in neon style.
LumenLabeled
Control followed by a text label, with the color turned off when disabled.
LumenLinearProgress
Linear progress bar with neon and glow gradient. If value is null, displays indeterminate animation.
LumenList
Lazy list for many items.
LumenListTile
Themed ListTile with translucent surface, soft accent border and state selected highlighted by glow.
LumenLoadingOverlay
Covers child with a layer that blocks touch, focus and screen reader while loading is true, with spinner and message in the center. To lock the entire screen during an operation (e.g. submit), without save loading state, use showLumenLoading.
LumenLoadingPanel
Panel with spinner and message used by LumenLoadingOverlay and showLumenLoading.
LumenMenuButton<T>
"⋮" button (or another icon) that opens an action menu anchored to it.
LumenMenuDivider<T>
Line separating groups of actions.
LumenMenuEntry<T>
Entering a neon menu: LumenMenuItem or LumenMenuDivider.
LumenMenuItem<T>
Action of a neon menu.
LumenMotion
Motion helpers that respect the system's "reduce animations".
LumenNavigationCard
Reusable main screen navigation card.
LumenNavItem
Item from LumenBottomNavBar / LumenNavRail.
LumenNavRail
Side variant (tablet/desktop).
LumenPageIndicator
Page dots for onboarding and galleries.
LumenPalette
Neon theme instantiable palette.
LumenPinField
Code field (OTP): a sequence of places controlled by value. onChanged == null disables. onCompleted fires when the last house is filled. Pasting a code completes the sequence all at once.
LumenPressable
Touchable Kit Base: Applies Disabled Opacity, Cropped Ripple in borderRadius, keyboard focus and button semantics. Use to build your own components with the same behavior as kit buttons:
LumenQuantityStepper
Numeric input "− 1 +" for cart and settings.
LumenRadio<T>
Circular radio with glow in the selected state.
LumenRangeSlider
Interval slider (two thumbs) with the same look as LumenSlider.
LumenRating
Rating stars.
LumenScope
Sets palette and neon style for a subtree without touching ThemeData. Useful when the app has its own theme and only wants to use some components of the kit with other colors:
LumenSearchBar
Compact search bar, with magnifying glass prefix and clear button when there is content.
LumenSegmentedControl
Segmented control compact (pill).
LumenSkeleton
Skeleton/shimmer in neon style.
LumenSlider
Slider with accent gradient track and glow thumb.
LumenStatusChip
Compact chip that communicates status by color semantics.
LumenStep
Definition of each step.
LumenStepper
Themed stepper with balls connected by gradient lines.
LumenStyle
Kit visual effect tokens: shadow, fill, surface, border and background.
LumenSwitch
Stylized switch with translucent track, thumb accent and glow when active.
LumenTabItem
Item from LumenTabs / LumenSegmentedControl.
LumenTableRow
"By hand" line for those who want to compose a light table without DataTable (ex: inside cards).
LumenTabs
Horizontal tabs with accent gradient indicator. Controlled: indicator tracks selectedIndex even when it changes from the outside (e.g. swipe on a PageView or programmatic navigation).
LumenTag
Compact tag — lightweight variation of LumenStatusChip, with no required icon and no strong glow.
LumenTextField
Neon text field.
LumenThemeExt
ThemeExtension to access the palette via Theme.of(context).extension<LumenThemeExt>().
LumenTimePicker
Read-only field that opens showLumenTimePicker when touched.
LumenTooltip
Stylized tooltip following the neon identity (translucent surface, accent + glow).

Enums

LumenBackgroundKind
LumenAnimatedGridBackground decoration.
LumenButtonVariant
Visual variants of LumenButton.
LumenIconButtonShape
LumenIconButton format.
LumenIconButtonVariant
Visual variants of LumenIconButton.
LumenPreset
Ready-made palettes.
LumenShadowKind
How widget shadows are drawn.
LumenStatusTone
Semantic tone for a status chip.
LumenStepperDirection
LumenStepper presentation direction.
LumenToastPosition
Vertical position of the toast on the screen.

Extensions

LumenOutlineColor on Color
Alpha that does not erase what the color in the palette already carries. Color.withValues replaces alpha. scaleAlpha multiplies (a * factor). outlineAlpha is the contour case: in the dark, LumenPalette.surfaceOutline is a translucent cyan and the widgets ask for 0.4–0.9 for the border to appear, so this value comes directly. In light the token is black at ~8% (0x15000000). Replacing with 0.9 turns a black border. In this case the order is scaled based on the token's alpha, with a ceiling of 0.28.
LumenStatusToneColor on LumenStatusTone
Resolves the color of a LumenStatusTone from the active palette.

Constants

kLumenDisabledOpacity → const double
Opacity applied to any disabled widgets in the kit.
kLumenFastDuration → const Duration
Duration of short transitions (hover, selection, toggle).
kLumenMediumDuration → const Duration
Duration of average transitions (expand, swap content).

Functions

lumenMenuPositionAt(BuildContext context, Offset globalPosition) → RelativeRect
Position for showLumenMenu at a global point on the screen (e.g.: TapUpDetails.globalPosition from a right click).
neonMenuPositionAt(BuildContext context, Offset globalPosition) → RelativeRect
Old name of lumenMenuPositionAt.
showLumenBottomSheet<T>({required BuildContext context, required WidgetBuilder builder, Color? accentColor, bool isScrollControlled = true, bool isDismissible = true, bool enableDrag = true}) → Future<T?>
Opens a bottom sheet modal with the neon theme aesthetic (background gradient, accent border on top and handle). builder creates the internal content. The isScrollControlled flags, isDismissible and enableDrag are passed to showModalBottomSheet.
showLumenDatePicker({required BuildContext context, required DateTime initialDate, required DateTime firstDate, required DateTime lastDate, Color? accentColor, String? helpText}) → Future<DateTime?>
Opens the default showDatePicker applying the neon theme. Uses initialDate as the start date and limits the selection to the range between firstDate and lastDate. accentColor replaces the default accent and helpText is passed to the Material picker.
showLumenDialog<T>({required BuildContext context, required String title, required Widget content, List<Widget> actions = const <Widget>[], Color? accent, IconData? icon, bool barrierDismissible = true}) → Future<T?>
Helper to display a LumenDialog with showDialog. Returns the same result as showDialog. barrierDismissible controls whether tapping outside the dialog closes the modal route.
showLumenLoading<T>({required BuildContext context, required Future<T> task(), String? message, Color? accentColor, Color? barrierColor}) → Future<T>
Lock the entire screen with LumenLoadingPanel while task runs and returns its result.
showLumenMenu<T>({required BuildContext context, required List<LumenMenuEntry<T>> items, RelativeRect? position, Color? accentColor, T? initialValue}) → Future<T?>
Opens a floating menu with items and returns the chosen value, or null if the menu is closed without a choice. Without position, the menu opens anchored just below the widget owner of context (like the "⋮" on a card). To open at a point on the screen (e.g.: right click), use lumenMenuPositionAt.
showLumenSnackBar({required BuildContext context, required String message, LumenSnackTone tone = LumenStatusTone.info, IconData? icon, Duration duration = const Duration(seconds: 4), SnackBarAction? action}) → ScaffoldFeatureController<SnackBar, SnackBarClosedReason>
Displays a styled snackbar on the nearest ScaffoldMessenger. Reuses the SnackBar from the Material but exchanges the content for a surface with accent + glow border, in the style of the rest of the kit. tone sets default color and icon, duration controls display time and action adds a textual action at the end of the snackbar.
showLumenTimePicker({required BuildContext context, required TimeOfDay initialTime, Color? accentColor, String? helpText, bool? use24HourFormat, TimePickerEntryMode initialEntryMode = TimePickerEntryMode.dial}) → Future<TimeOfDay?>
Opens the default showTimePicker applying the neon theme. initialTime is the start time, accentColor replaces the default accent and helpText is passed to the Material picker. use24HourFormat strength (or turns off) the 24-hour clock; when null, it follows the configuration of the system.
showLumenToast({required BuildContext context, required String message, LumenStatusTone tone = LumenStatusTone.info, IconData? icon, Duration duration = const Duration(seconds: 3), LumenToastPosition position = LumenToastPosition.bottom, double margin = 24}) → Future<void>
Displays a floating toast over the app via Overlay, without depending on ScaffoldMessenger.