plass_ui library

Plass — a UI component library made of glass and gradients.

Smooth tinted surfaces, shadows in their own colour, and light that follows the pointer. Accessible and themeable, with dark mode built in.

Nothing here imports package:flutter/material.dart or package:flutter/cupertino.dart. Every component is built on package:flutter/widgets.dart alone, which is what lets it sit inside a Material app, a Cupertino app or a bare WidgetsApp without dragging a second design system in behind it — and what makes it indifferent to those two libraries moving out of the framework.

A component works with no setup: PlassTheme is an override rather than a requirement, and without one the tokens follow the platform's own brightness.

import 'package:plass_ui/plass_ui.dart';

PlButton(onPressed: save, child: const Text('Save'))

Classes

PlAccordion<T>
A stack of sections, one of which is open.
PlAccordionItem<T>
One section of a PlAccordion.
PlAlert
A message about something that happened, set into the page it is about.
PlAnchor
A table of contents that follows the reader down the page.
PlAnchorItem
One heading in the list.
PlAnimateAppear
A list of things settling into place one after another.
Content pulsing between full opacity and a floor.
PlAnimateCounter
A number counting up to what it is.
PlAnimateFade
Content arriving or leaving on opacity alone.
PlAnimateFloat
Content drifting gently, and not going anywhere.
PlAnimateGrow
Content unfolding from a point.
PlAnimateHeadline
One line replacing the one above it, on a timer.
PlAnimateLighting
A light travelling around the outside of something.
PlAnimateMarquee
Content scrolling steadily past, forever.
PlAnimateReveal
Content uncovered behind a moving edge.
PlAnimateRotate
Content turning about a point.
PlAnimateScramble
A line of text resolving out of noise.
PlAnimateShake
A refusal.
PlAnimateSlide
Content travelling in from one edge.
PlAnimateSplit
A line of text arriving one part at a time.
PlAnimateTyping
Text appearing one character at a time.
PlAnimateZoom
Content arriving from the middle of where it will end up.
A product's mark, and its name beside it.
PlAreaChart
A line with the space under it filled — which changes what the chart is about.
PlAspectRatio
A box that keeps a proportion whatever width it is given.
PlassChartCategory
Where a point sits along the category axis.
PlassChartDatum
One datum: either a bare reading or a point that says more about itself.
PlassChartPoint
One value, with everything the chart might want to know about it.
PlassChartSeries
One line, one band or one run of bars, and everything about it.
PlassColorFamily
One colour family, resolved for one theme.
PlassDefaults
Everything a PlassTheme can decide for the subtree under it.
PlassLabels
Every word this package says on its own behalf.
PlassResponsive<T>
A value that may change with the width of the window.
PlassSort
The column being sorted on, and its direction.
PlassTheme
Pins everything below it to one theme.
PlassThreshold
Where a band starts, and what a reading is made of from there up.
PlassTimelinePoint
One stretch of time on a row of a PlTimelineChart.
PlassTimelineSeries
One row of a PlTimelineChart, and everything on it.
PlassTokens
Every token a Plass component reads, resolved for one Brightness.
PlAvatar
A picture of a person or a thing, at a known size, that is never an empty box.
PlBackTop
The way back up, once there is a way back up to want.
PlBadge
A small mark in the corner of something else: unread mail on an inbox icon, a status dot on an avatar, a count on a tab.
PlBarChart
Lengths, compared.
PlBlockquote
Somebody else's words, set apart from your own.
PlBottomNavigation<T>
A row of destinations held against the bottom edge of the screen.
PlBottomNavigationItem<T>
One destination.
PlBox
A sheet of glass with content on it. The plainest surface in the library: it groups things, and that is all it does.
PlBreadcrumb
The path to where the reader is.
PlBreadcrumbItem
One step of the trail.
PlButton
A control that runs an action.
PlButtonGroup
A run of buttons that belong together.
PlCalendar
A month, on the page rather than in a popup.
PlCard
The sheet everything else on a screen is grouped onto, with the parts a card is made of laid out on it: a title, a subtitle, a body and a footer.
PlCarousel
A strip of slides, one of which is in view.
PlChartAxis
What one axis is told about itself.
PlChartLegend
Where the legend goes, and whether there is one.
PlChartTooltip
What a tooltip shows, and whether there is one.
PlChatBubble
One message in a conversation.
PlChatBubbleLinkPreview
What a link inside a message unfurls to.
PlCheckbox
A single yes/no, or one member of a set of them.
PlChip
A compact token: a tag, a filter, a status, an entity plucked out of a list.
PlCodeBlock
A viewer for one line of code or a thousand.
PlCodeTheme
The sixteen colours a code block is drawn out of.
PlCodeToken
One run of text with a single colour.
PlCollapsible
One section that folds, standing on its own.
PlColorPicker
A colour, chosen by eye.
PlColorPickerLabels
The names for the parts of the picker that have no text on them.
PlCombobox<T>
A field you can type into and also choose from.
PlComboboxOption<T>
One choice.
PlCommandItem
One thing the palette can do.
PlCommandPalette
Everything an application can do, behind one field.
PlConfirmController
Asks questions from anywhere under a PlConfirmProvider.
PlConfirmOptions
What one question looks like.
PlConfirmProvider
One dialog, asked for from anywhere under it.
PlContainer
Horizontal breathing room, and optionally a measure.
PlContainerWidth
How wide content is allowed to get, and the three widgets that ask.
PlDataList
A list of labels and the values that go with them.
PlDataListItem
One label and its value.
PlDataTable<T>
A table that owns its rows.
PlDataTableColumn<T>
A column: its heading, how to get a cell out of a row, and what the row is as far as the sort and the search are concerned.
PlDateNames
The words a calendar draws that are not numbers.
PlDatePicker
One day, chosen from a calendar.
PlDateRange
Two ends, either of which may be missing.
PlDateRangePicker
A span between two days.
PlDateRangePreset
A named range offered as a shortcut beside the calendars.
PlDateTimePicker
A day and a time, in one popup.
PlDivider
A rule between two things.
PlDrawer
A panel attached to one edge of the screen.
PlEmpty
The place where there is nothing.
PlFieldset
A group of controls that answer one question together, with a name on it.
PlFile
A file, as the picker needs to know it.
PlFilePicker
A box files are chosen into.
PlFileRejection
One file that was turned away, and why.
PlFloatingActionButton
The one action a screen is about, floating over it.
PlFloatingBottomNavigation<T>
A row of round destinations floating clear of the bottom edge of the screen.
PlFloatingBottomNavigationItem<T>
One destination, as a disc.
PlFooter
The sheet at the end of a screen.
PlForm
A form that knows which of its fields is wrong.
PlFormScope
What a field and a submit button read off the PlForm around them.
PlFormState
The state of a PlForm, for a caller holding a GlobalKey<PlFormState>.
PlGallery
A set of pictures, arranged.
PlGalleryItem
One picture in the set.
PlGaugeChart
One number on a scale that is known in advance, drawn as a dial.
PlGrid
A twelve-column row, and the parent every PlGridItem needs.
PlGridItem
One cell of a PlGrid.
PlHeader
The bar across the top of a screen.
PlHeatmapChart
A magnitude per cell, coloured rather than measured.
PlHighlight
Marks the words a reader is looking for, inside text they were already reading.
PlHotKeys
A keyboard key, a combination of them, or the four movement keys as they sit on the keyboard.
PlHotKeysCluster
Four keys laid out as an inverted T: one on top, three beneath.
PlHoverCard
A preview of what is behind a link, shown when the pointer rests on it.
PlHowToStep
One instruction.
PlHowToSteps
Instructions, numbered, with what to do under each one.
PlIcon
A glyph at a known size, in a known colour.
PlIconButton
A round button with a glyph in it and nothing else.
PlImage
A picture, and the two states a picture spends most of its life in.
PlImageLetterbox
What fills the part of the box a picture leaves empty.
PlImagePlaceholder
A picture to stand in while the file arrives, in place of the skeleton.
PlImageWatermark
A mark laid over a picture: what it says, where it goes, and how it looks.
PlKbd
One key cap.
PlLineChart
A value against time, or against anything else with an order to it.
PlList
A stack of rows.
PlListItem
One row.
PlMenu
A list of actions that appears when something is pressed.
PlMenubar
The strip of words at the top of an application — File, Edit, View — each of which opens a menu.
PlMenubarMenu
One menu on the bar: the word, and the rows behind it.
PlMenuCheckboxItem
A row that ticks. The tick lands in the same slot a startIcon would.
PlMenuEntry
One entry in a menu: a row, a group of rows, a separator or a submenu.
PlMenuGroup
A named run of rows. The label is a heading, not a row — it cannot be picked, and typeahead never lands on it.
PlMenuItem
One row of a menu.
PlMenuRadioItem
One choice out of a set.
PlMenuSeparator
The hairline between two runs of rows.
PlMenuSubmenu
A menu inside a menu.
PlMeter
A quantity inside a range, drawn as a bar.
PlMockup
A device with a screen you can put anything on: a phone, a tablet, a monitor or a laptop, with the system's own bars drawn on it.
PlMockupResolution
A screen's logical resolution, in device pixels.
PlModal
A sheet that takes the page away until it is answered.
PlNavigationMenu
A site's navigation: a row of destinations, some of which open a panel of more of them.
PlNavigationMenuItem
One word in the row, and what opens under it.
One row inside a panel: where it goes, what it is called, and a line saying what is there.
PlNumberField
A field that only holds a number.
PlOtpField
A row of one-character slots: a PIN, a texted verification code, an invite key.
PlOverlay
A sheet over the whole app that stops it being used.
PlPageLayout
The skeleton a screen is hung on: a header, a footer, one sidebar or two, and the content between them.
PlPagination
A row of page numbers.
PlPane
One region of a split.
PlPanes
A set of regions with draggable handles between them.
PlPaneSize
A pane's share of the split.
PlPieChart
Parts of a whole, at a glance.
PlPill
A floating lozenge holding a small amount of live information.
PlPopconfirm
A question asked where it was raised, rather than in the middle of the screen.
PlPopover
A sheet that opens beside the thing that opened it.
PlProgressBox
A row of small glass plates that light up.
PlProgressCircular
A ring that fills.
PlProgressLinear
A bar that fills.
PlRadioGroup<T>
A set of options where exactly one is chosen.
PlRadioOption<T>
One option in a PlRadioGroup.
PlRating
A score out of five, as a row of stars.
PlScatterChart
Two numbers per point, and whether they move together.
PlScrollArea
A bounded box that scrolls, with the library's own scrollbar in it.
PlScrollZone
A strip of anything, laid out in one direction and scrolled in it.
PlSegment<T>
One choice in a PlSegmentedButton.
PlSegmentedButton<T>
Two or more choices in one pill, exactly one of them taken.
PlSelect<T>
One value chosen from a list of them.
PlSelectOption<T>
One choice.
PlShow
Content at some widths and not others.
PlSidebar
A column beside the screen's content, and a drawer once the screen is too narrow to hold one.
PlSidebarTrigger
The button that brings back a PlSidebar the screen has become too narrow to hold.
PlSkeleton
The shape of something that has not loaded yet.
PlSlider
A value chosen along a range.
PlSparkline
A chart with everything taken away except the shape.
PlSpoiler
Content that is covered until somebody asks for it.
PlStack
Things piled up, overlapping.
PlStat
One figure, and what has happened to it.
PlStep
One step of a PlStepper.
PlStepper
A process the reader is moving through, and where they are in it.
PlSwitch
An immediate on/off.
PlTab<T>
One tab, and the panel it opens.
PlTable<T>
A grid of data on a sheet of glass.
PlTableColumn<T>
A column: its heading, how wide it is, and how to get a cell out of a row.
PlTabs<T>
A bar of tabs, and the panel under whichever one is chosen.
PlTextField
A field somebody types into.
A link, in a sentence or on its own.
PlTimeline
A sequence of steps, in the order they happen in.
PlTimelineChart
Work against time — a row per thing, a bar per stretch of it.
PlTimelineItem
One step of a PlTimeline.
PlTimePicker
A time of day, chosen from columns.
PlToast
One message.
PlToastController
Raises toasts from anywhere under a PlToastProvider.
PlToastProvider
Puts the toast stack on the screen and lets anything under it raise a message.
PlToggle
A button that stays down.
PlToggleGroup
A set of toggles that share one state.
PlToolbar
A bar of controls: an application header, a screen's action row, the strip along the bottom of an editor.
PlTooltip
A short label that appears when the pointer rests on something.
PlTooltipProvider
Shares one delay across a group of tooltips.
PlTour
A guided walk over a screen that already exists — the three things a new reader has to be shown once, pointed at where they actually are.
PlTourStep
One stop on the tour.
PlTransfer
Two lists and the arrows between them: everything that could be chosen on one side, everything that has been on the other.
PlTransferItem
One thing that can be on either side.
PlTree
A hierarchy, opened one branch at a time.
PlTreeNode
One node. A branch is a node with children; a leaf is one without.
PlTreeSelect
A value chosen out of a hierarchy rather than out of a list.
PlTreeSelectNode
One node of the tree a reader is choosing from.
PlTypography
Text at one of the library's sizes.
PlWindowPane
A window, drawn the way one of eight systems draws it, with anything at all inside it.

