device_frame 패키지는 일반적인 디바이스용 사용자 정의 가능한 모크업을 제공하여 개발자가 Flutter 앱을 현실적인 디바이스 환경에서 미리 확인할 수 있도록 합니다. Android, iOS, Web, macOS, Windows, Linux 등 다양한 플랫폼을 지원합니다. 발표, 문서화, 디자인 리뷰에 적합하며 앱이나 개발 워크플로우에 쉽게 통합할 수 있습니다. 패키지에는 조정 가능한 화면 크기와 방향을 갖춘 사전 정의된 디바이스 프레임이 포함되어 있어 외부 도구 없이도 시각적 커뮤니케이션을 향상시킵니다.
사용 사례
문서 내 앱 미리보기
디자인 프레젠테이션 모크업
장치 컨텍스트를 사용한 UI 테스트
개발자 데모
개발 중 시각 피드백
주요 기능
사전 정의된 장치 템플릿
크로스 플랫폼 지원
사용자 지정 가능한 프레임 치수
Flutter와의 간편한 통합
다중 화면 방향을 지원합니다
적합한 대상
Flutter 개발자
UI/UX 디자이너
기술 작가
제품 관리자
프레젠테이션 제작자
고려 사항
생산용 앱 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.
