px_responsive 0.2.0
px_responsive: ^0.2.0 copied to clipboard
A powerful tri-tier responsive design system for Flutter. Automatically scales UI elements across mobile, tablet, and desktop based on your Figma/XD design specifications.
Changelog #
All notable changes to this project will be documented in this file.
The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.
0.2.0 - 2026-09-21 #
This release fixes the package's central defect: screen-size changes did
not reliably reach the widget tree. Because PxResponsiveWrapper returned
the same child widget instance on every rebuild, Flutter's identical-widget
diffing silently stopped propagation, so a plain 200.w could go stale
after a resize or rotation until something unrelated happened to rebuild
that part of the tree. Alongside that: a large scale-factor jump at each
breakpoint, maxWidth not matching its own documented centering behaviour,
a PxResponsiveDebug crash in its own documented placement, and landscape
phones being misclassified as tablets.
Fixed / Changed (see "Breaking changes" below for full details) #
- Reactivity.
PxResponsiveWrapperandPxResponsiveMediaQueryWrappernow publish aPxResponsiveDatasnapshot two ways every layout pass: via a newPxResponsiveScope(InheritedWidget) that this package's own widgets andcontext.responsivedepend on correctly, and — by walking the subtree and marking every descendant dirty when the data actually changed — so plain.w/.h/.sp/.rreads stay correct too, without requiring a rewrite of existing call sites. Controlled by the newforceRebuildOnChangeflag (defaulttrue); seePxResponsiveRebuildBoundaryto exempt a subtree, andPxResponsiveConfig.rebuildEpsilonto tolerate small changes without a full-tree rebuild. maxWidthnow actually centers content (the behaviour its own doc comments always described): pastmaxWidth, the app is physically constrained and centered in a column of that width, with empty space on either side (paint it with the newmaxWidthBackground). The old scale-factor-only behaviour is preserved viamaxWidthBehavior: PxMaxWidthBehavior.scaleOnly.- Hybrid breakpoint detection (
PxResponsiveConfig.breakpointAxis, defaultPxBreakpointAxis.hybrid):mobileBreakpointis now compared againstmin(effectiveWidth, screenHeight)andtabletBreakpointagainsteffectiveWidth, so a landscape phone is correctly detected as mobile (previously misclassified as tablet) while a short desktop monitor is still correctly detected as desktop. autoFlipLandscapeBase(defaulttrue): in landscape, when no explicit*Landscapesize is configured, a portrait-shaped base size is automatically flipped (width/height swapped) instead of producing a severely under-scaled height.transitionBand(default0, disabled): blendsactiveBaseSizelinearly across a band around each breakpoint, so crossing one no longer causes a large one-pixel jump (e.g.16.sprendering at 23.0px at width 1199 and 10.0px at width 1200 with the default configuration).PxDeviceTypeitself always still switches exactly at the breakpoint.PxResponsiveDebugno longer crashes when placed aboveMaterialApp(its own documented position) — it now supplies its ownDirectionalityand uses a non-directionalStackalignment.minScaleFactornow defaults tonull(was0.5): a floor guarantees overflow on screens narrower thanbase.width * minScaleFactorrather than protecting against anything; set it explicitly if you want one.- Reading a derived value (a scale factor,
deviceType,effectiveWidth,.value()) before any wrapper has built now asserts in debug mode, instead of silently returning a value clamped to the old floor default. Screen-dimension getters (screenWidth,safeArea*,config, ...) still return zeroed defaults without asserting. PxResponsiveConfig.copyWith()can now clear nullable fields (maxWidth,minScaleFactor,maxScaleFactor,maxTextScaleFactor, the*Landscapesizes,maxWidthBackground) by passingnullexplicitly.Icon.responsivenow forwards everyIconfield (previously droppedkey,applyTextScaling,blendMode,fontWeight).PxResponsiveGrid.builderconstructor (itemCount+itemBuilder) for lazily-built grids; the existingchildren:constructor is unchanged.EdgeInsetsDirectionalextension (.w,.scaled,.r), mirroring the existingEdgeInsetsextension, for RTL-aware code.context.orientationadded toPxResponsiveContextExtension.- The top-level global getters/functions (
isMobile,screenWidth,orientation,deviceType,platformType,responsiveValue, ...) are now@Deprecatedon the mainpackage:px_responsive/px_responsive.dartentrypoint — they pollute the importing file's global namespace and don't participate inPxResponsiveScope's reactivity. Prefercontext.responsiveorPxResponsive(). A verbatim, non-deprecated replacement is available viaimport 'package:px_responsive/globals.dart'. Will be removed from the main entrypoint in 0.3.0. - Fixed the widget test harness (
buildTestApp/pumpResponsiveinpx_responsive_widget_test.dart), which previously placed aSizedBoxinside the wrapper, making itssize:parameter inert — every size-dependent test silently ran at the 800×600 default test surface. It now setstester.view.physicalSizeinstead. The suite also gained tests that assert on the rendered widget tree after a resize, not just on the singleton's own getters.
Breaking changes #
If you're upgrading from 0.1.x, the changes most likely to affect you:
minScaleFactordefault0.5→null. If you relied on the implicit floor, setminScaleFactor: 0.5explicitly.- Landscape phones now classify as mobile, not tablet (see "Hybrid
breakpoint detection" above). Set
breakpointAxis: PxBreakpointAxis.widthto restore the exact 0.1.x tier logic. - Breakpoints now compare against
effectiveWidth, not the actual screen width, whenmaxWidthis set. This only differs from 0.1.x behaviour once the screen exceedsmaxWidth. maxWidthnow physically centers and constrains content by default (see above). A 2560px screen withmaxWidth: 1920gains 320px of empty space per side, painted with whatever is behind the wrapper unless you setmaxWidthBackground. SetmaxWidthBehavior: PxMaxWidthBehavior.scaleOnlyto keep exact 0.1.x behaviour.context.responsivenow returnsPxResponsiveData, notPxResponsive. Both expose the same scale/device-type/orientation getters, but code that held onto the returned type directly needs updating.- Reading a scale factor,
deviceType,effectiveWidth, or calling.value()before anyPxResponsiveWrapperhas built now asserts in debug mode, rather than silently returning a value derived from the old0.5floor. - Top-level global getters are deprecated on the main entrypoint (see above) — purely a lint-level change, not a behavioural one, until 0.3.0.
0.1.0 - 2026-03-21 #
Added #
- Orientation support —
isLandscape,isPortrait,orientationgetters andorientationValue<T>()on bothPxResponsiveand as global helpers PxOrientationenum —portrait/landscapevalues- Landscape design sizes — optional
mobileLandscape,tabletLandscape,desktopLandscapeinPxResponsiveConfig; the active base size switches automatically when the device rotates - Safe area awareness —
safeAreaTop,safeAreaBottom,safeAreaLeft,safeAreaRight,safeScreenHeightonPxResponsive; populated automatically fromMediaQuery.paddinginsidePxResponsiveWrapper PxResponsiveMediaQueryWrapper— alternative toPxResponsiveWrapperthat reads screen size fromMediaQueryinstead ofLayoutBuilder; useful when the wrapper is placed inside a constrained subtreeBuildContextextensions (PxResponsiveContextExtension) —context.isMobile,context.isTablet,context.isDesktop,context.deviceType,context.screenWidth,context.screenHeight,context.isLandscape,context.isPortraitTextStyle.responsive— scalesfontSizebyscaleSp,letterSpacingandwordSpacingbyscaleWIcon.responsive— scales iconsizebyscaleSp- Spacing extensions (
PxResponsiveSpacingExtension) —num.verticalSpace→SizedBox(height: value.h),num.horizontalSpace→SizedBox(width: value.w) - Radius clamping —
.rMin(min),.rMax(max),.rClamp(min, max)onnum(mirrors existing.wClamp/.hClamp/.spClamp) PxResponsiveDebug— overlay widget that displays device type, screen dimensions, orientation, active base size and all scale factors; controlled by anenabledflagPxResponsivePadding— widget that selects device-specificEdgeInsetswith an optionalscale: trueflag to apply.scaledautomaticallyPxResponsiveGrid—GridView-based widget with per-devicemobileColumns,tabletColumns,desktopColumns; configurablespacing,runSpacing,childAspectRatio,shrinkWrap, andphysicsAnimatedPxResponsiveBuilder— wraps layouts inAnimatedSwitcherso desktop window resizes transition smoothly between device types; supports custom duration, curves and transition buildersPxPlatformTypeenum —android,ios,web,macos,windows,linux,fuchsia- Platform detection helpers —
platformType,isNativeMobile,isNativeDesktop,isPlatformWebtop-level getters orientationValue<T>()global function — mirror ofPxResponsive().orientationValue()- Greatly expanded test suite: orientation tests, safe area tests, clamping tests,
TextStyle.responsivetests, spacing tests, plus a newpx_responsive_widget_test.dartcovering all widgets
Changed #
PxResponsive.init()now accepts an optionalsafeAreaPaddingparameter (defaults toEdgeInsets.zero— fully backward-compatible)PxResponsiveWrappernow passesMediaQuery.paddingassafeAreaPaddingtoinit()PxResponsive.reset()now resetssafeAreaPaddingtoEdgeInsets.zeroPxResponsive.toString()now includes orientation and safe area in outputPxResponsiveConfig.copyWith()gainsdesktopLandscape,tabletLandscape,mobileLandscapeparameters- SDK constraint kept at
<4.0.0(pub.flutter-io.cn does not accept constraints that allow non-existent Dart versions) - Supported platforms expanded: added
macos,linux,windowstopubspec.yaml - Version bumped to
0.1.0
0.0.4 - 2025-01-15 #
- Updated the license
0.0.3 - 2025-01-15 #
- Updated the documentation
0.0.2 - 2025-01-15 #
Added #
maxWidthparameter inPxResponsiveConfigto constrain maximum screen width- Maximum width limiting to prevent UI elements from becoming too large on ultra-wide displays
- Automatic width capping when screen exceeds
maxWidththreshold - Documentation for
maxWidthusage and best practices
Changed #
- Scale factor calculations now respect
maxWidthconstraint when specified - Improved handling of ultra-wide screen scenarios (4K, ultrawide monitors)
0.0.1 - 2025-01-10 #
Added #
- Initial release of px_responsive
PxResponsiveConfig— configuration class for design baselines and breakpointsPxResponsive— singleton core for calculating scale factorsPxResponsiveWrapper— widget wrapper for initializing the responsive system- Numeric extensions (
.w,.h,.sp,.r,.wf,.hf) - Parent-relative extensions (
.wr(),.hr()) - Clamping methods (
.wMin(),.wMax(),.wClamp(),.hMin(),.hMax(),.hClamp(),.spMin(),.spMax(),.spClamp()) EdgeInsetsextensions (.w,.scaled,.r)Sizeextensions (.scaled,.w,.r)BorderRadiusextensions (.r)PxResponsiveBuilder— widget for device-specific layoutsPxResponsiveValue— widget for device-specific valuesPxResponsiveVisibility— widget for conditional visibility- Scale factor clamping to prevent extreme UI scaling
- Separate text scale factor limit (
maxTextScaleFactor) - Full documentation for all public APIs