wixzel_ui library

Wixzel UI for Flutter: the same tokens and components as @wixzel/react.

Classes

PhosphorIcon
PhosphorIconsBold
PhosphorIconsDuotone
PhosphorIconsFill
WixzelTheme
One product in one theme, and the ThemeData that goes with it.
WxAlert
A tinted panel in its tone, for something the page needs to say.
WxAppBar
The bar at the top of a page: a title on the page's own colour, no line and no shadow. A page that can go back gets a back button and a smaller title. Takes AppBar's main arguments.
WxAvatar
Initials on a soft gradient. Round for people; square for workspaces, teams and agents.
WxBadge
A status label. Soft by default. dot puts a status dot before the label; pulse makes the dot send out a slow ring, for something happening right now.
WxBlurIn
New things arrive by sharpening out of a blur. Plays once, when first built.
WxBlurTransition
The blur-in driven from outside, for routes and dialogs.
WxBottomNav
A tinted bar beside the page's lighter fill, with no dividing line. The current destination is inked, and one ink block slides between them.
WxBottomNavItem
WxButton
Details every button carries:
WxCard
A tinted panel: no border, no shadow. Give it onTap and it darkens a shade and shrinks a little when pressed. Selected takes the accent wash, a solid 2px accent ring and a check that pops in.
WxCheckbox
The check draws itself in along its path; unchecking draws it back out. The box squeezes to 90% on press.
WxCheckboxRow
A row with a checkbox on the start. Tapping anywhere on it toggles.
WxChip
Filter chips. A chosen chip is inked, like the current tab.
WxChips
A row of chips that wraps.
WxColors
Every colour role, resolved for one product in one theme.
WxControl
Control heights.
WxCopyField
A value people copy: an API key, a token, a webhook URL. Secrets are masked down to their last four characters until revealed. Copying swaps the icon for a check for 1.6s.
WxDialog
A dialog panel: title, description, optional content, and a footer band a shade off the dialog, so the actions read as a separate step.
WxDurations
WxEase
WxEmptyState
When a list has nothing in it: say what will appear and how to add the first one.
WxField
Label, control, hint and error. An error replaces the hint; say what to do, not just what went wrong.
WxIconButton
A square icon button, ghost unless told otherwise. tooltip is also its name for screen readers.
WxIconTile
An icon on a small tinted tile, as in a Section header or an EmptyState.
WxInput
A filled field with no border. It takes a solid 2px accent edge on focus; invalid fields keep a red edge. A leading icon takes the accent while the field has focus. Large by default, since this is a finger, not a cursor.
WxListRow
A row in a panel: leading, a title, a line under it, something on the end. Darkens a shade when pressed and its icons deepen. Takes ListTile's main arguments.
WxMessage
One turn of a conversation. The agent speaks from the start side on a neutral bubble; the person answers from the end side on the accent wash. A streaming message ends in a blinking block caret.
WxPageTransitionsBuilder
A page sharpens in over the one before; going back is a quick fade.
WxPressable
Everything that answers the hand is built on this: a press shrinks at once and eases back on release, with no ripple. builder gets the state, so a control can darken its own fill. shape is where a keyboard focus edge goes.
WxPressState
What a control is doing right now.
WxProductTokens
A product's colours in both themes, its corner scale and any font of its own.
WxRadio
The dot grows in from nothing.
WxRadioCard
One option as a card: an engine, a licence, a top-up amount. A light fill on its panel; the chosen one takes the accent wash, a solid 2px ring and a check that pops in. Round for one choice, square for many.
WxRadioRow
A row with a radio on the start.
WxRadius
Round corners, for shapes that are not squircles.
WxRefresh
Pull to refresh with the ring spinner on a small floating disc.
WxSection
A panel of a settings page or editor: an icon tile, a title, a line of description, then rows split by hairlines (children) or a padded child.
WxSelect<T>
A field that opens a sheet of options: thumb-reachable, and room for a line of explanation under each choice.
WxSelectOption<T>
A choice in a WxSelect or a picker sheet.
WxSeparator
A hairline, for dividing rows inside a panel.
WxShadows
Depth layers. Inset layers are not included: BoxShadow cannot draw them.
WxShapes
The corner scale for this product, as ready-made squircle shapes.
WxSkeleton
A placeholder with a slow band of light passing over it.
WxSpinner
The ring spinner: a quarter arc with round ends turning over a faint track. With reduced motion it turns at a third of the speed rather than stopping, since a still frame would show nothing. Inherits the text colour.
WxSquircle
Squircle radii. Controls md, panels lg, dialogs xl.
WxSquircleBorder
A squircle as a Flutter shape: for ShapeDecoration, ClipPath and Material.
WxStatCard
A figure with its label and a line under it, on a tinted panel.
WxSwitch
A pill track and a round thumb. The thumb stretches while it is held, the way a finger squashes it, then slides across. The track's colour crossfades underneath.
WxSwitchRow
A row with a switch on the end. Tapping anywhere on it toggles.
WxSystemBars
Tints the phone's status and navigation bars to the current page. Put it around the app, in MaterialApp's builder.
WxTabs
The current tab is inked, and one ink block slides between tabs, following the finger when the pages under a TabController are swiped. line: sections of a page. segment: switching a view in place.
WxTextScale
WxTextSpec
One step of the type scale, in logical pixels.
WxType
The type scale in this product's font and ink.

Mixins

WxTypeScale
The type scale by name. WxType supplies the font.

Functions

showWxConfirm(BuildContext context, {required String title, required String description, required String action, String? cancel, bool destructive = false}) → Future<bool>
Asks before doing something. True when confirmed, false otherwise.
showWxDialog<T>({required BuildContext context, required WidgetBuilder builder, bool barrierDismissible = true, bool useRootNavigator = true}) → Future<T?>
Opens builder's dialog, sharpening out of a blur over a plain scrim.
showWxPicker<T>(BuildContext context, {required String title, required List<WxSelectOption<T>> options, T? selected}) → Future<T?>
Bottom sheet list of choices. Returns the one picked, or null if dismissed.
showWxSheet<T>({required BuildContext context, required WidgetBuilder builder, bool useRootNavigator = false, bool isDismissible = true, bool enableDrag = true}) → Future<T?>
A sheet that floats 8px off the edges of the screen, slides up and can be dragged away. The builder's content is laid out inside it and doesn't need its own safe area or keyboard padding.
showWxToast(BuildContext context, String message, {WxToastTone tone = WxToastTone.plain, Duration? duration}) → void
A floating note that goes away on its own, carried by the nearest ScaffoldMessenger.
wxDeriveProduct(Color seed, {double tint = 0.45, double? hue, double radius = 1, String? fontFamily}) → WxProductTokens
A whole product from one seed colour: the page, surfaces, lines and text washed with its hue, and accent roles that pass WCAG AA in both themes.
wxMix(Color a, Color b, double amount) → Color
color-mix(in oklab, a, b amount), so a shade computed here is the same shade the web computes. amount is the share of b, from 0 to 1.
wxSquirclePath(Rect rect, double radius) → Path
The outline the web gets from corner-shape: squircle (superellipse(2)): the curve eases into the straight edge instead of meeting it at a tangent. A radius too large for the rectangle is clamped to half its short side.