material_3_expressive 1.1.2
material_3_expressive: ^1.1.2 copied to clipboard
A faithful Flutter implementation of the Material 3 Expressive component set, exposed as direct M3E component widgets.
1.1.2 #
Added #
- Keyboard focus rings via foundations
M3EFocusRing,M3EFocusRingTheme(M3EThemeData.focusRingTheme), andM3EFocusInteraction. Rings follow each control’s outer shape and show for keyboard focus; pointer interaction clears them until Tab/arrow navigation resumes. Text fields and search bars keep their focused border and show the outset ring. M3EThemeData.keyboardFocusIndicatorsto globally enable/disable focus-ring chrome.- Focus rings / keyboard activation across actionable hosts (buttons, icon / toggle / split buttons, cards, lists, switches, dropdowns, sliders, nav bar / rail / drawer, text fields, search, checkboxes, radios, chips, FABs / FAB menu, segmented buttons, tabs, menus, expandable headers, and more).
- Example Focus rings playground (View tab).
- List-owned selection and reorder on
M3ECardList/M3ECardList.builder(selection,reorder,selectionController,onSelectionChanged,onReorder,selectionState,reorderState), selection and reorder on dismissible lists, and selection / reorder on expandable header rows (nested sublists keep their own list APIs; expanded rows snap-collapse for reorder). Theme tokens:M3EListSelectionState,M3EListReorderState, enumsM3EListSelectionMode/M3EListSelectionTrigger. - Dismissible swipe actions via
leadingActionsBuilder/trailingActionsBuilderandM3EListSwipeAction(icon pills, preview snap, primary auto-execute). Style tokens onM3EDismissibleListStyle/M3EListDismissibleTheme(spacing, edge padding, preview threshold, overdrag, min sizes). - Expandable nested expansions via
M3EExpandableExpanded.list/.contentonM3EExpandableData.expanded;embeddedon card / dismissible lists for inner corner radii when nested. M3EDropdownMenu.limit(int?, defaultnull= unlimited) to cap multi-select count (limittakes precedence overmaxSelectionswhen set).- Configurable spatial springs on component themes (defaults match prior
hard-coded motion), including switch position/size, FAB menu expand/shape,
nav rail indicator/icon scale, checkbox pulse, slider dock, icon button
morph, toolbar expand/label, list card
radiusSpring, dismissible neighbour / re-engage / detach / roundness / spring-back / fly /collapseDamping, and refreshsettleSpring. - Export
M3EOverflowStrategy,M3ENoOverflowStrategy, andM3EScrollOverflowStrategyforM3EButtonGroup.overflowStrategy.
Changed #
- Bump
material_uito^1.1.1. M3EDropdownMenu.openMotion/closeMotionare nullable; when null they resolve fromM3EDropdownMenuTheme.openSpring/closeSpring.- Dropdown field selected-value text defaults to
bodyMedium(wasbodyLarge); chip delete icon size follows the chip label font size. - Prefer
M3EThemeData.focusRingThemefor package-wide focus ring overrides; legacyM3EButtonTheme.focusRingWidth/focusRingGap/focusRingColorremain for compatibility. - Button-family focus clearance uses
focusRingTheme/M3EFocusRing.outsetOfinstead of hardcoded primary constants. - Icon buttons and navigation rail destinations use
SystemMouseCursors.clickwhen enabled.
Fixed #
- Focus interaction: primary-focused control only; rings clear on pointer and resume on keyboard; pointer down requests focus so Tab continues from the last clicked control; menus/dropdowns trap Tab; Escape closes overlays / unfocuses fields; keyboard focus scrolls into view when rings are allowed.
- Expandable list: Tab traverses expanded sublist rows after the header; collapsed / mid-animation bodies stay out of the focus order.
M3EFocusRingkeeps a stable tree when togglingfocusedsoEditableTextis not remounted (Tab-focus text fields stay editable).- Search bar keeps the editing row mounted under idle chrome;
M3ESearchAnchor.barparticipates in Tab with Enter/Space to open and Escape to close. - FAB menu focus scope skips as a Tab stop, focuses the first item on open,
and closed-loops Tab across items; FAB menu no longer depends on inherited
theme during
initStatefor item springs. - Web:
ButtonActivateIntentsupport onM3ETappableand navigation destinations (Enter activation). - Date picker: mode-toggle / month labels ellipsize under narrow width;
dialog actions use
OverflowBarso cancel/confirm wrap instead of overflow. M3EStateLayerOverlayInkWell no longer steals a second tab stop underM3ETappable.- Dropdown selected chips and trailing clear are keyboard Tab stops with focus rings.
1.1.1 #
Added #
- M3-aligned typography foundation:
M3ETypographypairs 15 baseline and 15 emphasized type scales (md.sys.typescale.*and.emphasized.*), token tables for static and variable-font sets,M3ETypefaceConfig(brand/plain families), andM3EVariableFontConfigfor per-roleopsz,wght, splitROND, and emphasized-onlyGRAD.M3EThemeData.typographyis the source of truth;typeScaleremains a baseline alias for components. M3EVariableFontAxesfor explicitwght,opsz,ROND,wdth,slnt,GRAD, and advanced Y-axis values with global/brand/body group overrides onM3EVariableFontConfig.M3ETypeStyleConversionconverts arbitraryTextStyles to baseline, emphasized, or variable token variants;M3ETypeStyleTokens.copyWithandfromTextStylecustomize individual token fields.M3ETypeVariations.gradedalias clarifies the weight+grade axis preset vs the M3 emphasized type scale.M3EMaterialAppacceptstypeScaleMode,typeface, andvariableFont.- Example Typography playground (View tab) with live axis and conversion controls.
- Export
buildM3EThemeDefaults()andM3EDynamicColorHostthroughfoundations.dart. M3EHourMinuteTextFieldfor Material-aligned hour/minute time inputs (used by the input time picker; exported from the time pickers entry).M3ENavigationBarwide layout APIs:autoLayout,layout(M3ENavBarLayout),alignment(M3ENavBarAlignment),iconBehavior(M3ENavBarIconBehavior), optionalwideBreakpointandwideDestinationWidth, plusM3ENavBarConstants(default chip width128, documented 5-destination breakpoint,minWideBarWidth). Destinations may be icon-only and/or label-only. Wide chips use a fixed width so the fluid pill does not clip when icons or labels appear or disappear.M3ENavigationRailexpandTooltip/collapseTooltipfor the expand/collapse toggle (defaults'Expand'/'Collapse').M3EFabandM3EExtendedFaboptionalelevation/hoverElevationoverrides;M3ENavigationRailFabSlotforwards them to the rail FAB.
Changed #
- Typography additions are additive;
M3EThemeData.typeScaleremains a baseline alias for components. - Foundations sources grouped under
lib/foundations/{color,shape,theme,type,interaction,tokens}/; the public barrel path is unchanged for consumers. - Date and time pickers aligned closer to Material dialog specs: landscape dialog sizing (12/24-hour), standardized content padding, unified action bars, calendar/year responsive layouts (year mode toggle stacked in the calendar parent), dial help-text layout, and input-time fields with labels under the boxes and AM/PM top-aligned with the hour/minute row.
M3EYearPickerno longer takesmode/onModeChanged— the mode header lives on the parent calendar. Call sites that passed those arguments should drop them (the built-inM3ECalendarDatePickeralready hosts the toggle).M3ENavBarConstants.wideBreakpointdefault is sized for five fixed-width wide chips (704at the default128chip width) instead of a flat600. WhenwideBreakpointis omitted on the bar, autoLayout usesminWideBarWidthfor the current destination count and chip width.- README: document
M3ENavigationBarwide-layout public surface and samples.
Fixed #
- Date picker landscape/year layouts: year grid overflow and vertical stretch,
header alignment with calendar and actions, help text compact only in input
entry mode (
alignHelpWithSubHeader). - Time picker landscape dial: help text no longer covered by hour/minute fields; input mode field geometry matches filled Material time inputs.
- Complete public surface exports from all component entry files so
import 'package:material_3_expressive/material_3_expressive.dart'is sufficient: missing themes/decorations (app bar, FAB, navigation drawer, icon button shapes, button motion/overflow, split button decorations), tokens/utils (slider, toolbar, carousel scroll helper, progress indicator, navigation rail layout), dismissible list extension APIs, picker composables (date/time form fields, headers, actions), carousel view/controller/wrapper, toolbar building blocks, and button-group overflow controller. - Export missing public enums and models from component entry files so the
barrel alone is enough: button style/size/shape, FAB color/size, split
button enums, navigation bar / rail enums and models, and
M3EButtonGroupActionfrom the toggle button group entry. M3EDropdownMenu: do not fireonSelectionChangeduringdidUpdateWidgetrebuilds when the selection did not actually change (lifecycle / build-phase safe).
Chore #
- Remove redundant deep imports in library, example, and tests now covered by
entry / barrel exports (
unnecessary_import/ analyzer cleanup).
1.1.0 #
Documentation #
- README: document current public APIs for
M3ERefreshIndicator(controller, pad/reveal, elevation, contained spinner),M3ELoadingIndicator(elevation,rotationTurns, colors),M3ECheckboxlabel/sizing options,M3EProgressIndicatorstroke overrides, anddynamic_color2.x /material_ui^1.1.0harmonization notes.
Fixed #
- Compatible with
dynamic_color2.x (material_ui): drop duplicateColorScheme.harmonizedextension; re-export package harmonization; tests use local channel mocks (test_utilsmoved todynamic_color_testing). - Nav bar, rail, and drawer selection pills remasure on size / constraint changes (window resize); stale geometry cache no longer blocks morphs to other destinations.
M3ERefreshIndicatorpointer-pull platforms (Flutter web and native desktop): mouse drag, 1:1 pointer deltas, host reveal/arm math (2 × indicatorPaddingdelay, arm at full reveal), list pad hard-capped atcontentDragOffsetwith safe leading underscroll clamp. Web also uses Opacity+scale reveal, split rebuilds, andRepaintBoundaryso CanvasKit does not freeze. Mobile keeps classic overscroll deltas.M3ERefreshIndicatorexpressive and contained kinds always useM3ELoadingIndicatorcontained variant so shell elevation works on all platforms (avoids morph-pathdrawShadow, which freezes CanvasKit).M3ERefreshIndicatorControllerattach/detach uses one stable show closure (fresh method tear-offs are neveridentical), so dispose clears correctly and manualshow()does not hit disposed animation controllers after keyed rebuilds; keyed variant switches still keep the newer attachment.
1.0.9 #
Added #
M3ESafeArea— keyboard-aware system insets from raw view metrics (paddingOf,topOf/bottomOf/leftOf/rightOf, andoverlayBottomOffor floating overlays). Docked chrome, snackbar, search, nav rail indicator, and dialog inset hosts use it instead ofMediaQuery.viewPaddingOf.M3EDialogInset— pads dialogs with screen margin and optional keyboard view insets (Material Dialog behavior).M3EDialogTheme.resizeToAvoidBottomInset(default true),insetAnimationDuration, andinsetAnimationCurve.M3ECheckboxoptionallabel,boxSize,hitSize,checkedChild,uncheckedChild, andcheckIconPadding(default right inset for optical centering of the built-in check), with a spatial-spring pulse on value changes.M3EProgressIndicator.circular/.linearoptionaltrackStrokeWidth(and.linearstrokeWidth) so all kinds can override track and value thickness.M3ERefreshIndicator.contentDragOffset— caps list top padding while pulling (defaults to indicator height +2 * indicatorPadding).M3ERefreshIndicator.indicatorPadding— vertical gap above/below the spinner in the list pad (default 8); reveal starts after2 ×this value.M3ERefreshIndicatorTheme.releaseBubbleSpring/releaseBubbleFromScale(and matching widget overrides) for the release scale bubble (defaults stiffness 350 / damping 0.1 / from-scale 0.96).M3ELoadingIndicator.elevation(theme default0) — contained uses rounded-shell [M3EElevation] shadows; uncontained casts a path shadow that follows the morphing polygon (including rotate / scale / morph).M3ELoadingIndicator.rotationTurns— when set, disables auto spin and morph pulse so a host (e.g. refresh) can drive rotation.M3ELoadingIndicator.color/containerColordocument shape vs contained shell colors (both overridable).M3ERefreshIndicatorControllerto trigger refresh programmatically (same as MaterialRefreshIndicatorState.show).
Fixed #
M3ECheckboxcheck mark is centered in the box (with default optical padding on the built-in check icon).M3EProgressIndicator.linearWavyhonorslinearSizefor stroke thickness; linear painters draw track and active with separate stroke widths.M3EButtonGrouplabeled actions with distinctcheckedLabelno longer blank for a frame when the parent rebuilds a newactionslist on selection change. Measured widths are kept across remotion, and layout signatures ignore visual-only decoration / widget identity noise.M3ERefreshIndicatorlocks resting inset on refresh; release bubble is scale-only (does not move layout). Short pulls cancel withoutonRefresh.M3ECardoutlined variant defaults to a transparent fill (border only); list surfaces that useM3ECardinherit this unless an explicit color is set.- Time dial minutes: drag selects any 0–59; tap snaps to nearest ×5; interstitial
selector dot when between labels (Material
_Dialbehavior). - Time AM/PM control uses Material portrait / landscape / input sizes and sits beside dial/input hour–minute fields (not a button row below input).
- Date range input fields are side-by-side (8dp gap), matching Material.
- Date, date-range, and time picker entry-mode toggles sit at the bottom-left of the dialog actions row (Material time-picker placement).
- Date and time entry-mode icons use
keyboard_outlined(calendar/clock when returning from input). - Time picker manual entry no longer autofocuses the hour field.
M3EDialogInset+M3EDialogTheme.resizeToAvoidBottomInset(default true) shift dialogs above the keyboard; opt out via theme orresizeToAvoidBottomInset: falseonM3EDialog.show/ date / time pickers.
Changed #
- Internal
klin_dartcompliance: splitM3EInputTimePickerFormFieldbuild helpers to clear cognitive complexity (no behavior change). M3EExpressiveLoadingIndicatorapplies a noticeable scale pulse (spatial spring) to the active polygon holder on each morph — not the outer container. Morph rotation defaults are slower (45° / cycle, slower spring); timing and springs are configurable via widget params andM3ELoadingIndicatorTheme.M3ERefreshIndicatordefaultdisplacementis 8 (top padding). List pad defaults to spinner height + 16. Scale/fade/downward reveal lags until pad reaches2 × indicatorPadding, then fills through full visibility.onRefreshruns only when fully revealed and the pointer is released.M3ETimePickerThemeperiod sizes align with Material (periodPortraitSize52×80,periodLandscapeSize216×38,periodInputSize52×72).- Vendor/source attribution headers removed from
lib/Dart sources; third-party notices remain inNOTICEonly.
1.0.8 #
Added #
M3EDimensions— shared spacing (4dp grid) and corner-radius catalog.M3ESpacing.regularandM3EShapesradius tokens forward to it.- Shape catalog helpers:
M3EShapeKind,M3EShapeClipper, andM3EShapeContainer(named constructors for all 35 expressive polygons). Clip paths come fromM3EMaterialNewShapesmorph polygons. - Example gallery: copyable Dart snippets on every playground (live with current controls). Wide split view highlights the active catalog row with the same fill and radius spring as selection list cards.
Fixed #
M3EButtonGroupno longer jumps whenselectedIndexchanges while using the default scroll overflow. Fitting groups keep an unclipped, non-scrolling viewport; overflowing groups keep their scroll offset across rebuilds.
Changed #
- Depend on
material_ui^1.0.0and importpackage:material_ui/material_ui.dartinstead ofpackage:flutter/material.dart. Flutter SDK constraint is>=3.44.0.
1.0.6 #
Added #
- Multi-select host
M3ESelectionwithM3ESelectionController,M3ESelectionAppBar,M3ESelectionLeading,M3ESelectionScope, andM3ESelectionTheme. OptionalselectedColor/ themehighlightColorfill selected rows;M3ECardListandM3EDismissibleListpick that fill up automatically when hosted under the selection scope. - Gradient decorations on action surfaces:
backgroundGradient,foregroundGradient,overlayGradient, andoutlineGradientonM3EButtonDecoration,M3EToggleButtonDecoration,M3EIconButtonDecoration,M3EFabDecoration, andM3ESplitButtonDecoration(plus trailing-segment gradient overrides). M3ESegmentedButtonThemeoutline, divider, selected/unselected fill, and foreground colors/gradients. Dividers can sample a group-widedividerGradient.M3EFabMenu.decoration(M3EFabDecoration) for the trigger FAB, plusM3EFabMenuThemeitem fill, foreground, and outline gradients.M3EBadge.alignment(M3EBadgeAlignment.topLeft/topCenter/topRight). The badge sizes itself to the child's box; no parentSizedBoxis required.M3ETextField.inputFormatters.M3ETextFieldVariantandM3ETextFieldThemeare exported from the package barrel.M3ECarousel.onChangewithM3ECarouselChangeDetails(leading / focal index).M3ESplitButton.m3eMenuBuilderfor a rich M3E menu tree (groups, dividers, submenus).M3EButtonDecoration.animationDurationis honored by split segments (defaults toDuration.zeroso radius morph stays on the spring).- Search idle
alignment/barAlignment(M3EAppBar.searchdefaults to center). ToolbarfabExpandsToolbarandpillActiveSpring. - List
colorBuilder/borderRadiusBuilder, plus spring radius motion when a selected card's corners change. Card list / list itemvariantandborder. M3ETypeScale.applyfor shared typography (family, fallback, package, size factor/delta, color, decoration,fontVariations).withColordelegates toapply.M3ETypeVariationsis an enum of Roboto Flex presets (.variations: regular, emphasized, condensed, extra condensed, wide, extra wide, round).M3EThemeData.copyWith(fontFamily:)/fontFamilyFallback/package/fontVariationsand the same fields onM3EMaterialApp.- Example gallery: catalog-driven playgrounds, palette theme-config screen (auto theming, dynamic color, five seed colors, font family and M3 Expressive type styles).
Fixed #
M3ETextFieldno longer grows when the focused stroke thickens (border is painted as a foreground decoration). Height grows withmaxLines. Empty labels sit vertically centered; unlabeled values sit vertically centered.- Split-button foreground gradients tint text/icons instead of filling the segment; trailing radius morphs immediately after the menu closes when a background gradient is set.
- Button gradient outlines no longer expand into unbounded height.
- Selection highlight color (
selectedColor/highlightColor) now reaches hosted list rows.
Changed #
- Example app shell uses the playground catalog under
example/lib/pages/playground/and a theme config route from the home app bar.
1.0.5 #
Fixed #
M3ESwitch— pressed thumb now bleeds into left/right track padding (matching vertical edge contact); defaultthumbSizePressedistrackHeight(32).M3EExpressiveLoadingIndicator— morph settle usesM3EMotion.expressiveSpatialDefault(keeps droppy overshoot velocity).- Dropdown menu search field — defaults to
surfacefill and panelcontainerRadius(was unfilled with item outer radius). - Navigation bar, drawer, and rail destinations —
SystemMouseCursors.clickon desktop/web hover. - Classic circular indeterminate progress — shares wavy circular rotation and sweep timing (flat arcs unchanged).
M3ESlider/M3ERangeSlider— tap outside clears focus viaTapRegionandM3EFocus.tapOutsideHandler.M3EMenu— no longer autofocuses the first item on open; popup focus scope is still focused so keyboard navigation works without a pre-highlight.
Changed #
M3EIconButton— hover radius morph (with press), aligned with button-style state listening; themeradiusHoveredtokens.M3ESearchBarTheme.maxWidthdefault isdouble.infinity(full-width layouts).
1.0.4 #
Added #
- Shared foundations haptics API (
M3EHapticFeedback,M3EHaptics) withnone/light/medium/heavyimpact levels plusselection()for discrete snaps. - Opt-in haptic wiring across
M3ETappable, buttons, icon buttons, navigation destinations, carousel item taps, dismissible lists, and related surfaces (defaults tonone). - Selection haptics on stepped slider tick changes.
- Dismissible list haptic hooks on tap and swipe-action commit (defaults to
none). M3ESlider/M3ERangeSlidercornerRadius(theme defaulttrackCornerRadius= 8) — fixed outer track radius, not derived from thickness.M3ESwitchthumb-centered state layer (stateLayerSizeon widget/theme, default 48) for hover/focus/press.- Toolbar scroll-exit / manual visibility via
M3EToolbarVisibilityControllerandM3EToolbarScrollBehavior. - Toolbar action selection via
activeIndex/onActiveIndexChanged, labeled action width springs, and FAB expand/collapse icons with pill↔FAB morph. M3EFabMenuexpand/collapse icons, size morph (80↔56), andM3EFabMenuPosition(left/right).M3EIconButton.visualSizefor layout-driven visual size overrides.
Fixed #
- Classic linear and wavy linear/circular indeterminate progress indicators — dual traveling segments with track gaps (linear) and spin + sweep (circular wavy); classic circular indeterminate unchanged.
- Switch thumb press feedback now shows the Material concentric translucent state-layer circle.
Changed #
- Internal analyze /
klin_dartcompliance refactors (progress controller sync, toolbar build/scroll helpers, carousel wrapperpartsplits) with no intentional public API or behavior breaks. - Default slider outer track corners use fixed radius 8 (previously half of track thickness).
1.0.3 #
Fixed #
- Re-implement
M3ECarouselWrapperpulse logic to use a sliding clip window instead ofTransformscaling, ensuring content remains stable and does not snap during animations. - Introduce
_stableInnerContentExtentto calculate fixed layout sizes for carousel items based on viewport constraints and flex weights. - Update
ContainmentPagein the example app to demonstrate image-based carousel items with gradient overlays and labels. - Add sample image assets to the example project and update
pubspec.yamlto include the assets directory. - Enhance documentation for
M3ECarouselWrapperparameters and internal state management.
1.0.2 #
Fixed #
- Platform tags — declare all six Flutter platforms in
pubspec.yamlso pub.dev lists iOS and Web (dynamic color still no-ops where unsupported).
1.0.1 #
Fixed #
- License detection —
LICENSEis now a clean OSI-recognized MIT text so pub.dev awards the license points; third-party and vendored attributions live inNOTICE. - Date / range / time picker dialogs — landscape layouts no longer stretch to the screen edge; dialogs use bounded height and wrap content correctly.
- Landscape picker sizing — slightly wider dialog and title panel defaults for date, range, and time pickers.
- Vertical
M3EDivider— fills the parent’s bounded height again so it renders in rows (for example the containment gallery demo).
Changed #
- Internal refactors for analyzer /
klin_dartcompliance (file and complexity splits) with no intentional public API breaks.
1.0.0 #
Initial release.
A faithful Flutter implementation of the Material 3 Expressive component set,
exposed as direct M3E* widgets with spring-driven motion and design tokens
via M3ETheme.
Added #
- 39 component modules spanning the official Material 3 groups:
- Actions — buttons, icon buttons, FAB, extended FAB, FAB menu, button groups, segmented buttons, split buttons, toggle buttons.
- Communication — badges, linear & circular progress indicators, loading indicator, snackbar, tooltips.
- Containment — cards, carousel, dividers, lists, dialogs (standard & full-screen), bottom sheets, side sheets.
- Navigation — top & bottom app bars (incl. search), tabs, navigation bar, navigation rail, navigation drawer, toolbars, menus.
- Selection — checkbox, radio button, switch, chips, sliders (incl. wavy), dropdown menus, date picker, time picker.
- Text inputs — text fields, search bar / search view.
- Direct component API — construct each
M3E*widget directly; enums and models are exported from a single library import. - Design token foundations — a centralized
foundationslayer for color schemes, typography, motion/spring physics, shapes, elevation, and state layers, provided through theM3EThemeinherited widget. - Expressive motion — spring-driven press feedback, shape morphing, liquid
selection indicators, and M3-accurate hover/focus/press state layers via the
shared
M3ETappableinteraction primitive.