alhilali_device_preview_screenshot

Screenshot export plugin for alhilali_device_preview.

It adds a clear action to Device Preview that exports the currently previewed device as a high-resolution transparent PNG. The default export saves the image automatically in a user-accessible location.

What Gets Exported

The PNG includes:

• device frame
• screen content
• bezels
• notches
• dynamic islands
• visible device decorations

The PNG does not include:

• editor background
• app/workspace background outside the device
• Device Preview toolbar
• overlays outside the device preview

This makes the output suitable for App Store, Play Store, landing pages, and marketing screenshots.

Install

dependencies:
  alhilali_device_preview: ^1.3.5
  alhilali_device_preview_screenshot: ^1.1.0

Basic Usage

Installing this package alone is not enough to show the screenshot button. Register the plugin in the tools list of DevicePreview.

import 'package:alhilali_device_preview/alhilali_device_preview.dart';
import 'package:alhilali_device_preview_screenshot/alhilali_device_preview_screenshot.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    DevicePreview(
      enabled: !kReleaseMode,
      tools: const [
        ...DevicePreview.defaultTools,
        DevicePreviewScreenshot(
          pixelRatio: 4,
          multipleScreenshots: true,
        ),
      ],
      builder: (context) => const MyApp(),
    ),
  );
}

Open the Device Preview toolbar, then click Export transparent PNG.

Where Screenshots Are Saved

By default, DevicePreviewScreenshot() saves PNG files automatically:

• Android: Pictures/DevicePreviewExports
• Windows, macOS, and Linux: device_preview_exports in the current working directory
• Other dart:io platforms: device_preview_exports inside the app documents directory

The plugin shows a SnackBar with the saved path after export.

Where Is The Button?

After adding the plugin, run your app in debug mode:

flutter run

Then:

1. Open the Device Preview toolbar or side panel.
2. Open the screenshot/export section.
3. Click Export transparent PNG to export the currently selected device.
4. If multipleScreenshots: true is enabled, click Export all devices to export every configured device.

If you cannot see the option:

• Make sure DevicePreviewScreenshot() is inside DevicePreview.tools.
• Make sure you kept ...DevicePreview.defaultTools if you still want the default Device Preview controls.
• Make sure DevicePreview is enabled. If you use enabled: !kReleaseMode, the UI appears only outside release builds.
• Restart the app after changing dependencies or imports.

High-Resolution Export

Use pixelRatio to create larger screenshots:

DevicePreviewScreenshot(
  pixelRatio: 4,
)

If pixelRatio is not set, the plugin uses the selected preview device pixel ratio.

Android Permissions

The default Android export uses media_store_plus internally and writes to Pictures/DevicePreviewExports. Modern Android versions usually do not need an extra permission prompt for this save flow.

If your app needs to support older Android versions, especially Android 9/API 28 or below, add the legacy storage permissions in android/app/src/main/AndroidManifest.xml:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
    <uses-permission
        android:name="android.permission.READ_EXTERNAL_STORAGE"
        android:maxSdkVersion="32" />
    <uses-permission
        android:name="android.permission.WRITE_EXTERNAL_STORAGE"
        android:maxSdkVersion="29" />

    <application
        android:requestLegacyExternalStorage="true"
        ...>
    </application>
</manifest>

For most new apps, no custom MediaStore code is needed.

Export All Devices

Enable batch export:

DevicePreviewScreenshot(
  pixelRatio: 4,
  multipleScreenshots: true,
)

Then use Export all devices from the screenshot section.

Custom Save Directory

The automatic saver is the default. If you want to save to a specific writable directory, pass screenshotAsFiles:

import 'dart:io';

import 'package:alhilali_device_preview_screenshot/alhilali_device_preview_screenshot.dart';

final outputDirectory = Directory('screenshots')..createSync(recursive: true);

DevicePreviewScreenshot(
  pixelRatio: 4,
  onScreenshot: screenshotAsFiles(outputDirectory),
)

Custom Processing

You can upload screenshots, save them to cloud storage, attach them to test reports, or process them in memory by providing your own ScreenshotProcessor.

DevicePreviewScreenshot(
  onScreenshot: (context, screenshot) async {
    final bytes = screenshot.bytes;
    final device = screenshot.device;
    // Save, upload, or transform bytes here.
  },
)

Complete Example

See:

examples/transparent_png_export_example

The example demonstrates high-resolution transparent PNG export with the default automatic saver.

License

MIT.