material_glimmer_ui 0.7.0

A Flutter UI kit of glass surfaces and lit edges. An app widget, a theme, a full token set and a widget library. Inspired by Jetpack Compose Glimmer and Material Design.

Changelog

This project follows Keep a Changelog and Semantic Versioning.

0.7.0

The light theme was the reason for this one. A light card read as a flat rectangle with a border while the dark one read as a raised pane, and measuring the two rings against the surfaces they sit on showed why: they were not the same idea in different colours.

The minor version moves rather than the patch because a public constant was removed. See "Removed" below.

Changed

• The resting edge on a light ground. Measured in luminance against its own surface, the dark ring ran +0.491, +0.010, -0.003, +0.103 clockwise from the top-left: one bright arc where the light lands, nothing anywhere else. The light ring ran 0.000, -0.201, -0.336, -0.241, with only 0.14 between the lightest and darkest visible stop. A ring of roughly equal shade is an outline, not lighting.

  Inverting the dark ring is not the fix. That puts the bright stop at the bottom-right, and a form lit from below reads as pressed into the page rather than raised off it. Light comes from the top-left in both themes because that is a fact about light rather than about the palette.

  What differs is which direction has room. #303030 has most of a stop of headroom upward, so dark can say everything with a highlight. White has none: a white highlight on a white surface is zero by definition, which is exactly what the old top-left stop measured. The light ring now says the same thing in shade, and carries the lighting in how steeply that shade deepens away from the light. The stops are 0, -0.06, -0.20 and -0.46, a swing of 0.461 against dark's 0.495. The spread was the missing part, not the depth.

• GlimmerRefreshIndicator holds one continuous value while it works. Releasing a pull used to run the ambient envelope from zero, and that envelope starts at zero, so the edge fell from whatever the pull had reached to a fixed floor in a single frame and then sawed between that floor and full every two seconds. A jump at the moment the finger lifts reads as a fault. The pull now eases into the hold over 260 ms, and a tapered highlight travels the lit edge on a loop while the work runs. That is the same shape GlimmerProgressBar sends along its track and GlimmerCircularProgress sends around its ring, so "still going" looks the same across the kit instead of being invented per widget.

• GlimmerProgressBar's indeterminate highlight glows. It was drawn inside the track's clip, so it could soften but never leave, and read as a brighter stretch of track rather than as light. The bloom is drawn before the clip now, taller than the bar, and spills above and below it.

Added

• GlimmerRefreshIndicator.workingLevel, the brightness the edge holds while a refresh runs, along with travelDuration and settleIntoWork for the travelling highlight and the ease into that hold.

Removed

• GlimmerRefreshIndicator.workingFloor. The refresh no longer has a floor to breathe up from, so the constant no longer describes anything. Use workingLevel instead, which is the level the edge settles to rather than the bottom of a pulse.

Example

• The gallery opened on a section called Glass: frosted cards over a vivid gradient. It looked good and it was the wrong argument. That composition is a pass-through mock, which is a display-glasses idea, and a phone has nothing behind the screen. It now opens on cards, actions, a stack and a list.
• Foundations loses Type and Depth. A type specimen is odd in a package that ships no fonts, and the depth ramp was abstract. In their place is an Edge section showing a resting and a focused surface side by side, which is the thing the kit is named after.
• The "Immersive controls" switch dimmed nothing. It is the ambient sweep now, and drives the card directly beneath it, so what it does is visible without scrolling.

0.6.0

First preview. The token set, the theme and the widget library are all here and in use, and the kit is being built against a real app rather than in the abstract. It is not 1.0 because of what is written under "Not done yet" in the README: no reduced-motion support, no right-to-left support, no golden tests, and only Android has actually been run.

Breaking changes are likely before 1.0. Pin the version if that matters to you.

Added

