device_responsive 0.0.1

A magical, ultra-short, and powerful Flutter package to make your app responsive across Mobile, Tablet, Desktop, and Web with zero boilerplate.

[Device Responsive Banner]

device_responsive 🚀

A magical, ultra-short, and incredibly powerful Flutter package to make your app responsive across Mobile, Tablet, Desktop, and Web with zero boilerplate.

Say goodbye to massive if-else blocks, LayoutBuilder, or MediaQuery chaos!

Features ✨

• Auto-Scaling: Use .w, .h, .sp, and .r to scale your UI automatically without overflows.
• Device Shortcut API (context.device): Apply different values (like font size, colors, widgets) instantly for Mobile (m), Tablet (t), Desktop (d), and Web (w).
• Orientation Shortcut API (context.orientation): Apply different values for Portrait (p) and Landscape (l).
• AutoFlex Widget: A smart widget that acts as a Column in portrait mode and beautifully switches to a Row in landscape mode!

---

🛠 Installation

Add this to your pubspec.yaml:

dependencies:
  device_responsive: ^0.0.1

---

🚀 Quick Start

1. Initialize the Package

Wrap your MaterialApp with AutoResponsiveInit and provide your design's original screen size.

import 'package:device_responsive/device_responsive.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AutoResponsiveInit(
      designSize: const Size(375, 812), // Your design screen size
      builder: (context) => const MaterialApp(
        home: HomeScreen(),
      ),
    );
  }
}

2. Use the Magic Extensions

Instead of hardcoding sizes, just append .w, .h, .sp, or .r.

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

3. Use the Ultra-Short API (The Real Magic 🪄)

Forget about writing long if (isMobile) ... else if (isTablet) .... Use context.device() to change ANY property on the fly!

// Change Grid Columns based on device!
GridView.count(
  crossAxisCount: context.device(m: 2, t: 3, d: 4) ?? 2,
  ...
)

// Show/Hide Widgets based on device!
if (context.device(m: false, t: false, d: true) ?? false)
   SidebarWidget()

// Change Padding based on orientation!
Padding(
  padding: context.orientation(
    p: EdgeInsets.all(16.r), 
    l: EdgeInsets.symmetric(horizontal: 50.w),
  ),
)

4. Meet AutoFlex

Want your UI to be a Column when holding the phone straight, but a Row when the phone is rotated? Use AutoFlex!

AutoFlex(
  children: [
    ImageWidget(),
    TextWidget(),
  ]
)

That's it! It automatically adapts to the orientation.

---

👨‍💻 Developed By

Created with ❤️ to make Flutter developers' lives easier.

device_responsive