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 分类