• MaterialGlimmerApp and MaterialGlimmerApp.router, the application widget, alongside MaterialApp and CupertinoApp.
• GlimmerColors.highlightTint and GlimmerColors.highlight, the rule the light theme was missing. White on a dark ground, ink on a light one, and every highlight in the kit is a step toward it: the press flash, the crest of the progress bar and the circular ring, the overscroll line, the edge over a caller's fill, and the backdrop's dim. Each of those was a value chosen as "light against black" and written as a constant, which on white means nothing at all.
• A light-ground edge as well as a dark one, for both the resting and the focused states. White at the lit corner is right against black and nothing at all against white, so on a light theme the ring used to break wherever the highlight landed. The light set is the dark set mirrored about tone 70: the lit corner is the darkest stop rather than the brightest, and the ring stays as visible against its ground, just from the other direction.
• GlimmerTheme.dark() and GlimmerTheme.light(), each a complete ThemeData with every token in a ThemeExtension and the ColorScheme and TextTheme derived from it. MaterialGlimmerApp builds both always, so themeMode: ThemeMode.system works with no other change.
• GlimmerSurface, the glass pane everything else is built from. It blurs and tints what is painted behind it, lights its edge on focus, and takes a flat press overlay rather than a ripple.
• GlimmerEdge and GlimmerEdgeBlur, the four-corner angular border gradient and its progressive blur, as a sampled sweep gradient so it works on every platform Flutter runs on.
• GlimmerBackdrop, what surfaces are glass over, wired into GlimmerScaffold through its backdrop slot. A theme-coloured gradient by default; takes an image, your own colours, or any widget including live content.
• GlimmerDepth, five levels expressed as how far the plane behind withdraws rather than as a shadow in front. Nothing is drawn around a surface. The level is spent by whatever owns both planes: GlimmerStack for a stack, GlimmerModalScrim for a modal, where the app behind is blurred and taken back toward the ground colour rather than washed with black, so it reads correctly on a light theme too.
• GlimmerEntrance, how a glass surface arrives. Glass cannot be faded: an opacity layer takes away the backdrop it reads for the whole animation and hands it back in one frame at the end. Every surface below scales its own tint, blur and edge instead.
• GlimmerOverscrollIndicator, installed by GlimmerScrollBehavior. Neither a stretch nor a bounce: the content does not move, and the edge it ran into opens from the middle outward with the bloom brightest where the push lands. Moving the content would render the scrollable into an offscreen layer, and every glass surface inside it would lose its backdrop.
• GlimmerRefreshIndicator, pull to refresh without moving anything. The same edge light brightens with the pull, then holds and breathes on the ambient envelope while the work runs, instead of sliding a spinner over the list or opening a gap above it. Only a finger still on the screen arms it: a fling that runs off the top lights the edge and springs back, because that is the list stopping rather than a request to reload.
• GlimmerPageRoute, a page that arrives instead of sliding. A slide or a fade puts the incoming page in its own layer, which takes the backdrop away from every glass surface on it for the length of the transition. This one moves nothing: the page comes in through GlimmerEntrance and the one behind it withdraws by its depth level. GlimmerScaffold fades its own ground with the entrance so a page does not cut its background in on the first frame.
• GlimmerTone, the perceptual lightness maths the colours are stated in, so a re-skinned palette derives its focused fill and border correctly.
• GlimmerScale, choosing between the phone measurements and a set half again as large for a display held closer to the eye.
• Tokens: GlimmerColors, GlimmerTypography, GlimmerShapes, GlimmerSpacing, GlimmerIconSizes, GlimmerDepth and GlimmerMotion.
• Components: GlimmerCard, GlimmerButton, GlimmerToggleButton, GlimmerButtonGroup, GlimmerIconButton, GlimmerIconToggleButton, GlimmerText, GlimmerIcon, GlimmerTitleChip, GlimmerList, GlimmerListItem, GlimmerStack, GlimmerScrim, GlimmerVoiceInputIndicator, GlimmerPager and GlimmerPageIndicator.
• Overlays: showGlimmerDialog, showGlimmerBottomSheet, showGlimmerSnackbar and showGlimmerMenu, over a GlimmerModalScrim.
• GlimmerTooltip, a glass pill rather than a grey slab, kept clear of the status bar and the screen edges. GlimmerIconButton uses it for tooltip.
• GlimmerProgressBar, drawn rather than borrowed. The determinate bar is the slider's lit track with a glow at the leading end; the indeterminate one sends a tapered highlight along the track instead of sliding a block.
• GlimmerFab, round or extended. There are no shadows here, so the one action that matters is lifted with light instead: the focal fill, the lit edge, and a bloom under it in the same colour. GlimmerScaffold has a slot for it.
• GlimmerSwitch redrawn. The track is a surface, so turning it on is the focus treatment rather than a fill swapping colour, and the thumb is the slider's thumb at switch size: a dot with a halo that grows as it lights.
• GlimmerBottomInset. A message never lands on a panel that is already on screen: a sheet reports how much room it takes and the snackbar starts above it, because a message about something you just did inside a sheet, printed across the middle of that sheet, reads as part of it rather than as a reply.
• Selection controls, none of which ripple. GlimmerCheckbox traces its tick on rather than fading it in, GlimmerRadio springs its dot out of the centre with a halo under it, and GlimmerTabs slides a lit marker between choices while the labels stay put. It is a segmented control and a tab bar at once.
• GlimmerCircularProgress, a ring of light. Determinate brightens toward the leading end of the arc; indeterminate travels a tapered arc round the ring.
• GlimmerSearchField, GlimmerTextField with the parts a search box always needs. GlimmerTextField gained suffix, autofocus and textInputAction.
• GlimmerExpansionTile, a row that opens by growing rather than by fading, so glass in the body keeps its backdrop the whole way down.
• GlimmerDivider, graded light rather than a flat rule. GlimmerBadge and GlimmerAvatar, both carrying the same lit edge.
• GlimmerChip and GlimmerChipGroup. Selecting one is the focus treatment rather than a background swapping colour, so a chosen chip lights up.
• GlimmerSkeleton, a placeholder as the shape of the missing content with light passing over it, rather than a grey block with a band sliding behind a window. GlimmerSkeleton.lines builds a paragraph with the last line short.
• GlimmerScrollbar, installed by GlimmerScrollBehavior on the platforms that show one. No track, a thinner thumb in the outline colour, and it fades once scrolling stops.
• GlimmerTextSelection, the part of a text field a finger actually touches. Round lit handles instead of teardrops, a glass GlimmerTextSelectionMenu instead of the Cut/Copy/Paste slab, and a magnifier with a surface's graded edge. GlimmerTextField and GlimmerSearchField install all three, and the theme carries the focal colour into the cursor and the selection highlight.
• Input and structure: GlimmerTextField, GlimmerSwitch, GlimmerSlider, GlimmerScaffold and GlimmerTopBar.
• Additive surfaces, composited with BlendMode.plus, so a surface on dark adds light rather than blocking it. Turn it off with additive: false.
• No assets and no dependencies beyond Flutter.