flutter device_preview如何使用

在Flutter项目中安装了device_preview插件，但不知道如何正确配置和使用。具体遇到以下问题：

如何初始化并启用device_preview？
能否自定义设备列表或调整预览窗口大小？
为什么在真机调试时预览窗口不显示？
有没有办法保存当前预览的设备配置？希望能得到详细的实现代码示例和常见问题解决方案。

bupafengyu 1楼

Flutter Device Preview 是一个模拟不同设备的预览插件。使用方法：

在 pubspec.yaml 添加依赖：
```
dependencies:
  device_preview: ^1.0.0
```

在 main.dart 中包装应用：

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

运行应用，按 F1 或摇动设备打开预览面板，切换设备、方向等设置。

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

nodeper 2楼

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

安装

在 pubspec.yaml 中添加依赖：

dependencies:
  device_preview: ^1.0.0

然后运行：

flutter pub get

基本使用

1. 包装你的应用

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

import 'package:device_preview/device_preview.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      locale: DevicePreview.locale(context), // 使用设备预览的区域设置
      builder: DevicePreview.appBuilder, // 使用设备预览的构建器
      home: MyHomePage(),
    );
  }
}

2. 主要功能

设备切换：在预览界面选择不同设备
方向切换：横屏/竖屏预览
区域设置：测试不同语言
主题切换：亮色/暗色模式
文本缩放：测试可访问性

3. 自定义配置

DevicePreview(
  enabled: !kReleaseMode,
  tools: [
    ...DevicePreview.defaultTools,
    // 自定义工具栏
  ],
  storage: DevicePreviewStorage.none(), // 存储配置
  background: DevicePreviewBackground.transparent(), // 背景设置
)

注意事项

建议只在开发环境使用
生产版本会自动禁用
支持大部分 Flutter 应用功能