Orientação gerada a partir de informações públicas. Apenas para referência.
O pacote device_frame fornece mockups personalizáveis para dispositivos comuns, permitindo que desenvolvedores visualizem seus aplicativos Flutter em contextos de dispositivos realistas. Ele suporta uma variedade de plataformas, incluindo Android, iOS, Web, macOS, Windows e Linux. Ideal para apresentações, documentação e revisões de design, permite integração fácil em aplicativos ou fluxos de trabalho de desenvolvimento. O pacote oferece quadros de dispositivo pré-definidos com tamanhos de tela ajustáveis e orientações, melhorando a comunicação visual sem exigir ferramentas externas.
Casos de uso
Pré-visualizações de aplicativos na documentação
mockups de apresentação de design
Testes de interface com contexto do dispositivo
Demonstrações de desenvolvedor
Feedback visual durante o desenvolvimento
Principais recursos
Modelos de dispositivo pré-definidos
Suporte multiplataforma
Dimensões de quadro personalizáveis
Integração fácil com o Flutter
Suporta múltiplas orientações de tela
Indicado para
Desenvolvedores Flutter
designers de UI/UX
redator técnico
gestores de produto
Criador de apresentações
Considerações
Não destinado à interface do usuário de aplicativo de produção
Requer atualizações manuais de quadro para novos dispositivos
Limitado a renderização de protótipo estático
Nenhum comportamento de dispositivo interativo
Melhor usado em ambientes de desenvolvimento ou demonstração
README original
Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.
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.
