Responsive Size Helper Plus

A powerful Flutter package that helps you create pixel-perfect responsive layouts by automatically converting Figma design dimensions to device-specific dimensions. This package makes it incredibly easy to maintain design consistency across different screen sizes and devices.

Features

• 🎯 Pixel-Perfect Conversion: Automatically converts Figma design dimensions to device-specific sizes
• 🚀 Simple Integration: Easy to initialize and use with intuitive API
• 📱 Cross-Platform Support: Works on all platforms (iOS, Android, Web, Desktop)
• ⚡ Performance Optimized: Minimal runtime overhead with efficient calculations
• 🧩 Rich Extension Methods: Convenient extensions (.w, .h, .sp, .r, .max) for all use cases
• 🛠️ Type-Safe: Fully type-safe API with null safety support
• 🔒 Input Validation: Prevents invalid dimensions with proper error handling
• 🎨 Aspect Ratio Support: Min/max scale factors to maintain proportions
• 📦 Widget Helpers: Built-in helpers for EdgeInsets, SizedBox, and spacing
• 🏗️ Modular Architecture: Clean, organized code structure for maintainability

Installation

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

dependencies:
  responsive_size_helper_plus: ^1.0.5

Usage

Initialization

Initialize the helper with your Figma design dimensions and current device dimensions:

import 'package:responsive_size_helper_plus/responsive_size_helper_plus.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Initialize once at app startup
    ResponsiveSizeHelper.init(
      designWidth: 375, // Your Figma design width
      designHeight: 812, // Your Figma design height
      currentWidth: MediaQuery.of(context).size.width,
      currentHeight: MediaQuery.of(context).size.height,
    );
    return MaterialApp(
      // Your app code
    );
  }
}

Using the Helper

Extension Methods (Recommended)

Container(
  width: 200.w,   // Responsive width
  height: 100.h,  // Responsive height
  padding: EdgeInsets.all(16.w),
  child: Text(
    'Hello World',
    style: TextStyle(fontSize: 16.sp), // Scaled font size
  ),
)

Available Extensions

• .w - Converts to responsive width
• .h - Converts to responsive height
• .sp - Scaled font size (uses minimum scale factor for readability)
• .r - Responsive radius/size (maintains aspect ratio)
• .max - Uses maximum scale factor

Widget Extensions

// Spacing widgets
16.verticalSpace,    // SizedBox with responsive height
16.horizontalSpace,  // SizedBox with responsive width
24.squareSpace,      // Square SizedBox

// Responsive EdgeInsets
Container(
  padding: ResponsiveEdgeInsets.all(16),
  margin: ResponsiveEdgeInsets.symmetric(
    horizontal: 16,
    vertical: 8,
  ),
  child: Text('Responsive Padding'),
)

// EdgeInsets extension
Container(
  padding: EdgeInsets.all(16).responsive,
  child: Text('Auto-responsive'),
)

// Responsive SizedBox
ResponsiveSizedBox.square(48, child: Icon(Icons.star)),
ResponsiveSizedBox.fromSize(width: 200, height: 100),

Direct Methods

Container(
  width: ResponsiveSizeHelper.getWidth(200),
  height: ResponsiveSizeHelper.getHeight(100),
  child: Text('Hello World'),
)

Complete Example

Here's a comprehensive example showcasing various features:

import 'package:flutter/material.dart';
import 'package:responsive_size_helper_plus/responsive_size_helper_plus.dart';

class ResponsiveCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 327.w,
      height: 180.h,
      padding: ResponsiveEdgeInsets.all(16),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(12.r),
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            blurRadius: 10.r,
            offset: Offset(0, 4.h),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            'Responsive Card',
            style: TextStyle(
              fontSize: 24.sp,  // Scaled font size
              fontWeight: FontWeight.bold,
            ),
          ),
          8.verticalSpace,  // Responsive spacing
          Text(
            'This card maintains its proportions across different screen sizes.',
            style: TextStyle(fontSize: 16.sp),
          ),
          16.verticalSpace,
          Row(
            children: [
              ResponsiveSizedBox.square(
                48,
                child: Icon(Icons.star, size: 24.r),
              ),
              16.horizontalSpace,
              Expanded(
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    padding: ResponsiveEdgeInsets.symmetric(
                      horizontal: 24,
                      vertical: 12,
                    ),
                  ),
                  onPressed: () {},
                  child: Text('Action', style: TextStyle(fontSize: 14.sp)),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Best Practices

1. Initialize Early: Call init() as early as possible in your app lifecycle
2. Use Extensions: Prefer extension methods (.w, .h, .sp) for cleaner, more readable code
3. Consistent Design Dimensions: Keep your design dimensions consistent with your Figma design
4. Font Sizes: Use .sp for font sizes to maintain readability across different screen sizes
5. Spacing: Use .verticalSpace and .horizontalSpace for consistent spacing
6. EdgeInsets: Use ResponsiveEdgeInsets helpers for padding and margins
7. Tablet/Desktop: Consider using different design dimensions for larger screens

Contributing

Contributions are welcome! If you find a bug or want to add a feature:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

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

Support

If you find this package helpful, please give it a star on GitHub and consider supporting its development.