Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
Package detailsv1.5.0

device_frame_plus

Flutter package provides mockups for common devices, allowing developers to preview and test their apps within simulated device frames.

AndroidiOSWebmacOSWindowsLinux
pub.dev API documentation Source code
30-day downloads
504K
Likes
57
Pub points
150

Install package

flutter pub add device_frame_plus

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

DeviceFramePlus is a Flutter package that enables developers to display their app interfaces within realistic, pre-designed device frames for Android, iOS, Web, macOS, Windows, and Linux. It simplifies UI previews by offering customizable mockups of popular devices, helping visualize how the app appears across different screen sizes and orientations. Ideal for presentations, documentation, and early-stage design reviews, it enhances the development workflow with minimal setup. The package integrates seamlessly into Flutter projects via pub.dev.

Use cases

  • App UI previews
  • Design documentation
  • Presentation materials
  • Cross-platform testing
  • Developer demos

Key features

  • Predefined device templates
  • Customizable frame styles
  • Multi-platform support
  • Easy integration
  • Responsive layout rendering

Suitable for

  • UI/UX designers
  • Flutter developers
  • Product managers
  • Technical writers

Considerations

  • Limited to static mockups
  • No interactive device behavior
  • Best for visual reference only
  • Not intended for functional testing

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

device_frame_plus

Mockups for common devices.

Quickstart

Wrap any widget in a DeviceFrame widget and give it a device (multiple devices are available from the Device accessors).

DeviceFrame(
    device: Devices.ios.iPhone11,
    isFrameVisible: true,
    orientation: Orientation.portrait,
    screen: Container(
        color: Colors.blue,
        child: Text('Hello'),
    ),
)

Examples

Usage

Displaying a virtual keyboard

To display a generic simulated virtual keyboard, simply wrap any widget in a VirtualKeyboard.

DeviceFrame(
    device: Devices.ios.iPhone11,
    orientation: orientation,
    screen: VirtualKeyboard(
        isEnabled: true,
        child: // ...
    ),
)
Maintain device media query and theme in an encapsulated app

To make sure that a WidgetsApp uses the simulated MediaQuery from the simulated devices, set its useInheritedMediaQuery property to true.

DeviceFrame(
    device: Devices.ios.iPhone11,
    orientation: orientation,
    screen: Builder(
        builder: (deviceContext) => MaterialApp(
            useInheritedMediaQuery: true,
            theme: Theme.of(context),
        ),
    ),
),
Creating a custom generic device

Various generic devices are available as DeviceInfo factories to make it easy to create custom device instances.

Phone
DeviceInfo.genericPhone(
    platform: TargetPlatform.android,
    name: 'Medium',
    id: 'medium',
    screenSize: const Size(412, 732),
    safeAreas: const EdgeInsets.only(
      left: 0.0,
      top: 24.0,
      right: 0.0,
      bottom: 0.0,
    ),
    rotatedSafeAreas: const EdgeInsets.only(
      left: 0.0,
      top: 24.0,
      right: 0.0,
      bottom: 0.0,
    ),
)
Tablet
DeviceInfo.genericTablet(
    platform: TargetPlatform.android,
    name: 'Medium',
    id: 'medium',
    screenSize: const Size(1024, 1350),
    safeAreas: const EdgeInsets.only(
      left: 0.0,
      top: 24.0,
      right: 0.0,
      bottom: 0.0,
    ),
    rotatedSafeAreas: const EdgeInsets.only(
      left: 0.0,
      top: 24.0,
      right: 0.0,
      bottom: 0.0,
    ),
)
Desktop monitor
DeviceInfo.genericDesktopMonitor(
    platform: TargetPlatform.windows,
    name: 'Wide',
    id: 'wide',
    screenSize: const Size(1920, 1080),
    windowPosition: Rect.fromCenter(
      center: const Offset(
        1920 * 0.5,
        1080 * 0.5,
      ),
      width: 1620,
      height: 780,
    ),
)
Laptop
DeviceInfo.genericLaptop(
    platform: TargetPlatform.windows,
    name: 'Laptop',
    id: 'laptop',
    screenSize: const Size(1920, 1080),
    windowPosition: Rect.fromCenter(
      center: const Offset(
        1920 * 0.5,
        1080 * 0.5,
      ),
      width: 1620,
      height: 780,
    ),
)

Available devices

Screenshots for all available devices are available in the test/devices directory

Contributing

Edit device frames

All frames are designed in a Figma file.

Categories

Device Preview, Screen Capture & Screenshot

Source repository

Projects using this package