Responsive Layout Kit

A comprehensive Flutter package for building responsive layouts across different screen sizes and orientations.

Features

  • Device Type Detection: Automatically detects whether the app is running on a phone, tablet, or desktop
  • Responsive Builders: Widgets for easily creating different UIs based on screen size
  • Utility Extensions: Convenient extensions for responsive sizing, padding, and visibility
  • Screen Utils: Utilities for handling screen dimensions and adaptive scaling
  • Orientation Support: Support for different layouts in portrait and landscape modes
  • No External Dependencies: Built using only Flutter's core widgets

Installation

Add this to your pubspec.yaml:

dependencies:
  responsive_layout_kit: ^0.0.1

Usage

Initialize the Responsive System

Wrap your app with AppScreenInit to initialize the responsive system:

AppScreenInit(
  designSize: const Size(375, 812), // iPhone X design size
  builder: (context, child) {
    return MaterialApp(
      // Your app configuration
      home: HomePage(),
    );
  },
)

Use Responsive Builders

Create different layouts based on screen size:

ResponsiveBuilder(
  // Mobile layout (required)
  mobileBuilder: (context) => MobileLayout(),
  // Tablet layout (optional, falls back to mobile)
  tabletBuilder: (context) => TabletLayout(),
  // Desktop layout (optional, falls back to tablet or mobile)
  desktopBuilder: (context) => DesktopLayout(),
)

Use Extensions for Responsive Sizing

// Responsive width (e.g., 20.w instead of 20.0)
Container(width: 20.w)

// Responsive height
Container(height: 40.h)

// Responsive font size
Text('Hello', style: TextStyle(fontSize: 16.sp))

// Responsive radius
Container(decoration: BoxDecoration(borderRadius: BorderRadius.circular(8.r)))

Use BuildContext Extensions

// Check device type
if (context.isPhone) { /* Phone specific code */ }
if (context.isTablet) { /* Tablet specific code */ }
if (context.isDesktop) { /* Desktop specific code */ }

// Get screen info
double width = context.screenWidth;
double height = context.screenHeight;
bool landscape = context.isLandscape;

// Get adaptive values based on device type
final padding = context.adaptiveValue(
  mobile: 16.0,
  tablet: 24.0,
  desktop: 32.0,
);

Use Widget Extensions

// Add responsive padding
myWidget.withResponsivePadding(context)

// Wrap in a responsive container with max width
myWidget.withResponsiveContainer(
  context, 
  desktopMaxWidth: 1200,
  centerHorizontally: true,
)

// Control visibility by device type
myWidget.withResponsiveVisibility(
  context,
  showOnPhone: true,
  showOnTablet: false,
  showOnDesktop: false,
)

Orientation Layout

OrientationLayout(
  portrait: (context) => PortraitLayout(),
  landscape: (context) => LandscapeLayout(),
)

Example

See the example folder for a complete demo app.

License

MIT

Libraries

responsive_layout_kit