Responsive Spacing

A simple Flutter package to add responsive padding, margin, and scalable spacing widgets for consistent, adaptive layouts across all screen sizes. Includes utilities like ResponsivePadding, ResponsiveMargin, ResponsiveSpacer, and ResponsiveSpacingProvider to help you build fluid and maintainable UIs with ease.

Features

• ResponsivePadding: Adds adjustable padding around a widget based on screen size.
• ResponsiveMargin: Adds adjustable margin around a widget based on screen size.
• ResponsiveSpacingProvider: Provides a spacing scale (xs, sm, md, lg, xl) based on screen size.
• ResponsiveSpacer: Adds vertical or horizontal space using the spacing scale.
• context.spacing: Access the spacing values directly from BuildContext.
• Fully customizable spacing system with base unit and scale factor..

Installation

To include the Responsive Spacing package in your Flutter project, add the following dependency to your pubspec.yaml file:

dependencies:
  responsive_spacing_v2: ^latest

Example Usage

import 'package:responsive_spacing_v2/responsive_spacing_v2.dart';

✅ Getting Started

Wrap your app with ResponsiveSpacingProvider in main.dart:

void main() {
  runApp(
    ResponsiveSpacingProvider(
      base: 8.0,  // Base spacing unit
      scale: 1.5, // Scale factor for spacing levels
      child: MyApp(),
    ),
  );
}

✅ResponsivePadding

The ResponsivePadding widget allows you to add responsive padding around any child widget based on the screen size. Below is an example of how to use it:

ResponsivePadding(
  smallScreenPadding: 8.0, // Padding for screens smaller than 600px
  largeScreenPadding: 16.0, // Padding for screens 600px and larger
  child: Container(
    color: Colors.blue,
    child: Text(
      "This text has responsive padding",
      style: TextStyle(color: Colors.white),
    ),
  ),
);

✅ResponsiveMargin

The ResponsiveMargin widget allows you to add responsive margin around any child widget. Here’s an example:

ResponsiveMargin(
  smallScreenMargin: 8.0, // Margin for screens smaller than 600px
  largeScreenMargin: 16.0, // Margin for screens 600px and larger
  child: ElevatedButton(
    onPressed: () {
      // Button action
      print("Button pressed!");
    },
    child: Text("Button with responsive margin"),
  ),
);

✅ResponsiveSpacer

The ResponsiveSpacer widget inserts vertical or horizontal space using the spacing scale.

const ResponsiveSpacer(size: 'md'); // Adds vertical spacing of base * scale^2

const ResponsiveSpacer(size: 'lg', axis: Axis.horizontal); // Horizontal spacing

✅Access Spacing via context.spacing

You can access spacing values directly from the context using predefined sizes:

Padding(
  padding: EdgeInsets.symmetric(
    vertical: context.spacing.sm, // base * scale
    horizontal: context.spacing.lg, // base * scale^3
  ),
  child: Text("Padding using context.spacing"),
);