material_3_expressive 1.0.9
material_3_expressive: ^1.0.9 copied to clipboard
A faithful Flutter implementation of the Material 3 Expressive component set, exposed as direct M3E component widgets.
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.