device_frame_plus

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

DeviceFramePlus 是一個 Flutter 套件，讓開發者能在 Android、iOS、Web、macOS、Windows 和 Linux 的真實預設裝置框中顯示其應用介面。它透過提供流行裝置的可自訂模擬外觀，簡化了 UI 預覽，有助於視覺化應用在不同螢幕尺寸和方向下的呈現效果。適用於簡報、文件編寫以及早期設計審查，此套件以最少的設定增強了開發工作流程。該套件可透過 pub.dev 輕鬆整合至 Flutter 專案中。

適用情境

應用介面預覽
設計文件
演示材料
跨平台測試
開發者示範

主要特色

預定義設備範本
可自訂的框架樣式
多平台支援
輕鬆整合
響應式版面渲染

適合對象

UI/UX 設計師
Flutter 開發者
產品經理
技術撰寫者

使用建議

僅限靜態原型圖
無互動設備行為
僅供視覺參考
不適用於功能測試

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

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.

搜尋套件、儲存庫與 APP 分類