Zap Sizer

Zap Sizer is a powerful Flutter package designed to simplify responsive design by adapting your UI dynamically based on screen size, device type, and orientation. Whether you're building for mobile, tablet, desktop, or web, Zap Sizer provides precise control and flexibility to scale and render widgets properly across all devices.

🔧 Getting Started

Add Zap Sizer to your Flutter project:

dependencies:
  zap_sizer:

Then wrap your root widget or screen widget with ZapSizer to initialize the device configuration:

ZapSizer(
  builder: (context, constraints) {
    return MaterialApp(
      home: HomePage(),
    );
  },
);

📱 DeviceData Class

DeviceData is a utility class that stores information about the current device, including screen size, orientation, platform, and resolution.

🔄 Initialization

DeviceData is automatically initialized when you wrap your widget tree with ZapSizer.

ZapSizer(
  builder: (context, constraints) {
    print(DeviceData.deviceType); // Android, iOS, Web, etc.
    print(DeviceData.screenType); // mobile, tablet, desktop
    return YourApp();
  },
);

🧾 Attributes

🧱 AdaptiveBuilder Widget

The AdaptiveBuilder widget lets you build custom UIs based on the current device and screen configuration.

✅ Usage

AdaptiveBuilder(
  builder: (context, device, orientation, screenType) {
    return Column(
      children: [
        Text('Device: \$device'),
        Text('Orientation: \$orientation'),
        Text('Screen Type: \$screenType'),
      ],
    );
  },
);

🧠 AdaptiveWidget Widget

This widget renders different UIs depending on the platform and screen size.

✅ Usage

AdaptiveWidget(
  desktop: Text("Hello from Desktop"),
  tablet: Text("Hello from Tablet"),
  mobile: Text("Hello from Mobile"),
  android: Text("Hello from Android"),
  ios: Text("Hello from iOS"),
  notSupportedWidget: Text("Not Supported"),
);

📏 ZapResponsive Extension

The ZapResponsive extension adds smart measurement units directly to any number (num) type.

✅ Usage

double height = 50.0.h; // 50% of screen height
double width = 30.0.w;  // 30% of screen width
double fontSize = 16.0.sp; // Scaled font size
double mm = 10.0.mm;    // Convert inches to millimeters

📦 Methods

🔬 Example

ZapSizer(
  builder: (context, constraints) {
    return Scaffold(
      appBar: AppBar(title: Text("Zap Sizer Example")),
      body: AdaptiveBuilder(
        builder: (context, device, orientation, screen) {
          return Center(
            child: Container(
              width: 80.w,
              height: 30.h,
              color: Colors.blue,
              child: Text(
                "Responsive Text",
                style: TextStyle(fontSize: 24.sp),
              ),
            ),
          );
        },
      ),
    );
  },
);

✅ Benefits

• 🔁 Adaptive layouts with minimal code
• 🧠 Device-specific logic simplified
• 🖥️ Responsive units for sizes, fonts, and spacing
• 📱 Works on mobile, desktop, web, tablets
• 🎯 Accurate DPI and physical unit support (mm, cm, etc.)

📌 Notes

• Always wrap your app or screen with ZapSizer before using other features.
• Works seamlessly with any Flutter layout or theme.
• Can be extended with custom screen type breakpoints if needed.