Responsive Spacing v2

A flexible, lightweight Flutter package providing responsive spacing, padding, margins, adaptive breakpoints, and spacers across mobile, tablet, desktop, and web.

pub package License: MIT

✨ Features

  • ResponsivePadding: Adaptive padding with uniform, symmetric, only, and directional constructors.
  • ResponsiveMargin: Adaptive margins with uniform, symmetric, only, and directional constructors.
  • ResponsiveSpacingProvider: Provides a global, customizable geometric spacing scale (xs, sm, md, lg, xl, xxl).
  • ResponsiveSpacer: Type-safe horizontal and vertical spacers (SpacingSize.xs, SpacingSize.md, .lg(), etc.).
  • Material 3 Breakpoints & ScreenType: Compact, Medium, Expanded, Large, and Extra Large adaptive window classes.
  • ResponsiveValue<T>: Declarative responsive value builder for any property (columns, font sizes, colors).
  • BuildContext Extensions: Direct access to context.spacing, context.spaceMd, context.screenType, context.isCompact.
  • num Extensions: 16.verticalSpace, 8.horizontalSpace.
  • Slivers: SliverResponsivePadding and SliverResponsiveSpacer.
  • Zero Breaking Changes: 100% backward compatible with existing code.

📦 Installation

Add responsive_spacing_v2 to your pubspec.yaml:

dependencies:
  responsive_spacing_v2: ^1.2.3

Import it in your Dart code:

import 'package:responsive_spacing_v2/responsive_spacing_v2.dart';

🚀 Getting Started

Wrap your application root with ResponsiveSpacingProvider:

void main() {
  runApp(
    const ResponsiveSpacingProvider(
      base: 8.0,  // Base spacing unit (xs = 8.0)
      scale: 1.5, // Scale multiplier (sm = 12, md = 18, lg = 27, xl = 40.5, xxl = 60.75)
      child: MyApp(),
    ),
  );
}

📖 Usage Guide

1. ResponsivePadding & ResponsiveMargin

// Uniform padding (switches at 600px breakpoint)
ResponsivePadding(
  smallScreenPadding: 8.0,
  largeScreenPadding: 16.0,
  child: MyWidget(),
);

// Symmetric padding
ResponsivePadding.symmetric(
  horizontalSmall: 12.0,
  horizontalLarge: 32.0,
  verticalSmall: 6.0,
  verticalLarge: 16.0,
  child: MyWidget(),
);

// Per-edge only padding
ResponsivePadding.only(
  leftSmall: 8.0,
  leftLarge: 24.0,
  bottomSmall: 12.0,
  bottomLarge: 20.0,
  child: MyWidget(),
);

// Responsive Margin
ResponsiveMargin(
  smallScreenMargin: 8.0,
  largeScreenMargin: 16.0,
  child: ElevatedButton(...),
);

2. Type-Safe Spacers

// Named constructors
const ResponsiveSpacer.vertical(SpacingSize.md);
const ResponsiveSpacer.horizontal(SpacingSize.lg);

// Direct size helpers
const ResponsiveSpacer.sm();
const ResponsiveSpacer.lg();

// Backward-compatible string syntax
const ResponsiveSpacer(size: 'md');

// num extensions
16.verticalSpace;
8.horizontalSpace;

3. Accessing Spacing from BuildContext

// Access complete spacing scale
final md = context.spacing.md;

// Convenience getters
Padding(
  padding: EdgeInsets.symmetric(
    vertical: context.spaceSm,
    horizontal: context.spaceLg,
  ),
  child: Text("Consistent spacing"),
);

4. Responsive Values & Breakpoints

// Responsive values based on screen size
final columns = ResponsiveValue<int>(
  context,
  compact: 1,   // Mobile (< 600dp)
  medium: 2,    // Tablet portrait (600 - 840dp)
  expanded: 3,  // Tablet landscape / laptop (840 - 1200dp)
  large: 4,     // Desktop (1200 - 1600dp)
).value;

// Screen inspection
if (context.isCompact) {
  // Mobile specific UI
} else if (context.isTablet) {
  // Tablet specific UI
}

5. Fluid / Clamped Spacing

Interpolates smoothly between screen sizes:

final fluidPadding = ResponsiveSpacing.fluid(
  context,
  minSize: 12.0,
  maxSize: 32.0,
  minWidth: 360.0,
  maxWidth: 1200.0,
);

6. Slivers

CustomScrollView(
  slivers: [
    const SliverResponsiveSpacer.lg(),
    SliverResponsivePadding(
      smallScreenPadding: 8.0,
      largeScreenPadding: 16.0,
      sliver: SliverList(...),
    ),
  ],
);

🧪 Testing

Run the test suite:

flutter test

📄 License

MIT License. See LICENSE for details.

Libraries

responsive_spacing_v2