flutter device preview如何使用

我在Flutter项目中尝试使用device_preview插件来预览不同设备的UI效果，但遇到了一些问题：

按照文档添加依赖后，运行app时预览窗口没有显示，是否需要额外配置？
如何自定义设备列表？默认的机型比较少，想添加公司测试机的尺寸
在预览模式下Hot Reload不生效，每次都要重启很麻烦，有什么解决办法吗？
实际运行效果和预览有差异，比如文字溢出在预览中没显示出来，这个插件可靠吗？

求有经验的大神分享具体使用方法和避坑技巧！

caililin 1楼

Flutter Device Preview 是一个插件，用于在桌面模拟不同设备预览应用。使用方法：

安装依赖：
```
dependencies:
  device_preview: ^1.0.0
```

在 main.dart 中包装 MaterialApp：

void main() => runApp(
  DevicePreview(
    enabled: !kReleaseMode, // 仅调试模式启用
    builder: (context) => MyApp(),
  ),
);

运行应用，按 F1 打开设备预览面板，切换设备和设置。

更多关于flutter device preview如何使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

zlyuanteng 2楼

Flutter Device Preview 是一个用于在开发过程中预览应用在不同设备上显示效果的包。以下是基本使用方法：

安装

在 pubspec.yaml 中添加依赖：

dependencies:
  flutter_device_preview: ^0.7.5

然后运行：

flutter pub get

基本使用

1. 包装你的应用

在 main.dart 中，将你的应用用 DevicePreview 包装：

import 'package:flutter_device_preview/flutter_device_preview.dart';

void main() {
  runApp(
    DevicePreview(
      enabled: !kReleaseMode, // 仅在调试模式启用
      builder: (context) => MyApp(), // 你的应用
    ),
  );
}

2. 在 MaterialApp 中配置

确保你的 MaterialApp 使用 DevicePreview 提供的配置：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      locale: DevicePreview.locale(context), // 使用预览的语言
      builder: DevicePreview.appBuilder, // 应用预览构建器
      title: 'My App',
      home: MyHomePage(),
    );
  }
}

主要功能

设备切换：在工具栏中选择不同设备型号
屏幕方向：切换横屏/竖屏
语言设置：预览多语言支持
主题切换：测试深色/浅色主题
像素密度：调整设备DPI设置

注意事项

建议只在开发环境使用（通过 kReleaseMode 控制）
某些平台特定功能可能无法在预览中完全模拟
对于需要真实设备传感器的功能，仍需在实际设备上测试