device_frame

Simulate any device — screen, safe areas, locale, accessibility — with full framework fidelity.

You build on one screen; your users arrive on hundreds. Device Preview switches your running app to another device — an old 320pt phone, a tablet in landscape, a notched display, a half-width desktop window — instantly, with no rebuild and no simulator.

Screen size, pixel ratio, safe areas, orientation, folds, the software keyboard, locales, brightness, text scale, accessibility settings and target platform all change with it, and your app reads them through the same MediaQuery it always used. So the problems that normally surface in front of a customer — a clipped headline, a button under the home indicator, an overflow at 200% text — surface in front of you instead.

Control it from Flutter DevTools, from Dart, or from your tests.

Quickstart

dependencies:
  device_preview: <latest version>

void main() {
  DevicePreview.enable();
  runApp(const MyApp()); // runs as usual — now simulatable
}

That's the whole integration. Open DevTools, select the device_preview tab, and pick a device.

enable() is safe to call unconditionally: simulation is active in debug and profile builds and completely off in release, so nothing ships to your users. Pass a value to decide yourself — DevicePreview.enable(enabled: kDebugMode) for debug only, DevicePreview.enable(enabled: false) to turn it off.

Programmatic control:

import 'package:device_preview/presets.dart';

final c = DevicePreview.controller;
await c.applyPreset(DevicePresets.iPhone16Pro);
await c.setOrientation(Orientation.landscape);
await c.update((s) => s.copyWith(textScaleFactor: 2.0, platformBrightness: Brightness.dark));
await c.reset();

DevicePreview.controller throws when simulation is off (every release build); use DevicePreview.maybeController?.… from code that ships.

See device_preview/README.md for the full package documentation, including widget-test support via DevicePreviewBindingMixin.

Documentation

Open the website · Design document

Repository structure