Responsive Wrapper

A comprehensive Flutter package for building responsive UIs that adapt to different screen sizes, device types, and orientations. This package provides a clean and flexible API for creating responsive layouts with automatic device detection and orientation handling.

Features

• Device Type Detection: Automatically detects phone, tablet, and desktop devices
• Orientation Support: Handle portrait and landscape orientations with different layouts
• Custom Breakpoints: Configure your own breakpoints for device type detection
• Parameterized Widgets: Pass data and state to your responsive layouts
• Pre-builders: Wrap responsive content with state management, themes, and more
• Responsive Values: Define different values for different device types and orientations
• Easy to Use: Simple API with comprehensive documentation and examples

Getting Started

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

dependencies:
  responsive_wrapper: ^1.0.0

Then run:

flutter pub get

Usage

Basic Responsive Wrapper

The simplest way to create responsive layouts:

import 'package:responsive_wrapper/responsive_wrapper.dart';

ResponsiveWrapper(
  builder: (context, screenInfo) {
    return Container(
      padding: EdgeInsets.all(
        screenInfo.isPhone ? 16.0 : 24.0,
      ),
      child: Text(
        'Device: ${screenInfo.deviceType.name}',
        style: TextStyle(
          fontSize: screenInfo.isPhone ? 16.0 : 20.0,
        ),
      ),
    );
  },
)

Responsive Layout

Define different layouts for different device types:

import 'package:responsive_wrapper/layout.dart';

ResponsiveLayout(
  phone: (context) => PhoneLayout(),
  tablet: (context) => TabletLayout(),
  desktop: (context) => DesktopLayout(),
)

Orientation-Aware Layouts

Handle different orientations with specific layouts:

import 'package:responsive_wrapper/orientation_layout.dart';

ResponsiveOrientationLayout(
  phonePortrait: (context) => PhonePortraitLayout(),
  phoneLandscape: (context) => PhoneLandscapeLayout(),
  tabletPortrait: (context) => TabletPortraitLayout(),
  tabletLandscape: (context) => TabletLandscapeLayout(),
  desktop: (context) => DesktopLayout(),
)

Parameterized Widgets

Pass data to your responsive layouts:

ResponsiveWrapperWith<UserData>(
  initialParam: userData,
  builder: (context, screenInfo, userData) {
    return UserProfile(user: userData);
  },
)

Responsive Values

Define different values for different device types and orientations:

final fontSize = ResponsiveOrientationValue<double>(
  phonePortrait: 16.0,
  phoneLandscape: 14.0,
  tabletPortrait: 20.0,
  tabletLandscape: 18.0,
  desktop: 24.0,
).getValue(context);

Custom Breakpoints

Configure your own breakpoints:

ResponsiveWrapper(
  breakpoints: const ResponsiveBreakpoints(
    phone: 480,  // Custom phone breakpoint
    tablet: 800, // Custom tablet breakpoint
  ),
  builder: (context, screenInfo) {
    // Your responsive content
  },
)

Pre-builders

Wrap responsive content with additional functionality:

ResponsiveWrapper(
  preBuilder: (context, child) => BlocBuilder<AppCubit, AppState>(
    builder: (context, state) => child,
  ),
  builder: (context, screenInfo) {
    // Your responsive content
  },
)

API Reference

Core Classes

• ResponsiveWrapper: Main responsive wrapper widget
• ResponsiveWrapperWith<T>: Parameterized responsive wrapper
• ResponsiveLayout: Device-specific layout wrapper
• ResponsiveLayoutWith<T>: Parameterized layout wrapper
• ResponsiveOrientationLayout: Orientation-aware layout wrapper
• ResponsiveOrientationLayoutWith<T>: Parameterized orientation layout wrapper

Utility Classes

• ResponsiveBreakpoints: Breakpoint configuration
• ScreenInfo: Screen information data class
• ResponsiveValue<T>: Responsive value utility
• ResponsiveOrientationValue<T>: Orientation-aware value utility
• DeviceType: Device type enumeration

Builder Types

• ResponsiveBuilder: Basic responsive builder function
• ResponsivePreBuilder: Pre-builder wrapper function
• ResponsiveLayoutBuilder: Layout builder function
• ResponsiveBuilderWith<T>: Parameterized builder function
• ResponsivePreBuilderWith<T>: Parameterized pre-builder function
• ResponsiveOrientationLayoutBuilder: Orientation layout builder function

Examples

Check out the comprehensive example app in the /example directory that demonstrates all features of the package.

To run the example:

cd example
flutter run

Configuration Options

Breakpoints

Default breakpoints follow Material Design guidelines:

• Phone: < 600px
• Tablet: 600px - 1024px
• Desktop: > 1024px

Orientation Handling

• treatLandscapePhoneAsTablet: Treat landscape phones as tablets
• treatPortraitTabletAsPhone: Treat portrait tablets as phones
• useShortestSide: Use shortest side for breakpoint calculations

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.

Additional Information

For more information about responsive design in Flutter, check out the Flutter documentation.

For questions, issues, or feature requests, please open an issue on the GitHub repository.