flutter_responsive_plus 1.0.2
flutter_responsive_plus: ^1.0.2 copied to clipboard
The ultimate Flutter responsive toolkit — Figma scaling, adaptive layouts, typography, spacing, grid, navigation, RTL, and theme integration.
1.0.2 #
- Fixed
pubspec.yamldescription length (now within 60–180 characters). - Removed unreachable
homepageURL to pass pub.dev validation.
✨ Core #
ResKitglobal namespace — sizing, screen info, breakpoints, platform, accessibility.ResponsiveKitroot widget withWidgetsBindingObserverfor automatic metric updates.ResKitConfig— single-canvas and multi-canvas (per-breakpoint Figma) mode.ResKitDesignConfig— separate Figma canvases for mobile / tablet / desktop / web and fine-grained slots.ResKitDesignSize— 13 named presets (iphone14,ipadMini,macbookAir,fullHD,qhd…).ResKitBreakpoints— 9 breakpoints + Bootstrap / Material 3 / Tailwind presets.ResKit.builder()— 9-slot layout picker; accepts static widgets or builder callbacks +onLayout.ResKit.fluidSp()— fluid/viewport-interpolated font sizes (CSSclamp()equivalent).ResKit.directional()— RTL-awareEdgeInsetsDirectional.ResKit.reducedMotion/.highContrast/.boldText/.invertColors/.accessibleNavigation.
✨ Typography (ResKitTypography) #
- Full type scale:
display/displaySmall/h1–h6/titleLarge–Small/bodyLarge–Small/labelLarge–Small/caption/overline/button/custom/fluid/adaptive. ResKitTextTheme.build()— complete FlutterTextThemefrom the active Figma canvas.ResKitTextTheme.merge()— scale any existingTextThemewithout losing styles.
✨ Spacing (ResKitSpacing / ResKitInsets) #
- 8 adaptive tokens:
xs2/xs/sm/md/lg/xl/xxl/xxxl— with breakpoint multipliers (1× mobile → 1.125× tablet → 1.25× desktop → 1.5× desktopLarge). - Pre-built
EdgeInsetspresets:pagePadding/cardPadding/buttonPadding/inputPadding/dialogPadding/bottomSheetPadding+ gapSizedBoxhelpers.
✨ Grid (ResKitGrid / ResKitFlexGrid) #
ResKitGrid— 12-column responsive grid; per-item span declarations acrossxs/mobile/tablet/desktop/desktopLarge.ResKitGridItem— grid cell with span control per breakpoint.ResKitFlexGrid— auto-flow grid withminItemWidth(CSSauto-fill/minmaxequivalent).
✨ Navigation (ResKitNavScaffold) #
- Single widget that auto-switches: mobile →
BottomNavigationBar| tablet →NavigationRail(collapsed) | tabletLarge →NavigationRail(extended) | desktop →NavigationDrawersidebar. ResKitNavDestination— destination model with optional badge.
✨ Images #
ResKitImage— breakpoint-aware local asset switcher.ResKitNetworkImage— breakpoint-aware network image.ResKitDecorationImage— breakpoint-awareDecorationImagehelper.
✨ Theme Integration #
ResKitThemeData.build()— full Material 3ThemeDatawith all dimensions scaled.ResKitTheme—InheritedWidgetfor custom theme tokens.ResKitThemeExtension—ThemeExtension<T>withlerpfor card / button / input radii, page padding, and section spacing.
✨ Accessibility (ResKitAccessibility) #
reducedMotion/highContrast/boldText/invertColors/accessibleNav.duration()/curve()— animation helpers that respect reduced-motion setting.minTapTarget(48 dp, WCAG compliant) /semantics()/ensureTapTarget().
✨ Widgets #
ResponsiveBuilder/TriStateResponsiveBuilder—LayoutBuilder-based device-type switcher.AdaptiveBuilder/AdaptiveBuilderFn— platform-based widget switcher.WebContentWrapper— max-width centred web layout.ResponsiveVisibility— conditional visibility with optional state maintenance.ResKitMediaQuery— scopedMediaQueryoverride for tests and previews.FluidText— viewport-interpolatedTextwidget.ResKitRTLPadding— RTL-aware padding widget.ResKitDirectionalGap— RTL-aware horizontal spacing gap.
✨ RTL Support #
ResKit.directional()— scaledEdgeInsetsDirectional.ResKitRTLPadding—start/end/top/bottomwith automatic RTL flip.context.isRTL/context.isLTR/context.textDirection.
✨ Testing (ResKitTestHelper / ResKitTestSizes) #
init()/initMobile()/initTablet()/initDesktop()— unit-test setup without a widget tree.pumpWidget()/pumpAtSizes()— widget-test helpers.- 13 preset sizes:
iphone14/ipadMini/macbookAir/fullHD/watch…
✨ Extensions #
num/int/double—.w.h.r.sp.dp.pt.sw.sh.EdgeInsets/Size—.scaled.BuildContext— 50+ getters and methods.
✨ Utils (ResKitUtils) #
- Grid math /
textStyle/ aspect-fit /usableHeight/clamp/byOrientation/diagnosticMap. ResKit.debugPrint()— full diagnostic dump.