📱 Responsive Screen Master #

🔥 Why Responsive Screen Master? #

Responsive Screen Master is not just another screen adaptation package. It is a complete responsive architecture designed to solving the common pain points found in other packages like flutter_screenutil and responsive_framework.

We focus on Performance, Flexibility, and Developer Experience.

⚔️ The Ultimate Comparison #

🚀 Key Features #

• ⚡ Smart Caching System: Calculations are cached for maximum performance (120FPS ready).
• 🎯 Precise Breakdown: Custom breakpoints for Mobile, Tablet, and Desktop.
• 📐 Flexible Units:
  • .w / .h : Percentage of screen size.
  • .sw / .sh : Scale based on Figma design.
  • .wSafe / .hSafe : Safe area aware dimensions (Notch/Dynamic Island supported).
• 📝 Font Scaling Control: .spScaled respects user accessibility settings without breaking your layout.
• 📱 Platform Adaptation: Easily define values for Android vs iOS vs Web.
• 🛠️ Debug Overlay: Visualize device data in real-time on your device.

📦 Installation #

Add this to your pubspec.yaml:

dependencies:
  responsive_screen_master: ^2.0.0

🛠️ Usage #

1. Initialization (Clean & Simple) #

Wrap your MaterialApp with ResponsiveMaster and pass your configuration directly.

import 'package:responsive_screen_master/responsive_screen_master.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ResponsiveMaster(
      // Global Configuration
      config: const ResponsiveMasterConfig(
        designWidth: 375,   // Figma Design Width
        designHeight: 812,  // Figma Design Height
        mobileBreakpoint: 600,
        tabletBreakpoint: 1100,
        enableCaching: true,
      ),
      builder: (context, deviceInfo) {
        return MaterialApp(
          title: 'My App',
          home: HomeScreen(),
        );
      },
    );
  }
}

2. Core Concepts #

📏 Sizing

// 50% of Screen Width
Container(width: 50.w);

// 200px scaled from Figma Design
Container(width: 200.sw);

// 100% of Height minus Safe Area (Notch)
Container(height: 100.hSafe);

✍️ Typography (The Right Way)

Text(
  "Hello World",
  style: TextStyle(
    fontSize: 16.spScaled, // Respects accessibility settings safely
  ),
);

📱 Device Adaptation (Logic)

Change values based on screen type (Mobile / Tablet / Desktop):

Container(
  // Mobile: 100px, Tablet: 200px, Desktop: 300px
  width: stv(context: context, mobile: 100, tablet: 200, desktop: 300),
  
  // Mobile: Red, Tablet: Blue
  color: stv(context: context, mobile: Colors.red, tablet: Colors.blue),
);

📦 Responsive Layouts

Use ResponsiveGrid to automatically arrange items:

ResponsiveGrid(
  mobileColumns: 2,   // 2 Columns on Mobile
  desktopColumns: 4,  // 4 Columns on Desktop
  spacing: 16,
  children: products.map((p) => ProductCard(p)).toList(),
)

🐞 Debugging

Enable the Debug Overlay in config to see what's happening:

config: const ResponsiveMasterConfig(
  debugMode: true, // Shows an overlay with screen info
)

🧩 Advanced Usage #

Orientation Handling #

Container(
  height: otv(
    context: context, 
    portrait: 300.h, 
    landscape: 100.h // Reduce height in landscape
  ),
);

Platform Specifics #

Icon(
  // Use iOS icon on Apple devices, Material on others
  platformValue(
    mobile: Icons.arrow_back, // Android default
    ios: Icons.arrow_back_ios,
  ),
);

❤️ Keep it Open Source #

If you find this package useful, please give it a Like on pub.dev and a Star on GitHub!

Maintained by: Mohamed Khaled License: MIT