Device Preview는 개발 환경 내에서 앱이 다양한 기기에서 어떻게 보이고 동작하는지 시뮬레이션할 수 있는 Flutter 패키지입니다. 실시간 기기 에뮬레이션을 제공하며, 화면 크기, 방향, 플랫폼 및 다크 모드와 같은 시스템 설정을 포함합니다. 이로 인해 물리적 하드웨어 없이도 다양한 기기에서 일관된 UI를 보장할 수 있습니다. 이 패키지는 Android, iOS, Web, macOS, Windows, Linux 등 여러 플랫폼을 지원하여 크로스플랫폼 테스트에 이상적입니다.
사용 사례
다양한 기기에서 UI 반응성 테스트하기
다른 화면 크기와 방향 시뮬레이션
다크 모드 및 플랫폼별 동작 검증
다양한 기기 유형에서 앱 외관 미리 보기
크로스 플랫폼 UI 일관성 검사
주요 기능
실시간 장치 에뮬레이션
다중 플랫폼 지원
동적 장치 선택
방향 및 테마 시뮬레이션
Flutter DevTools와의 통합
적합한 대상
Flutter 개발자가 UI 레이아웃 테스트 중
크로스 플랫폼 앱을 개발하는 팀
디자이너가 반응형 디자인 검증 중
개발자가 접근성과 사용성을 보장함
고려 사항
물리적 장치 테스트의 대체가 아님
복잡한 UI에서는 성능이 달라질 수 있습니다
시각적 및 행동 시뮬레이션에 제한됨
네트워크 또는 하드웨어 조건을 복제하지 않습니다
원본 README
연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.
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:<latestversion>
voidmain() {
DevicePreview.enable();
runApp(constMyApp()); // 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.
The device catalog: one JSON per device — metrics, screen outline and body artwork. Generated into both the extension catalog and the package's built-in DevicePresets; see its README to add a device.
Legacy device frame drawings package from the 2.x era. Nothing in the 3.0 release depends on it — 3.0 renders frames from the device_specs artwork, carried by the built-in presets and pushed over the DevTools protocol.
The website, including its interactive demo — docs/demo is the counter example built for the web, docs/device_catalog.json the catalog its HTML panel pushes to it. Rebuild both with tool/build_demo.sh.
