AdaptiveSpacing

A lightweight Flutter package that provides responsive spacing widgets that automatically adapt to different screen sizes. Stop wrestling with manual spacing calculations and create beautiful, responsive layouts effortlessly.

Features

• 🚀 Automatic Screen-Based Scaling - Spacing adjusts dynamically based on screen dimensions
• 📱 Cross-Device Consistency - Maintain visual harmony across phones, tablets, and desktops
• 🎯 Simple API - Intuitive widget names like Oneh(), Twow() for quick implementation
• 🎨 Design-Friendly - Perfect for implementing precise spacing from design specifications
• 🪶 Lightweight - Minimal impact on your app's size

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  adaptive_spacing: ^1.0.1

Then run:

flutter pub get

Usage

Import the package:

import 'package:adaptive_spacing/adaptive_spacing.dart';

Vertical Spacing

Column(
  children: [
    const Text('Profile Picture'),
    Oneh(), // Adds 1% of screen height
    const CircleAvatar(
      radius: 50,
      backgroundImage: AssetImage('assets/profile.jpg'),
    ),
    Twoh(), // Adds 2% of screen height
    const Text('John Doe'),
  ],
)

Available vertical spacers:

• Halfh() - 0.5% of screen height
• Oneh() - 1% of screen height
• Twoh() - 2% of screen height
• Threeh() - 3% of screen height
• Fiveh() - 5% of screen height
• Sevenh() - 7% of screen height

Horizontal Spacing

Row(
  children: [
    const Icon(Icons.star),
    Onew(), // Adds 1% of screen width
    const Text('4.9'),
    Twow(), // Adds 2% of screen width
    const Text('(123 reviews)'),
  ],
)

Available horizontal spacers:

• Onew() - 1% of screen width
• Twow() - 2% of screen width
• Threew() - 3% of screen width
• Fivew() - 5% of screen width

Example

Here's a complete example showing how AdaptiveSpacing can improve your layout code:

class ProfileCard extends StatelessWidget {
  const ProfileCard({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        children: [
          Oneh(),
          const CircleAvatar(radius: 40),
          Oneh(),
          const Text('John Doe', style: TextStyle(fontSize: 24)),
          Halfh(),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Icon(Icons.location_on),
              Onew(),
              const Text('New York, USA'),
            ],
          ),
          Twoh(),
        ],
      ),
    );
  }
}

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🌟 Show your support

Give a ⭐️ if this project helped you!

Libraries

adaptive_spacing