ashlarui

Components

65 components for Flutter, each a file you copy into your app with ashlar add.

Six variants and four sizes, with leading and trailing icons.

Buttons joined into one piece, for actions that belong together.

A button that stays pressed: bold, italic, a filter.

Toggles joined into one piece, one or several pressed.

A menu of actions from a trigger: checkbox and radio items, groups and submenus.

A menu that opens where something is right-clicked or long-pressed.

A bar of menus, as at the top of a desktop app.

A search box over a list of things to do, picked with the keyboard.

Fields of a form drawn with their labels and errors, checked when it is sent, focus on the first wrong one.

A control with its label, description and error, read out together.

The name of a control, above it or beside it.

A text field with selection handles and a cut, copy and paste menu.

A text field for several lines that grows with its text and drags taller.

Picks one value from a list: groups, icons, type to find, and long lists.

A select you can search: one pick or several as chips, groups, clearing.

A text field with text, buttons or a toolbar inside its border.

A one-time code, one character to a box.

A box that is ticked or not.

A choice of one, in Flutter's RadioGroup, with labels.

An on and off switch.

A value picked by dragging along a track, or with the arrow keys.

Months of days to pick one, several or a range from, with week numbers and dropdowns.

A button that shows a date and opens a calendar, with presets.

A button that shows a time and opens columns of hours and minutes, on a 12 or 24-hour clock.

A modal panel over a dimmed page, with title, content and actions.

A question that needs an answer before going on.

A panel that slides in from an edge of the screen.

A panel that comes up from the bottom and drags away.

A panel that opens from a trigger and floats over the page.

A card that appears when the pointer rests on something.

A short label over a control on hover, focus or long press.

Short messages that go by themselves: types, promises and a stack.

A panel with a header, content and a footer.

Views of one thing, one at a time, chosen from a row of tabs.

Sections that open one at a time under their headings.

Content that opens and closes under a trigger.

A row in a list: media, a title and description, and actions.

A one-pixel line, across or down.

Scrolling with a thin themed scrollbar; a builder for long lists.

Panels with handles between them that drag to resize.

Slides moved by swiping, buttons, keys, a controller or by themselves.

Rows of data under headings: sorting, row selection, and long data built as it scrolls.

Bar, line, area and pie charts, drawn here with no charting package.

Navigation Menu

A site's main links, with panels that open from headings.

An app's navigation down the side: variants, submenus, actions, a rail.

Previous, page numbers and Next, for a long list.

Where a page sits, as links to the pages above it, folding long trails.

One turn in a conversation: who sent it, what they said, a line above or below.

What was said, in a rounded fill on the sender's side, with reactions.

A file or picture in a conversation: what it is and how its upload is going.

A note in a conversation that nobody said: a day, someone joining, thinking.

Message Scroller

A conversation that scrolls as people expect: new turns near the top, following only at the end.

Questions one at a time: one choice, several or words, with keys for every answer.

A row with actions behind it: swipe it aside to show them, all the way to do the first.

Pull to Refresh

A list that refreshes when pulled down from its top, with a Refresh action for screen readers.

An app's main places along the bottom of a phone screen, an icon and a name each.

A notice, warning or error in the page, read out when it appears.

How far along something is, as a bar.

A turning ring that says something is working.

A pulsing placeholder in the shape of content still loading.

What to show when there is nothing here yet.

Headings, paragraphs, quotes and lists in the theme's type.

A small label: a status, a count, a tag.

A picture in a circle, with initials while it loads or when it fails.

A keyboard key, for showing shortcuts.