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.