Introduction

Components for Flutter, built on its widgets alone and copied into your app, so every line is yours to change.

Ashlar UI is not a package you depend on. The ashlar command copies each component you ask for into your project, with the few it needs. From then on it is your code: read it, change it, delete what you do not use. An update to Ashlar UI never changes your app until you choose to copy a newer version in.

Widgets layer

The components use Flutter's widgets layer, the part Material and Cupertino are themselves built on. Your app looks like your app, not like Android or iOS, and nothing of Material comes along. AshlarApp takes the place of MaterialApp.

Accessibility

Every control works from the keyboard: Tab moves between them, Enter and Space press them, the arrow keys move through menus, tabs and radios, and Escape closes what is open. A focus ring shows where the keyboard is, and only then. Screen readers hear each control's name, its role and its state. Where Flutter has these behaviours itself, the components use Flutter's: radios sit in its RadioGroup, and menus and tooltips are built on its RawMenuAnchor and RawTooltip. Each is tested for all of this.

Theming

Every component draws itself from one theme of colours, corners and text, in light and dark. Change the theme and everything follows. See Theming.

Custom controls

Pressable is what every control is built on: hover, press, keyboard focus, activation by Enter and Space, and what a screen reader announces. Give it a builder that draws your control for each state, and your control behaves like the rest.

Pressable(
  onPressed: open,
  semanticLabel: 'Open the file',
  builder: (context, state) => Container(
    color: state.hovered ? colors.accent : colors.background,
    child: const Text('Open'),
  ),
)

Install it →