Enums

PlAnimateSplitBy
What the line is cut into before the entrance is told off across it.
PlAppLogoShape
How the artwork is framed, which is the one question this widget exists to answer.
PlAreaStacking
How the bands are stacked, if they are.
PlAspectFit
How the content inside is fitted to the box.
PlassAlign
Where something sits along the axis it is not placed on.
PlassAlignItems
How content sits across the axis it does not run on.
PlassAlignSelf
The same, for one member overriding the set it is in.
PlassAnimateMode
Whether an effect brings its content in or takes it away.
PlassAnimateTrigger
What makes a PlAnimate* widget run.
PlassBreakpoint
A width the layout answers to.
PlassBreakpointFloor
Every rung but PlassBreakpoint.xs, which is the one with nothing below it.
PlassChartTooltipMode
How much of a tooltip a pointer summons.
PlassChartValueLabels
Which values are written onto the marks.
PlassColor
Semantic colour role. Maps to a token family in PlassTokens.
PlassCorner
Which corner of a box something is pinned to.
PlassDensity
How tightly a component packs its content.
PlassJustify
How a row distributes the space its content did not use, along the axis the content runs on.
PlassOrientation
Which way a component runs.
PlassOverscroll
What a scroller does with a gesture it has run out of room for.
PlassSide
Which edge of an anchor something is placed against.
PlassSidebarSide
Which end of the band a sidebar takes. Logical, so it flips under RTL.
PlassSize
Scale of a component. PlassSize.md is the desktop default.
PlassSortDirection
Which way a column runs when it is sorted.
PlassTimeUnit
Which column of a clock a candidate time is being offered for.
PlassVariant
What a surface is made of.
PlassWeekday
A day of the week, Sunday first.
PlAvatarShape
The crop, not the material.
PlBadgeOverlap
The shape of the thing underneath, which is what decides how far the marker tucks in.
PlBarStacking
How the series sit relative to each other.
PlBottomNavigationLabels
Which names are drawn.
PlBreadcrumbSeparator
What is drawn between two steps of the trail.
PlCalendarPrecision
The smallest unit a PlCalendar hands back.
PlChartCurve
How a line gets from one point to the next.
PlChartMarkers
Whether a point gets a dot on it.
PlChartScaleKind
Which way a magnitude is coloured.
PlChatBubbleSide
Whose message this is.
PlChatBubbleStatus
How far a message has got.
PlCodeTokenKind
Which of a theme's twelve colours a run of text is drawn in.
PlColorFormat
The three ways the picker will write a colour back out.
PlConfirmFocus
Which button holds the focus when the dialog opens.
PlDataTablePaging
How the rows are handed out.
PlDataTableSelection
How many rows may be ticked at once.
PlDataTableStage
The three things the table does to the rows, and the ones an application can take back.
PlDatePickerPrecision
The smallest unit a PlDatePicker asks for.
PlDrawerMode
How the panel relates to the screen.
PlFileRejectionReason
Why a file was turned away. One reason per file, in the order they are checked.
PlFormValidationMode
When a field decides whether it is valid.
PlGalleryCaption
Where a tile's words go.
PlGalleryHover
What a tile does when the pointer is on it.
PlGalleryLayout
How the tiles are arranged.
PlHeatmapLabels
What is written on a cell.
PlHeatmapShape
Which of the two drawings a heatmap is.
PlHotKeysOS
Which keyboard the shortcut is being read on.
PlImageFilter
The treatments that have a name.
PlImageFlip
Which way the picture is mirrored, along the axes it is shown on.
PlImageStatus
Where the picture has got to.
PlImageWatermarkPlacement
Where a watermark sits on the picture.
PlMockupBezel
How much hardware there is around the screen.
PlMockupDevice
Which machine a mockup is a picture of.
PlMockupFinish
What the hardware is made of.
PlMockupHardware
What holds a desktop screen up.
PlMockupNotch
The camera cut-out.
PlMockupOrientation
Which way a handheld is held.
PlMockupOs
The system whose chrome is drawn on the screen.
PlNumberFieldSteppers
Where the two steppers sit.
PlOtpCharset
What may be typed into a slot.
PlOverlayTone
How much of the page the overlay takes away.
PlPageLayoutSpan
How far across a header or a footer reaches.
PlPieLabels
What is written on the slices.
PlPieShape
What the disc is cut into.
PlScatterShape
What each mark is drawn as.
PlScrollAreaAxis
Which axes may scroll.
PlScrollbars
When the scrollbars are drawn.
PlScrollZoneButtonPlacement
Where the scroll buttons sit, which is also where the strip ends.
PlScrollZoneButtons
When the scroll buttons are drawn.
PlScrollZoneMode
What pressing a scroll button does.
PlSkeletonShape
What the placeholder is standing in for.
PlSparklineShape
Which mark a sparkline is drawn with.
PlStackDirection
Which way the pile grows.
PlStackFront
Which end of the list is on top.
PlStatDirection
Which way a change has to go to be good news.
PlTextLinkUnderline
When the line under a link is drawn.
PlToastPosition
Where the stack sits.
PlToastPriority
How loudly a toast asks to be announced.
PlTreeSelection
How many rows a press can leave selected.
PlTypographyLevel
What a piece of text is, which decides both its type scale and whether it enters the document outline.
PlTypographyWeight
How heavy the type is drawn.
PlWindowControl
The three buttons a title bar can carry.
PlWindowOs
Whose window this is a picture of.

