Device Wrapper #

A Flutter package to wrap pages with realistic device frames (iPhone, Samsung Galaxy, iPad, Galaxy Tab, MacBook, Surface, Apple Watch) for web/desktop preview. Features auto-scaling, status bar, orientation change, dark/light themes, screenshots, and keyboard shortcuts.

Features #

• 📱 8 Device Options: iPhone 16 Pro, Galaxy S25, iPad Pro, Galaxy Tab S9, MacBook Pro, Surface Pro, Apple Watch, and Screen Only mode
• 🏝️ Dynamic Island: Modern iPhone-style Dynamic Island with camera lens effect
• ⚫ Punch-Hole Camera: Samsung-style centered punch-hole camera for Galaxy devices
• 💻 Desktop Devices: MacBook Pro and Surface Pro with realistic laptop body frames
• ⌚ Apple Watch: Watch frame with Digital Crown, side button, and watch bands
• 📊 Status Bar: iOS/Android style status bar with time, signal, WiFi, and battery
• 🔄 Orientation: Portrait/landscape rotation with proper notch/camera positioning
• 🎨 Themes: Light (white) and Dark (gray) theme modes
• 📸 Screenshots: Capture device frame as image
• ⌨️ Keyboard Shortcuts: Full keyboard control for all features
• 📐 Auto-Scaling: Automatically scales device to fit any screen size
• 📲 Mobile Device Support: Smart detection with optional toggle
• 🖥️ Screen Only Mode: Display just the screen without device frame
• 🎬 Smooth Animations: Animated transitions when switching modes

Installation #

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

dependencies:
  device_wrapper: ^1.2.0

Then run:

flutter pub get

Usage #

Basic Usage #

Wrap your MaterialApp with DeviceWrapper for web preview:

import 'package:device_wrapper/device_wrapper.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DeviceWrapper(
        initialMode: DeviceMode.iphone,
        showModeToggle: true,
        child: MyHomePage(),
      ),
    );
  }
}

With All Features #

DeviceWrapper(
  initialMode: DeviceMode.iphone,
  showModeToggle: true,
  initialTheme: WrapperTheme.light,
  initialOrientation: DeviceOrientation.portrait,
  onModeChanged: (mode) {
    print('Device mode changed to: ${mode.displayName}');
  },
  onScreenshot: (image) {
    print('Screenshot taken: ${image.width}x${image.height}');
  },
  child: MyApp(),
)

Custom Device Configuration #

DeviceWrapper(
  initialMode: DeviceMode.iphone,
  mobileConfig: DeviceConfig(
    width: 375,
    height: 812,
    borderRadius: 44.0,
    borderWidth: 5.0,
    borderColor: Colors.black,
    showNotch: true,
    showHomeIndicator: true,
  ),
  child: MyApp(),
)

Keyboard Shortcuts #

API Reference #

DeviceWrapper #

DeviceMode #

enum DeviceMode {
  iphone,        // iPhone 16 Pro (393×852)
  samsungPhone,  // Samsung Galaxy S25 (384×832)
  ipad,          // iPad Pro 11" (834×1194)
  samsungTablet, // Samsung Galaxy Tab S9 (800×1280)
  macbook,       // MacBook Pro 14" (1512×982)
  surface,       // Microsoft Surface Pro (1368×912)
  appleWatch,    // Apple Watch Series 10 (198×242)
  screenOnly,    // Screen only without device frame
}

WrapperTheme #

enum WrapperTheme {
  light,  // Light theme with white background (default)
  dark,   // Dark theme with gray background
}

DeviceOrientation #

enum DeviceOrientation {
  portrait,   // Portrait mode (taller than wide)
  landscape,  // Landscape mode (wider than tall)
}

MobileDeviceBehavior #

enum MobileDeviceBehavior {
  alwaysShowFrame,  // Always show the device frame wrapper
  alwaysHideFrame,  // Always render child directly without frame
  showToggle,       // Show a toggle to let user choose (default)
}

DeviceConfig #

Device Specifications #

Bottom Toolbar Features #

The bottom toolbar includes:

• Screen/Device: Toggle between screen-only and device frame modes
• Portrait/Landscape: Change device orientation
• Light/Dark: Switch between light and dark themes
• Screenshot: Capture the device frame as an image
• Hide: Hide the wrapper and show just your app

Example #

Check out the example directory for a complete demo app showcasing all features.

License #

MIT License - see the LICENSE file for details.

Contributing #

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

Changelog #

See CHANGELOG.md for version history.