device_frame

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'),
                    ),
                )
                

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,
                    ),
                )
                

Latptop

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.

1.4.0

• Updated min sdk version and upgraded dependencies.

1.3.0

• Added more devices:
  • iOS: iPhone 11 Pro Max, iPhone 15 Pro, iPhone 15 Pro Max, iPhone 16, iPhone 16 Plus, iPhone 16 Pro, iPhone 16 Pro Max, iPad Pro 11" (M4), iPad Pro 13" (M4)
  • Android: Google Pixel 9, Google Pixel 9 Pro XL, Samsung Galaxy S25

1.2.0

• Updated dependencies to support Flutter 3.22.

1.1.0

• Updated freezed dependency.

1.0.0-alpha.2

• Added extra padding for virtual keyboard.

1.0.0-alpha.1

• Added more Android devices (Galaxy A50, Galaxy Note20, Galaxy Note20 Ultra, Xperia 1 II).
• Fixed insets and padding calculation issues to match native behaviour.
• Improved documentation.
• Added golden tests.

0.6.1

• Exposing more classes.

0.6.0

• Removed SVG dependencies.
• Updated device :
  • iOS: iPhone 12 mini, iPhone 12 Pro Max, iPhone 12, iPhone 13 mini, iPhone 13 Pro Max, iPhone 13, iPhone SE, iPad Air 4, iPad Pro
  • Android: Samsung S20, OnePlus 8 Pro, Generic phones and tablets
  • Windows: Generic desktop and laptop
  • macOS: MacBook Pro, Generic desktop
  • Linux: Generic desktop and laptop

0.5.2

• Fixed SVG parsing errors (definitions as first).

0.5.1

• Fixed SVG parsing errors (removed effects).

0.5.0

• Migrated to flutter_lints
• Upgraded dependencies

0.4.2

• Fixing missing part file.

0.4.1

• Upgraded dependencies.

0.4.0

• Migration to null-safety.

0.3.0

• Stable release

0.3.0-prerelease9

• Fixed screen clip when frame not visible.

0.3.0-prerelease7

• Device info is preparsed through a tool and device info access is now synchronous.

0.3.0-prerelease6

• Hiding screen while loading.

0.3.0-prerelease5

• Keeping screen in tree to keep its state.

0.3.0-prerelease4

• Fixed loadDevicesInfo.

0.3.0-prerelease3

• Added linux devices.

0.3.0-prerelease2

• New redesigned frames.

0.1.2

• Added virtual keyboard.

0.1.1

• Fixed issue with iPad pro button location.

0.1.0

• Initial release.