Responsive Spacing

A simple Flutter package to add responsive padding and margin widgets for consistent, adaptive spacing across different screen sizes. This package is especially helpful for creating layouts that need flexible padding and margin based on screen width, ideal for responsive design.

Features

  • ResponsivePadding: Adds adjustable padding around a widget based on screen size.
  • ResponsiveMargin: Adds adjustable margin around a widget based on screen size.
  • Customizable padding and margin values for both small and large screens.

Installation

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

dependencies:
  responsive_spacing: ^1.1.2

Example Usage

import 'package:responsive_spacing/responsive_spacing.dart';

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),
    ),
  ),
);

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"),
  ),
);