Adaptive Design Utils #

A comprehensive Flutter plugin for adaptive and responsive design. This plugin provides a collection of utilities and widgets to make your Flutter apps adapt beautifully across different screen sizes, orientations, and platforms.

Features #

• Adaptive Layout System: Easily create different layouts for mobile, tablet, and desktop
• Screen Utils: Adaptive sizing utilities for width, height, and padding
• Responsive Typography: Automatically scale text sizes based on screen size
• Breakpoint Management: Pre-defined breakpoints with helper methods
• Adaptive Widgets: Ready-to-use widgets that adapt to different screen sizes

Installation #

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

dependencies:
  adaptive_design_utils: ^0.0.1

Usage #

Initialize #

First, initialize the adaptive utilities in your app:

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Initialize adaptive utils
    AdaptiveDesignUtils.initialize(context);
    
    return MaterialApp(
      // ... your app configuration
    );
  }
}

Responsive Layout #

Create different layouts for different screen sizes:

ResponsiveLayout(
  mobile: YourMobileLayout(),
  tablet: YourTabletLayout(), // Optional
  desktop: YourDesktopLayout(), // Optional
)

Screen Utils #

Use adaptive measurements:

// Adaptive width and height
width: ScreenUtils.adaptiveWidth(100),
height: ScreenUtils.adaptiveHeight(50),

// Get screen information
double screenWidth = ScreenUtils.screenWidth;
double screenHeight = ScreenUtils.screenHeight;
bool isLandscape = ScreenUtils.isLandscape;

Responsive Typography #

Create responsive text styles:

Text(
  'Your Text',
  style: ResponsiveTypography.adaptiveTextStyle(
    Theme.of(context).textTheme.titleLarge!,
    fontSize: 24,
  ),
)

Breakpoints #

Check current device type:

if (Breakpoints.isMobile(context)) {
  // Mobile layout logic
} else if (Breakpoints.isTablet(context)) {
  // Tablet layout logic
} else if (Breakpoints.isDesktop(context)) {
  // Desktop layout logic
}

Responsive Padding #

Add responsive padding that adapts to screen size:

ResponsivePadding(
  mobilePadding: EdgeInsets.all(16),
  tabletPadding: EdgeInsets.all(24),
  desktopPadding: EdgeInsets.all(32),
  child: YourWidget(),
)

Responsive Constraints #

Apply responsive constraints to your widgets:

ResponsiveConstraints(
  mobileConstraints: BoxConstraints(maxWidth: 300),
  tabletConstraints: BoxConstraints(maxWidth: 500),
  desktopConstraints: BoxConstraints(maxWidth: 800),
  child: YourWidget(),
)

Example #

Check out the example app in the example directory for a complete demonstration of all features.

Breakpoint Reference #

• xs: 0-599px (Mobile)
• sm: 600-959px (Tablet)
• md: 960-1279px (Small Desktop)
• lg: 1280-1919px (Large Desktop)
• xl: 1920px+ (Extra Large Desktop)

Contributing #

Contributions are welcome! If you find a bug or want to add a feature, please file an issue or submit a pull request.

License #

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