Constants

plassElevationMax → const int
The top of the elevation ladder. See plassElevationMin.
plassElevationMin → const int
The lowest and highest values PlassElevation accepts.

Functions

parseLineSpec(String? spec, {int first = 0, int last = _lastLine}) → Set<int>
'4', '4-9' or '1,4-9,12', as the set of numbers it names.
plainCodeLines(String code) → List<PlCodeLine>
code as plain lines, which is what a block with no PlCodeBlock.lines draws.
resolveCodeTheme(String name, PlassTokens tokens) → PlCodeTheme
The palette a theme name means, resolved against the page it is on.

Typedefs

PlassElevation = int
How far a surface sits off the page, as a drop shadow.
PlassHotKeys = Map<String, VoidCallback>
Chords a control answers to, in the vocabulary PlHotKeys draws.
PlCodeLine = List<PlCodeToken>
One line of code, as the runs it is made of. An empty list is a blank line.
PlDataTableSort = PlassSort
The column being sorted on, and its direction.
PlDataTableSortDirection = PlassSortDirection
Which way a column runs when it is sorted.
PlHowToStepsConnector = PlassStepConnector
How the line between two steps is drawn.
PlHowToStepStatus = PlassStepStatus
How far along one step is. The same three a PlStepper and a PlTimeline draw, from internal/steps.dart, because a haloed bullet must not mean two things.
PlMeterThreshold = PlassThreshold
Where a band starts, and what the bar is made of from there up.
PlPickerLabels = PlassLabels
Another name for PlassLabels, kept because the pickers were the first widgets that needed any of it.
PlRatingValueLabel = String Function(double value, int count)
What one choice, and the whole control once it is read only, is called.
PlStepConnector = PlassStepConnector
How the line between two steps is drawn.
PlStepStatus = PlassStepStatus
How far along one step is. The same three a PlTimeline draws.
PlTimelineConnector = PlassStepConnector
How the line between two items is drawn.
PlTimelineStatus = PlassStepStatus
How far along one item is.