A2UI Workbench

Chat
Gallery
Showcases
Playground
components
Open URL BottomBar RollPickerCard DateTime Selection BottomBar Three Actions SelectionList Quantity PhotoInput Preview FilterTags + TagText FullScreenModal Map Location OrderedSelectionList SelectionWrap Tabs DropdownSelection PasswordKeypad TickSlider

A2UI Workbench

Mobile navigation for the Macaron A2UI Workbench.

ChatGalleryShowcasesPlayground
components
Open URL BottomBarRollPickerCardDateTime SelectionBottomBar Three ActionsSelectionList QuantityPhotoInput PreviewFilterTags + TagTextFullScreenModalMap LocationOrderedSelectionListSelectionWrapTabsDropdownSelectionPasswordKeypadTickSlider

Open URL BottomBar

BottomBar CTA wired with the local open_url handler.

Visit the site
This example exercises the local open_url handler in the web runtime.
https://example.com

RollPickerCard

Two-column picker card matching the Flutter-style roll picker input.

Ready to spin...
Tap Spin to reveal your picks
Fast foodBBQSpicy
$50$100$500

DateTime Selection

Flutter gallery's combined date-time, date-only, and time-only input surface.

Schedule a Team Check-in
Try full date-time, date only, and time only selectors.
Meeting Date & Time
Date Only
Time Only

BottomBar Three Actions

BottomBar keeps up to three actions in equal-width full slots.

SelectionList Quantity

SelectionList rows auto-prefix pure numeric trailing quantities with the multiplication sign.

PhotoInput Preview

PhotoInput shows the uploaded preview plus the uploading overlay from slash-path bindings.

FilterTags + TagText

Array-backed bindings for chips and styled inline tag segments.

Open nowFamily
FastยทReliable

FullScreenModal

Flutter gallery's modal entry surface, kept here to verify the entry-point wiring.

Tap to open a full-screen modal.

Map Location

Flutter gallery's lightweight map card for location rendering and tile URL support.

Hotel Location
Pan and zoom to inspect nearby spots.

OrderedSelectionList

Flutter gallery's ordered picker that shows ranked selections and required-selection gating.

Pick your priorities
Tap in order. The red badge shows rank (1..n).

SelectionWrap

Flutter gallery's wrapped multi-select chip layout with button gating from hasSelection.

Distance filter
Pick up to 2 preferred commute ranges.

Tabs

Flutter-style tabItems switch between child panels without legacy fields.

First panel

DropdownSelection

DropdownSelection resolves the first valid bound item from the incoming array.

PasswordKeypad

Six-digit keypad input with the same auto-submit payload shape used in tests.

_
_
_
_
_
_

TickSlider

TickSlider snaps to Flutter's fixed six-tick behavior and writes back through value.path.

0100
40