device_frame_plus

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

DeviceFramePlus ist ein Flutter-Paket, das Entwicklern ermöglicht, ihre App-Interfaces innerhalb realistischer, vorgefertigter Geräte-Rahmen für Android, iOS, Web, macOS, Windows und Linux anzuzeigen. Es vereinfacht die UI-Vorschau durch maßgeschneiderte Mockups beliebter Geräte und hilft dabei, visuell zu verstehen, wie die App auf verschiedenen Bildschirmgrößen und Ausrichtungen aussieht. Ideal für Präsentationen, Dokumentation und frühe Designüberprüfungen, verbessert es den Entwicklungstakt mit minimalem Aufwand. Das Paket lässt sich nahtlos über pub.dev in Flutter-Projekte integrieren.

Anwendungsfälle

App-UI-Vorschau
Designdokumentation
Präsentationsmaterialien
Plattformübergreifende Tests
Entwickler-Demos

Hauptmerkmale

Vordefinierte Gerätevorlagen
Anpassbare Rahmenstile
Multiplattformunterstützung
Einfache Integration
Reaktive Layout-Rendern

Geeignet für

UI/UX-Designer
Flutter-Entwickler
Produktmanager
Technischer Autor

Hinweise

Beschränkt auf statische Mockups
Kein interaktives Geräteverhalten
Nur für visuelle Referenz
Nicht für funktionale Tests vorgesehen

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

Mockups for common devices.

Quickstart

Wrap any widget in a DeviceFrame widget and give it a device (multiple devices are available from the Device accessors).

DeviceFrame(
    device: Devices.ios.iPhone11,
    isFrameVisible: true,
    orientation: Orientation.portrait,
    screen: Container(
        color: Colors.blue,
        child: Text('Hello'),
    ),
)

Examples

Usage

Displaying a virtual keyboard

To display a generic simulated virtual keyboard, simply wrap any widget in a VirtualKeyboard.

DeviceFrame(
    device: Devices.ios.iPhone11,
    orientation: orientation,
    screen: VirtualKeyboard(
        isEnabled: true,
        child: // ...
    ),
)

Maintain device media query and theme in an encapsulated app

To make sure that a WidgetsApp uses the simulated MediaQuery from the simulated devices, set its useInheritedMediaQuery property to true.

DeviceFrame(
    device: Devices.ios.iPhone11,
    orientation: orientation,
    screen: Builder(
        builder: (deviceContext) => MaterialApp(
            useInheritedMediaQuery: true,
            theme: Theme.of(context),
        ),
    ),
),

Creating a custom generic device

Various generic devices are available as DeviceInfo factories to make it easy to create custom device instances.

Phone

DeviceInfo.genericPhone(
    platform: TargetPlatform.android,
    name: 'Medium',
    id: 'medium',
    screenSize: const Size(412, 732),
    safeAreas: const EdgeInsets.only(
      left: 0.0,
      top: 24.0,
      right: 0.0,
      bottom: 0.0,
    ),
    rotatedSafeAreas: const EdgeInsets.only(
      left: 0.0,
      top: 24.0,
      right: 0.0,
      bottom: 0.0,
    ),
)

Tablet

DeviceInfo.genericTablet(
    platform: TargetPlatform.android,
    name: 'Medium',
    id: 'medium',
    screenSize: const Size(1024, 1350),
    safeAreas: const EdgeInsets.only(
      left: 0.0,
      top: 24.0,
      right: 0.0,
      bottom: 0.0,
    ),
    rotatedSafeAreas: const EdgeInsets.only(
      left: 0.0,
      top: 24.0,
      right: 0.0,
      bottom: 0.0,
    ),
)

Desktop monitor

DeviceInfo.genericDesktopMonitor(
    platform: TargetPlatform.windows,
    name: 'Wide',
    id: 'wide',
    screenSize: const Size(1920, 1080),
    windowPosition: Rect.fromCenter(
      center: const Offset(
        1920 * 0.5,
        1080 * 0.5,
      ),
      width: 1620,
      height: 780,
    ),
)

Laptop

DeviceInfo.genericLaptop(
    platform: TargetPlatform.windows,
    name: 'Laptop',
    id: 'laptop',
    screenSize: const Size(1920, 1080),
    windowPosition: Rect.fromCenter(
      center: const Offset(
        1920 * 0.5,
        1080 * 0.5,
      ),
      width: 1620,
      height: 780,
    ),
)

Available devices

Screenshots for all available devices are available in the test/devices directory

Contributing

Edit device frames

All frames are designed in a Figma file.

Pakete, Repositories und App-Kategorien suchen