adaptive_responsive_ui 1.0.0

A comprehensive Flutter package for responsive UI design with easy-to-use extensions for width, height, padding, margin, fonts, and device detection.

Adaptive Responsive UI

A comprehensive Flutter package for building responsive UIs with easy-to-use extensions. Scale your UI elements based on design dimensions from Figma, Adobe XD, or any design tool.

Features

• 🎯 Easy Responsive Sizing - Scale width, height, fonts, icons, and radius
• 📱 Device Detection - Identify mobile, tablet, and desktop devices
• 🎨 Smart Padding & Margin - Responsive spacing helpers
• ⚡ Context & Context-less - Use with or without BuildContext
• 🔧 Configurable Base Dimensions - Match your exact design file dimensions
• 📏 Safe Area Helpers - Easy access to safe area insets
• 🎭 Responsive Widgets - Built-in responsive builder widget

Installation

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

dependencies:
  responsive_utils: ^1.0.0

Then run:

flutter pub get

Quick Start

1. Initialize with your design dimensions

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Initialize with your Figma/design dimensions
    ResponsiveConfig.init(context, baseWidth: 390, baseHeight: 844);

    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

2. Use responsive extensions

Container(
  width: 200.w(context),           // Responsive width
  height: 100.h(context),          // Responsive height
  padding: 16.p(context),          // Responsive padding
  margin: 20.m(context),           // Responsive margin
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(12.r(context)), // Responsive radius
  ),
  child: Text(
    'Hello World',
    style: TextStyle(
      fontSize: 14.sp(context),    // Responsive font size
    ),
  ),
)

Usage Examples

Responsive Sizing

// Width and Height
Container(
  width: 300.w(context),    // Scales based on screen width
  height: 200.h(context),   // Scales based on screen height
)

// Font Size and Icons
Text(
  'Title',
  style: TextStyle(fontSize: 24.sp(context)),
)

Icon(Icons.home, size: 32.icon(context))

// Border Radius
BorderRadius.circular(16.r(context))

Responsive Spacing

// Padding
Container(
  padding: 16.p(context),  // All sides
  child: Text('Hello'),
)

Container(
  padding: 20.pSymmetric(
    context: context,
    horizontal: 24,
    vertical: 12,
  ),
)

Container(
  padding: 10.pOnly(
    context: context,
    left: 20,
    top: 10,
    right: 20,
    bottom: 10,
  ),
)

// Margin (same as padding)
Container(
  margin: 16.m(context),
)

// Gaps
Column(
  children: [
    Text('Item 1'),
    16.gapH(context),  // Vertical gap
    Text('Item 2'),
  ],
)

Row(
  children: [
    Text('Left'),
    20.gapW(context),  // Horizontal gap
    Text('Right'),
  ],
)

Device Detection

// Check device type
if (context.isMobile) {
  // Mobile layout
} else if (context.isTablet) {
  // Tablet layout
} else if (context.isDesktop) {
  // Desktop layout
}

// Get device type as string
print(context.deviceType); // "mobile", "tablet", or "desktop"

// Screen dimensions
print(context.screenWidth);
print(context.screenHeight);

// Orientation
if (context.isPortrait) {
  // Portrait mode
}

Safe Area

// Get safe area insets
Padding(
  padding: EdgeInsets.only(
    top: context.safeTop,
    bottom: context.safeBottom,
    left: context.safeLeft,
    right: context.safeRight,
  ),
  child: YourWidget(),
)

Responsive Values

// Select values based on device type
final columns = context.responsive<int>(
  mobile: 2,
  tablet: 3,
  desktop: 4,
);

// Grid count helper
GridView.count(
  crossAxisCount: context.gridCount(
    mobile: 2,
    tablet: 3,
    desktop: 4,
  ),
)

Context-less Usage

// After initializing ResponsiveConfig.init(context)
// You can use extensions without context:

Container(
  width: 200.w(),
  height: 100.h(),
  child: Text(
    'Hello',
    style: TextStyle(fontSize: 16.sp()),
  ),
)

Advanced Helpers

// Auto text size with constraints
TextStyle(
  fontSize: context.autoTextSize(min: 12, max: 24),
)

// Responsive image size
context.imageSize(width: 300, height: 200)

// Min/Max scaling based on shortest/longest side
Container(
  width: 100.min(context),  // Based on shortest side
  height: 100.max(context), // Based on longest side
)

Configuration

Set Base Dimensions

You can set your design dimensions in multiple ways:

// Option 1: During initialization
ResponsiveConfig.init(context, baseWidth: 375, baseHeight: 812);

// Option 2: Before initialization
ResponsiveConfig.setBaseDimensions(width: 375, height: 812);
ResponsiveConfig.init(context);

// Option 3: Platform-specific
if (Platform.isIOS) {
  ResponsiveConfig.init(context, baseWidth: 390, baseHeight: 844);
} else {
  ResponsiveConfig.init(context, baseWidth: 360, baseHeight: 800);
}

Default Base Dimensions

If not specified, the default base dimensions are:

• Width: 390 (iPhone 14 Pro)
• Height: 844 (iPhone 14 Pro)

Responsive Builder Widget

ResponsiveBuilder(
  builder: (context, constraints) {
    return Container(
      width: constraints.maxWidth,
      child: YourWidget(),
    );
  },
)

Example App

Check out the example folder for a complete working example.

Breaking Points

• Mobile: < 600px width
• Tablet: 600px - 1024px width
• Desktop: >= 1024px width

Tips

1. Initialize early: Call ResponsiveConfig.init(context) in your main app widget
2. Use design dimensions: Set baseWidth and baseHeight to match your design file
3. Consistent scaling: Use .w() for horizontal, .h() for vertical measurements
4. Font sizes: Always use .sp() for text to maintain readability
5. Test on devices: Test your responsive UI on different screen sizes

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

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

Author

Mostafiz - GitHub

Support

If you find this package helpful, please give it a ⭐ on GitHub!