flutter_device_preview

flutter_device_preview is a tool for simulating mobile device experiences on a laptop, desktop, or tablet. It allows you to preview your application across various device configurations without needing physical hardware.

Key capabilities include:

• Multi-device Preview: Preview any device from any device.
• Orientation Control: Change the device orientation dynamically.
• System Configuration Simulation: Simulate dynamic system settings such as language, dark mode, and text scaling factors.
• Freeform Mode: Use a freeform device with adjustable resolution and safe areas.
• State Preservation: Keep the application state during previews.
• Plugin System: Extend functionality with plugins like Screenshot or custom implementations.

Device Preview provides a simulated mobile environment with the following capabilities:

• Device Simulation: Preview any device from any device and change device orientation.
• Dynamic System Configuration: Simulate changes to language, dark mode, text scaling factor, and more.
• Freeform Mode: Use a freeform device with adjustable resolution and safe areas.
• State Preservation: Keep the application state during previews.
• Plugin System: Extend functionality with plugins like Screenshot or File explorer.

Device Preview is a first-order approximation of how your app looks and feels on a mobile device. It simulates the mobile user experience on a laptop, desktop, or tablet rather than running code on actual mobile hardware.

Some hardware-specific aspects of mobile devices cannot be simulated. For high-fidelity testing, you should run your app on a real physical device.

Device Preview provides a first-order approximation of how an app looks and feels on a mobile device. It simulates the mobile user experience on a computer (laptop, desktop, or tablet) rather than running your code on actual mobile hardware.

Important Note: Because it is a simulation, there are aspects of mobile devices that Device Preview cannot replicate. For high-fidelity testing or when in doubt, you should run your application on a real physical device.

To use device_frame, wrap any widget in a DeviceFrame widget. You must provide a device parameter, which can be selected from the available Devices accessors (e.g., Devices.ios.iPhone11).

Key parameters:

• device: The specific device mockup to display.
• isFrameVisible: Boolean to show/hide the device frame.
• orientation: The Orientation of the device.
• screen: The widget (your app content) to be displayed inside the frame.

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

To use the screenshot functionality in device_preview, add device_preview_screenshot to your pubspec.yaml dependencies and register the DevicePreviewScreenshot plugin within the tools property of your DevicePreview widget.

dependencies:
  device_preview_screenshot: <latest version>

import 'package:device_preview_screenshot/device_preview_screenshot.dart';

DevicePreview(
    // ...
    tools: [
        ...DevicePreview.defaultTools,
        const DevicePreviewScreenshot(),
    ],
),

When using DeviceFrame, your app inside the screen property might not automatically respect the simulated device's MediaQuery or Theme. To ensure a WidgetsApp (like MaterialApp) uses the simulated device context, set the useInheritedMediaQuery property to true.

It is recommended to use a Builder to ensure you have the correct context when initializing the MaterialApp.

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

A plugin is a Sliver widget that is added to the Device Preview menu. To ensure your plugin matches the visual style of built-in sections, wrap your content in a ToolPanelSection widget and use standard package:flutter/material.dart widgets like ListTile.

import 'package:device_preview/device_preview.dart';
import 'package:flutter/material.dart';

class CustomPlugin extends StatelessWidget {
  const CustomPlugin({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ToolPanelSection(
      title: 'Screenshot',
      children: [
        ListTile(
          title: const Text('Print in console'),
          onTap: () {
            print('Hey, this is a custom plugin!');
          },
        )
      ],
    );
  }
}

Add device_preview to your pubspec.yaml dependencies to use the package in your Flutter project.

dependencies:
  device_preview: <latest version>